/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
body {
	max-width: 100%;
	overflow: hidden;
}

#footer ul {list-style:none; margin-bottom:0; margin-left:0;}
#footer li {margin-left:0;}
.header-bottom-nav > li > a {text-transform:uppercase;}
.page-title-bar .title {display:block; color:#fff; text-transform:uppercase; font-size:30px;
        display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-title-bar {background:url(https://feretco.ftu.edu.vn/wp-content/uploads/2026/02/Rectangle-5623.png)center no-repeat; text-align:center; height:350px; color:#fff; padding-top:125px; background-size:cover}
.page-title-bar .breadcrumb a {color:#fff;}
form {margin-bottom:0;}
.wpcf7-spinner {display:none;}
#header .button.icon i {font-size:12px;}
#header .social-icons .button {font-size:10px;}
h2 {font-size:35px;}
.download-but span:before {content:url(https://feretco.ftu.edu.vn/wp-content/uploads/2026/02/dlIcon.png); position:relative; top:5px; padding-right:5px;}
.gioithieutc-col2 {background:url(https://feretco.ftu.edu.vn/wp-content/uploads/2026/02/bg1.png) center no-repeat; background-size:cover;}
.gioithieutc-col1 {z-index:9999;}
.box-blog-post .is-divider {display:none;}
.daotao-tab .post-title { margin-bottom:10px;}
.post-meta {font-size:12px;}
.daotao-tab .box-vertical {border-radius:12px;}
.daotao-tab .box-image {border-radius:12px 0px 0px 12px;}
.daotao-tab .has-shadow>.col>.col-inner {border-radius:12px;}
.daotao-tab .nav > li > a {color:#000; border-radius:30px; padding:5px 20px; min-width:289px; justify-content:center;}
.daotao-tab .nav-center {background:#eeeeef; padding:5px; border-radius:30px;}
.daotao-tab .nav>li.active>a {background:#fff;}
.tuyensinh-tc .box-text {vertical-align:top;}
.tuyensinh-tc .post-title {margin-bottom:10px;}
.tuyensinh-tc .post-meta {padding-bottom:10px;}
.hoatdong-tab .nav > li > a {font-size:16px;}
.hoatdong-tab .nav > li {margin-left:20px !important; margin-right:20px !important;}
.hoatdong-tab .nav > li > a {border-bottom:1px solid; font-weight:500}
.hoatdong-tab .nav>li.active>a {color:#C71A1A; font-weight:600;}
.hoatdong-tab .nav {margin-bottom:10px;}
.has-shadow>.col>.col-inner {border-radius:12px;}
.khoinghiep-col:hover .box-text {background:#980C10 !important;}
.khoinghiep-col .box-text {border-radius:0px 0px 10px 10px;}
.khoinghiep-col:hover h3 {color:#fff;}
.khoinghiep-col:hover p {color:#fff;}
.khoinghiep-col .box-image {border-radius:10px 10px 0px 0px;}
.khoinghiep-col h3 {margin-bottom:15px;}
.tintuc-tc2 .post-title {height:40px; overflow:hidden}
.tintuc-col1:hover .col-inner {background:#980C10;}
.tintuc-col1:hover .post-title {color:#fff;}
.tintuc-col1:hover .post-meta {color:#fff;}
.ctform-row {display:inline-flex; width:100%;}
.ctform-col {width:100%; margin-left:10px; margin-right:10px;}
.ctform-col input[type=submit] {width:100%; margin-top:31px;}
.ctform-row input {border-radius:5px;}
.absolute-footer {display:none;}
.doingu-box {border:1px solid #ddd; border-radius:12px;}
.doingu-box .box-image {border-radius:12px 12px 0px 0px;}
.doingu-box:hover {background:#333638; color:#fff;}
.doingu-box:hover h4 {color:#fff;}
.hoptac-blog .box {border-radius:12px;padding:20px;}

.hoptac-blog .col.post-item .box:hover {background:#980C10 !important;}
.hoptac-blog .col.post-item .box:hover {color:#fff;}
.hoptac-blog .col.post-item .box:hover .post-title {color:#fff;}
.thuvien-row1 .button {margin:0;}
.thuvien-but2 {background:transparent !important; border:none; color:#333;}
.thuvien-but2:hover {background:#bf2025 !important; color:#fff; box-shadow:none}
.daotao-box .box-text {bottom:0; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(51, 54, 56, 1) 100%); border-radius:15px; padding:30px;}
.daotao-box .box-image {border-radius:15px;}
.daotao-box:hover .box-text {background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(177, 24, 30, 1) 100%);}
.daotao-box p {display:none;}
.daotao-box:hover p{display:block;}
.daotao-box:hover .box-text {background-color:transparent !important}
.category .page-wrapper {padding-top:60px;}
.category .box-blog-post {padding:15px; border-radius:15px;}
.category .box-blog-post .box-text {padding:15px 0px 0px 0px;}

.article-inner {box-shadow:none;}
.category .post-title {margin-bottom:10px; overflow:hidden}
.ttmoi-blog2 .box-blog-post {padding:0;}
.ttmoi-blog2 .image-cover {padding-top:150px !important;}
.ttmoi-blog1 .box-blog-post {padding:0;}
.ttmoi-blog2 .box-text {padding:10px 15px !important;}
.lienhe-col2 input {border-radius:7px; width:100%;}
.lienhe-col2 textarea {border-radius:7px;} 
.hoptac-blog .post-title {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 18px;
}
.banner h2 {
    line-height: inherit;
}
.category .post-title {
    padding-right: 35px;
    background-image: url(images/arrow-up-right.png);
    background-position: top right;
    background-repeat: no-repeat;
    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.category .col.post-item:hover .post-title {
    color: #0D549A;
}
/* 1. Thiết lập trạng thái ban đầu cho ảnh */
.col.post-item .box-image img {
    transition: transform 0.8s ease-in-out !important; /* Thời gian zoom 0.8 giây, bạn có thể tăng lên 1.5s để chậm hơn */
    backface-visibility: hidden;
    will-change: transform;
}

/* 2. Cấu trúc bao ngoài cần phải ẩn phần thừa khi ảnh phóng to */
.col.post-item .box-image {
    overflow: hidden !important;
}

/* 3. Hiệu ứng khi hover vào cả item hoặc chỉ box ảnh */
.col.post-item:hover .box-image img,
.col.post-item .box-image:hover img {
    transform: scale(1.1); /* Phóng to lên 10% (1.1). Muốn to hơn thì dùng 1.2 */
}
.button i, button i {
    top: 0;
}
.form-flat input:not([type=submit]), .form-flat select, .form-flat textarea {
    height: 40px;
}
/* */
body.nav-dropdown-has-border .nav-dropdown {
    border: none;
    padding: 0;
}
body.nav-dropdown-has-border .nav-dropdown a {
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 0;
}
.post_comments  {
    display: none;
}

/* Sidebar */

/* */
.blog-single .article-inner > .entry-header {
    display: none;
}
/* */
.product-small.box ins *,
.product-small.box .price > .amount * {
    color: red;
    font-size: 16px;
}
.product-small.box del * {
    color: #333;
}
.product-small.box .product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 22px;
    height: 44px;
}
.product-small.box .box-image img {
    height: 200px;
    object-fit: cover;
}
/* */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}
.pulse {
    transition: all 150ms linear 0s;
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

blockquote {

    font-size: 110%;
    color:#666;

    margin: 0 auto;
    border-left:0px;
    margin-left: 20px;
    padding-bottom: 50px;
}
blockquote h1 {
    font-size: 3rem;
}
blockquote p {
    font-style: italic;
    margin-bottom: 0;
}
blockquote p::before,
blockquote p::after {
    content: "“";
    font-family: Georgia;
    font-size: 6rem;
    margin: -3rem 0 0 -4rem;
    position: absolute;
    opacity: 0.5;
    color:var(--primary-color);
}
blockquote p::after {
    content: "”";
    margin: -2rem -3rem 0 0;
}
blockquote cite {
    font-size: 1.5rem;
}

.hpt-tl-wrapper {
    background-image: url(images/bg-timeline.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.header:not(.transparent) .header-bottom-nav.nav > li {
    margin: 0 12px;
}
.header:not(.transparent) .header-bottom-nav.nav > li > a {
    font-size: 13px;
    font-weight: normal;
}
.header:not(.transparent) .header-bottom-nav.nav > li.active > a {
    font-weight: bold;
}

/* --- Style cho khu vực Tab nút bấm --- */
.gallery-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.gallery-tabs {
    display: inline-flex;
    background-color: #f1f1f1; /* Màu nền xám của thanh chứa */
    border-radius: 30px; /* Bo tròn thanh chứa */
    padding: 5px;
    position: relative;
}

.gallery-tabs .tab-link {
    display: block;
    padding: 6px 20px;
    width: 250px;
    text-align: center;
    border-radius: 25px; /* Bo tròn nút con */
    font-weight: bold;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
}

/* Style cho nút đang Active (Màu đỏ) */
.gallery-tabs .tab-link.active {
    background-color: #bf1e2e; /* Mã màu đỏ giống trong ảnh */
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.gallery-tabs .tab-link:hover:not(.active) {
    background-color: #e0e0e0;
}

/* --- Style cho Tiêu đề --- */
.section-title-main {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 24px;
    color: #333;
}
.is-divider {
    background-color: #444;
    height: 3px;
    width: 60px;
    margin: 10px auto 30px auto; /* Căn giữa gạch chân */
}

/* --- Style cho Lưới ảnh --- */
.gallery-box {
    transition: transform 0.3s;
}

.gallery-box:hover {
    transform: translateY(-5px); /* Hiệu ứng nhấc ảnh lên khi hover */
}

.gallery-page-container .gallery-box .box-image img {
    border-radius: 15px; /* Bo góc ảnh giống mẫu */
    width: 100%;
    height: 200px; /* Cố định chiều cao để ảnh đều nhau */
    object-fit: cover; /* Cắt ảnh vừa khung, không bị méo */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.gallery-page-container .section-title {
    text-align: center;
    font-size: 35px;
    display: block;
}
.gallery-page-container {
    padding-bottom: 30px;
}


/* --- Style chung cho Video Box --- */
.video-box {
    transition: transform 0.3s ease;
}

.video-box:hover {
    transform: translateY(-5px);
}

.video-image-wrapper {
    position: relative; /* Để căn chỉnh nút Play tuyệt đối theo khung này */
    overflow: hidden;
    border-radius: 10px; /* Bo góc nhẹ */
}

/* Ảnh thumbnail video */
.video-image-wrapper img {
    width: 100%;
    height: 270px; /* Chiều cao cố định để lưới đều nhau */
    object-fit: cover;
    display: block;
}

/* Lớp phủ tối màu (Overlay) */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Màu đen mờ 40% */
    z-index: 1;
    transition: background-color 0.3s;
}

.video-box:hover .video-overlay {
    background-color: rgba(0, 0, 0, 0.2); /* Sáng lên chút khi hover */
}

/* --- Tạo nút Play (Vòng tròn) --- */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Căn giữa tuyệt đối */
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.video-box:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1); /* Phóng to nhẹ khi hover */
    background-color: rgba(255,255,255,0.1);
}

/* --- Tạo hình tam giác Play bên trong --- */
.play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px; /* Tạo hình tam giác */
    border-color: transparent transparent transparent #ffffff;
    margin-left: 4px; /* Căn chỉnh lại chút cho cân đối thị giác */
}

/* Các style cũ của Tabs và Title vẫn giữ nguyên từ câu trả lời trước */


/* Container phân trang */
.custom-pagination {
    margin: 20px 0;
}

/* Xóa style danh sách mặc định */
.custom-pagination ul.page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

/* Style cho từng nút số */
.custom-pagination ul.page-numbers li a,
.custom-pagination ul.page-numbers li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd; /* Viền mờ */
    border-radius: 50%; /* Bo tròn (xóa dòng này nếu muốn hình vuông) */
    color: #333;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

/* Hiệu ứng khi di chuột vào */
.custom-pagination ul.page-numbers li a:hover {
    background-color: #eee;
    color: #000;
}

/* Style cho trang hiện tại (Active) */
.custom-pagination ul.page-numbers li span.current {
    background-color: #bf1e2e; /* Màu đỏ chủ đạo */
    color: #fff;
    border-color: #bf1e2e;
}

/* Style cho icon mũi tên */
.custom-pagination i {
    font-size: 18px;
}

.header-bottom .has-dropdown .icon-angle-down {
    display: none;
}

/* Container chứa các icon */
.social-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa các icon */
    padding: 0px;
}

/* Thẻ a bao quanh ảnh */
.social-item {
    display: flex;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
}

/* Hiệu ứng khi di chuột vào icon */
.social-item:hover {
    transform: translateY(-3px); /* Nhảy nhẹ lên trên */
    opacity: 0.8;
}

/* Định dạng ảnh icon */
.social-item img {
    width: 16px;  /* Bạn có thể tăng lên 40px nếu muốn to hơn */
    height: auto;
    display: block;
    object-fit: contain;
}
.footer-wrapper .social-item img {
    width: 40px;
}
.post-meta, 
.col.post-item p.from_the_blog_excerpt {
    color: #333;
}
.col.post-item .post-title {
    /* Thêm color và text-shadow vào transition */
    transition: color 0.4s ease-in-out, text-shadow 0.4s ease-in-out, transform 0.8s ease-in-out;
}
.col.post-item:hover .post-title {
    color: var(--primary-color);
}

/* --- TỔNG THỂ DROPDOWN CẤP 2 --- */
.nav-dropdown {
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    /* Tạo hiệu ứng mượt */
    transition: all 0.3s ease-in-out !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

/* Hiển thị cấp 2 khi hover */
li:hover > .nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* --- ĐỊNH DẠNG CÁC ITEM --- */
.nav-dropdown > li.nav-dropdown-col {
    display: block;
    width: 100%;
    border-right: 0;
    position: relative; /* Cần thiết để cấp 3 căn theo */
    transition: background 0.2s ease;
}

.nav-dropdown .nav-dropdown-col > a, 
.nav-dropdown li a {
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: 15px;
    padding: 10px 15px !important;
    display: block;
    color: #333;
    transition: all 0.2s ease;
}

/* Hover cấp 2 */


/* --- SUB-MENU CẤP 3 (NGUYÊN BẢN MƯỢT) --- */
.nav-dropdown .nav-dropdown-col > ul {
    border: 1px solid #d2d2d2;
    margin-top: 0; /* Chỉnh lại cho bằng đầu với item cha */
    box-shadow: 4px 4px 10px rgba(0,0,0,0.15);
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 99;
    background: white;
    min-width: 240px;
    padding: 10px 0;
    list-style: none;
    
    /* Hiệu ứng ẩn cấp 3 */
    display: block !important; /* Dùng block nhưng ẩn bằng opacity */
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.25s ease-in-out;
}

/* Hiển thị cấp 3 khi hover cấp 2 */
li.nav-dropdown-col:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

/* Item trong cấp 3 */
.nav-dropdown .nav-dropdown-col > ul li {
    transition: background 0.2s ease;
}

.nav-dropdown .nav-dropdown-col > ul li a {
    padding: 10px 15px;
    color: #000;
}

/* Hover cấp 3 */




/* Loại bỏ border dưới cuối cùng */
.nav-dropdown-default > li > a {
    border-bottom: 0 !important;
}

.gallery-custom-home .col {
    padding-bottom: 0;
}


@media only screen and (min-width: 1024px) {
    .widget ul.menu > li {
        position: relative;
    }
    .widget ul > li.has-child:hover >.sub-menu{
        display:block !important;
    }
    .widget ul.menu ul.sub-menu {
        display: none !important;
        position: absolute;
        width: 100%; 
        left:99%;
        top: 0;
        z-index: 999;
        border: 1px solid #e1e1e1 !important;
        background: #fff;
        margin: 0;
        padding: 0;
    }
    .widget .toggle{
        transform: rotate(-90deg);
        margin-right: 10px;
    }
    .widget ul.menu>li li {
        padding: 2px 0;
        border-bottom: 1px solid #e1e1e1;
    }
}

@media only screen and (max-width: 480px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .blog-archive .post-sidebar.col {
        padding: 0 15px !important;
    }
    .daotao-tab .nav > li > a {border-radius:0;}
    .daotao-tab .nav-center {border-radius:0px;}
    .ctform-row {display:inherit; width:100%;}
    .ctform-col {margin-left:0;}
    .ctform-col input[type=submit] {margin-top:10px}
    h2 {
        font-size: 26px;
    }
    .daotao-tab .nav > li > a {
        min-width: auto;
    }
    .hoatdong-tab .nav > li {
        margin-left: 0px !important;
        margin-right: 15px;
    }
    .tabbed-content .nav-simple {
        /* Cho phép các phần tử con nằm trên cùng 1 hàng */
        display: flex !important;
        flex-wrap: nowrap !important;
        
        /* Bật tính năng cuộn ngang */
        overflow-x: auto !important;
        overflow-y: hidden;
        
        /* Ẩn thanh cuộn xấu xí trên một số trình duyệt nhưng vẫn kéo được */
        -webkit-overflow-scrolling: touch;
        
        /* Căn lề trái để bắt đầu đẹp hơn */
        justify-content: flex-start !important;
        padding-bottom: 5px; /* Tạo khoảng trống nhỏ bên dưới */
    }

    .tabbed-content .nav-simple li {
        /* Ngăn các item bị co lại, giữ nguyên kích thước nội dung */
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    .thuvien-tab.tabbed-content .nav-simple {
        justify-content: center !important;
    }

    /* Tùy chọn: Ẩn thanh cuộn (scrollbar) để trông mượt hơn */
    .tabbed-content .nav-simple::-webkit-scrollbar {
        display: none;
    }
    .tabbed-content .nav-simple {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .banner h2 {
        font-size: 30px;
        line-height: inherit;
    }
    .gallery-tabs .tab-link {
        width: 180px;
    }
    .download-but span:before {
        display: none;
    }
}
/* */
.col.post-item .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 23px;
    height: 46px;
}
#nav-below a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
        text-align: left;
    padding: 0 20px 0 15px;
}
#nav-below a span {
    position: absolute;
    top: 8px;
    right: 0;
    z-index: 1;
}
#nav-below .nav-previous a {
    padding: 0 15px 0 30px;
}
#nav-below .nav-previous a span {
    right: initial;
    left: -10px;
}