/* --- Cài đặt chung --- */
 @font-face {
     font-display: block;
     font-family: Anton-Regular;
     src: url("../font/Anton-Regular.ttf") format("truetype");

 }

 @font-face {
     font-display: block;
     font-family: CormorantGaramond-Bold;
     src: url("../font/CormorantGaramond-Bold.ttf") format("truetype");

 }

 @font-face {
     font-display: block;
     font-family: CormorantGaramond-Semi-Bold;
     src: url("../font/CormorantGaramond-SemiBold.ttf") format("truetype");

 }

 @font-face {
     font-display: block;
     font-family: CormorantGaramond-Italic;
     src: url("../font/CormorantGaramond-Italic.ttf") format("truetype");

 }

 @font-face {
     font-display: block;
     font-family: OpenSans-Italic;
     src: url("../font/OpenSans-Italic.ttf") format("truetype");

 }

 @font-face {
     font-display: block;
     font-family: OpenSans_Condensed-Regular;
     src: url("../font/OpenSans-Regular.ttf") format("truetype");

 }

 @font-face {
     font-display: block;
     font-family: OpenSans_Condensed-Bold;
     src: url("../font/OpenSans-SemiBold.ttf") format("truetype");

 }
 @font-face {
     font-display: block;
     font-family: Roboto_Extra-Bold;
     src: url("../font/Roboto_Condensed-ExtraBold.ttf") format("truetype");

 }
 @font-face {
     font-display: block;
     font-family: Roboto-SemiBold;
     src: url("../font/Roboto_SemiCondensed-SemiBold.ttf") format("truetype");

 }

 :root {
     /*
     * QUAN TRỌNG: Hãy thay đổi giá trị 80px này 
     * bằng chiều cao thực tế của header của bạn.
    */
     --header-height: 80px;
 }

 /* .hero__v6 {
     padding: 10rem 0 !important;
 } */

 .section {
     padding: 70px 0;
     scroll-margin-top: 60px;
 }

 .site-header.active {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;

 }

 /* --- Container chính của header --- */
 .site-header {
     display: flex;
     align-items: center;
     gap: 20px;
     width: 100%;
     transition: all 0.3s ease;
 }

 /* --- Logo --- */
 .site-logo a {
     display: flex;
     align-items: center;
     text-decoration: none;
 }

 /* .site-logo img {
     height: 100px;
 } */
 .title-logo {
     display: none;
     /* font-size: 24px; */
     font-weight: 400;
     /* Bước 1: Dùng 'background' để TẠO dải màu gradient.
       Đây là bước bắt buộc. Gradient này chỉ tồn tại bên trong phần tử h1. */
     background: linear-gradient(to right, #EFE5B8, #F2E7C3, #F4D297);

     /* Bước 2: Ra lệnh cho trình duyệt: "Hãy lấy nền ở trên và chỉ hiển thị
       nó ở những nơi có chữ". */
     -webkit-background-clip: text;
     background-clip: text;

     /* Bước 3: Làm cho màu của chữ trở nên trong suốt.
       Nếu không có dòng này, màu chữ (mặc định là đen) sẽ che mất
       lớp nền gradient bên dưới. */
     color: transparent;
     font-family: Anton-Regular, sans-serif;
 }

 /* --- Thanh Menu --- */
 .main-navigation {
     flex-grow: 1;

     border-radius: 50px;
     padding: 5px 50px;
 }

 .main-navigation ul {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .main-navigation li a {
     text-decoration: none;
     font-size: 16px;
     font-weight: 500;
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 130px;
     height: 50px;
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     color: #ffffff;
     background-image: none;
     transition: color 0.3s ease;
     font-family: 'Times New Roman', serif;
 }

 /* --- KHI HOVER HOẶC ACTIVE: HIỂN THỊ ẢNH NỀN VÀ ĐỔI MÀU CHỮ --- */
 .main-navigation li a:hover,
 .main-navigation li a.active {
     color: #7C4601;
     background-image: url('../images/519412595_756542936871062_3322409113867386569_n.png');
 }

 .site-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 15px;
     background-color: #7D1C1E;
 }

 /* .site-logo img {
     max-height: 40px;
 } */

 .main-navigation ul {
     margin: 0;
     padding: 0;
     list-style: none;
     display: flex;
 }



 .main-navigation a {
     text-decoration: none;
     color: #333;
     font-weight: bold;
     padding: 5px 0;
     position: relative;
     transition: color 0.3s;
 }



 /* --- PHẦN CSS THÊM CHO MENU MOBILE --- */

 /* 1. Icon Hamburger (chỉ hiển thị trên mobile) */
 /* .mobile-menu-toggle {
     display: none;
     font-size: 24px;
     cursor: pointer;
     color: #333;
 } */

 /* 2. Menu trượt ra từ bên phải */
 .mobile-navigation {
     position: fixed;
     top: 0;
     right: 0;
     width: 280px;
     height: 100%;
     background: linear-gradient(to right,
             /* 1. Hướng chuyển màu: từ TRÁI qua PHẢI */
             #FFFCD9,
             /* 2. Màu bắt đầu (bên trái) */
             #FAF9EC,
             /* 3. Màu ở giữa */
             #F1EFD7,
             #F4F0C0
             /* 4. Màu kết thúc (bên phải) */
         );
     z-index: 1001;
     /* Phải cao hơn lớp phủ */
     box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
     transform: translateX(100%);
     /* Ẩn menu ra ngoài màn hình bên phải */
     transition: transform 0.3s ease-in-out;
     padding: 16px;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
 }

 /* Trạng thái khi menu mở */
 .mobile-navigation.is-open {
     transform: translateX(0);
 }

 /* Nút đóng menu mobile */
 .mobile-nav-close {
     text-align: right;
     font-size: 24px;

     cursor: pointer;
     color: #333;
 }

 .mobile-navigation ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }



 .mobile-navigation a {
     padding-top: 8px;
     padding-bottom: 8px;
     text-decoration: none;
     color: #FFFFFF;
     font-size: 18px;
     display: block;
     /* padding: 10px; */
     font-weight: 600;
     border-radius: 5px;
     transition: background-color 0.3s;
     font-family: OpenSans_Condensed-Bold, serif;
 }

 .mobile-navigation a.active,
 .mobile-navigation a:hover {
     background-color: #f0f0f0;

 }

 /* 3. Lớp phủ nền */
 .menu-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     /* Ẩn hoàn toàn */
     transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
 }

 /* Trạng thái khi lớp phủ hiện */
 .menu-overlay.is-open {
     opacity: 1;
     visibility: visible;
     /* Cho phép tương tác */
 }


 /* MEDIA QUERY - Responsive cho màn hình nhỏ */
 @media (max-width: 768px) {

     /* Ẩn menu desktop */
     /* .main-navigation {
         display: none;
     } */

     /* Hiện icon hamburger */
     /* .mobile-menu-toggle {
         display: block;
     } */
 }



 /* --- Khung chứa icon (div chính) --- */
 .mobile-menu-toggle {
     /* Kích thước */
     width: 40px;
     height: 40px;

     /* Màu nền */
     background-color: #860002;

     /* Bo góc (ước tính từ Figma) */
     border-radius: 8px;

     /* Hiệu ứng Inner Shadow từ Figma */
     box-shadow:
         inset -1px -4px 2px 0 rgba(0, 0, 0, 0.24),
         inset 1px 2px 4px 0 rgba(255, 255, 255, 0.5);

     /* Thiết lập để căn giữa icon bên trong */
     display: flex;
     justify-content: center;
     align-items: center;

     /* Con trỏ để người dùng biết có thể click */
     cursor: pointer;

     /* Hiệu ứng chuyển động mượt mà */
     transition: all 0.2s ease-in-out;
 }

 /* --- Icon Font Awesome bên trong --- */
 .mobile-menu-toggle i.fas.fa-bars {
     /* Kích thước của icon */
     font-size: 20px;

     /* --- Kỹ thuật tạo màu gradient cho icon (chữ) --- */
     /* 1. Đặt nền là dải màu gradient vàng gold */
     background: linear-gradient(to right, #FADFB4, #C0983D, #C79E3F, #DAAF47, #DEB249);

     /* 2. Cắt nền theo hình dạng của chữ (icon) */
     -webkit-background-clip: text;
     /* Dành cho trình duyệt Safari/Chrome */
     background-clip: text;

     /* 3. Làm cho màu của chữ/icon trong suốt để nền hiện ra */
     color: transparent;
 }


 /* --- Hiệu ứng khi di chuột và nhấn (tùy chọn) --- */
 .mobile-menu-toggle:hover {
     filter: brightness(1.1);
 }

 .mobile-menu-toggle:active {
     transform: scale(0.98);
     filter: brightness(0.9);
 }


 /* === PHẦN 1: GLOBAL RESET - Đặt ở đầu file CSS === */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 html,
 body {
     margin: 0;
     padding: 0;
     /* An toàn nhất là ẩn overflow-x trên toàn trang */
     overflow-x: hidden;
 }


 /* === PHẦN 2: SCROLL CONTAINER ĐÃ ĐƯỢC SỬA LỖI === */
 /* .scroll-container {
     height: 100vh;
    
     width: 100%;
     
     overflow-y: scroll;
  
     scroll-snap-type: y mandatory;
  
     scroll-behavior: smooth;
   
 }*/

 /* Tùy chọn: Ẩn thanh cuộn trên các trình duyệt Webkit (Chrome, Safari) */
 /* .scroll-container::-webkit-scrollbar {
     display: none;
 }  */


 /* === PHẦN 3: CẤU HÌNH CHO CÁC SECTION CON BÊN TRONG === */
 /* Áp dụng cho tất cả các thẻ <section> là con trực tiếp của .scroll-container */
 /* .scroll-container>section {
     width: 100%;
     height: 100vh;
     scroll-snap-align: start;

     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 2rem;
 } */

 /* Thêm màu nền khác nhau để phân biệt */
 .section-1 {
     background-image: url('../images/conver_bg.svg');
     background-repeat: no-repeat;
     /* QUAN TRỌNG: Không lặp lại ảnh */
     background-size: cover;
     /* QUAN TRỌNG: Che phủ toàn bộ khối */
     background-position: center;
     /* QUAN TRỌNG: Căn ảnh ra giữa */
     overflow: hidden
 }

 .section-1 {
     position: relative;
     z-index: 0;
 }

 /* Ảnh trang trí luôn ở phía sau */
 .upleft-image,
 .upright-image,
 .bottom-image,
 .bird-image {
     z-index: 1;
 }

 /* Nội dung chính nổi lên trên */
 .section-1 .container {
     position: relative;
     z-index: 2;
 }

 /* --- Nút bấm chính (Thẻ <a>) --- */
 .fancy-button {
     position: relative;
     display: flex;
     align-items: center;
     background-color: #9A2A2A;
     /* Nền của nút trùng với nền trang */

     /* Bo tròn để tạo hình viên thuốc */
     border-radius: 50px;

     /* ---- PHẦN CẬP NHẬT QUAN TRỌNG ---- */
     /* Viền và hiệu ứng shadow đa lớp từ Figma */
     border: 2px solid #F3C96B;
     /* Giữ lại viền cứng bên ngoài */
     box-shadow:
         /* Shadow 1: Vầng sáng tỏa đều, blur trung bình 8.5px */
         0 0 8.5px rgba(254, 229, 165, 0.82),
         /* Shadow 2: Vầng sáng nhỏ hơn, gần hơn */
         0 0 4px rgba(255, 232, 173, 0.87),
         /* Shadow 3: Đổ bóng nhẹ xuống dưới */
         0 2px 8px rgba(237, 217, 80, 0.47);

     /* Padding: top/bottom | right | left (để chừa không gian cho icon) */
     padding: 12px 30px 12px 85px;

     text-decoration: none;
     transition: all 0.3s ease-in-out;
 }

 /* --- Hiệu ứng khi di chuột vào (Cũng có thể nâng cấp) --- */
 .fancy-button:hover {
     transform: translateY(-3px) scale(1.02);
     /* Bạn có thể làm cho hiệu ứng sáng mạnh hơn ở đây nếu muốn */
     /* Ví dụ: */
     box-shadow:
         0 0 12px rgba(254, 229, 165, 0.9),
         0 0 8px rgba(255, 232, 173, 0.95),
         0 4px 12px rgba(237, 217, 80, 0.6);
 }

 /* ----- CÁC PHẦN CSS KHÁC GIỮ NGUYÊN ----- */

 .icon-wrapper {
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 64px;
     height: 72px;
     background-color: #FDF3D5;
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     box-shadow: inset 0 0 0 2px #A53939;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .icon-wrapper img {
     width: 32px;
     height: 32px;
     object-fit: contain;
 }

 .button-text {
     color: #F0EAD6;
     font-size: 18px;
     font-weight: bold;
     margin-left: 15px;
 }
/* Định nghĩa Keyframes cho hiệu ứng "thở" */
@keyframes button-breathe {
    0% {
        transform: scale(1); /* Kích thước ban đầu */
    }
    50% {
        transform: scale(1.05); /* To lớn hơn một chút (ví dụ 5%) */
    }
    100% {
        transform: scale(1); /* Quay về kích thước ban đầu */
    }
}

.btn-hover-default-banner {
    width: 100%;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../images/dat-lich.svg);
    background-repeat: no-repeat;
    background-size: unset;
    background-position: center;
    cursor: pointer;
    height: 80px;

    /* Áp dụng hiệu ứng "thở" */
    animation: button-breathe 1.0s ease-in-out infinite alternate; /* 2s: thời gian một chu kỳ, ease-in-out: tốc độ mượt mà, infinite: lặp vô hạn, alternate: chạy đi chạy lại */

    /* Thêm thuộc tính transition để hiệu ứng chuyển động mượt mà khi hover */
    /* transition cho transform và background-image */
    transition: transform 0.3s ease-in-out, background-image 0.3s ease-in-out; 
}

.btn-hover-default-banner:hover {
    /* Dừng animation "thở" khi hover */
    transform: scale(1.05); 
    animation-play-state: paused; 
    /* Khi hover, scale (phóng to) lên 10% (1.1 lần) */
    /* Thay đổi background khi hover */
    /* background-image: url(../images/btn_glow.svg); */
}

 .btn-hover-default {
     width: 100%;
     font-weight: 500;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     background-image: url(../images/btndefault.svg);
     background-repeat: no-repeat;
     background-size: unset;
     background-position: center;
     cursor: pointer;
 }

 .btn-hover-default:hover {
     color: white;
     font-weight: 500;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     background-image: url(../images/btnhover.svg);
     background-repeat: no-repeat;
     background-size: unset;
     background-position: center;

 }

 .btn-hover-default .btn {
     border: none;
     font-size: 20px;
     text-decoration: none;
     color: #ffffff;
     font-family: 'Times New Roman', serif;

 }

 .btn-hover-default a {
     font-size: 22px;
     text-decoration: none;
     color: #ffffff;
     font-family: 'Times New Roman', serif;
 }

 .btn-hover-default button {
     font-size: 22px;
     text-decoration: none;
     color: #ffffff;
     font-family: 'Times New Roman', serif;
 }

 .phong-thuyh1 {

     text-align: center;

     display: flex;

     justify-content: center;

     align-items: center;

     background-image: url(../images/gthieu.svg);

     background-repeat: no-repeat;

     background-size: contain;

     background-position: center;
     font-family: OpenSans-Italic, serif;

 }

 .title-chuyengiatuvan {

     font-family: OpenSans-Italic, serif;
 }

 /* --- Khung chính của section --- */
 .mission-section {
     width: 100%;

     background-color: #FCF9F3;
     /* Màu nền giấy cũ */
     /* Thêm texture giấy (tùy chọn) */
     background-image: url('../images/bg_su_menh.svg');

     box-sizing: border-box;
     overflow: hidden
 }

 /* --- Tiêu đề chính "Sứ mệnh" --- */
 .section-title {
     font-size: 32px;
     color: #333;
     /* Bỏ các thuộc tính không cần thiết nữa */
     margin: 0;
     text-align: center;
 }

 /* --- CSS CHO HIỆU ỨNG DÍNH (STICKY) --- */

 .sticky-title-wrapper {
     top: var(--header-height);
     z-index: 10;

 }



 /* Style cho tiêu đề (đã có trong HTML của bạn) */
 .section-title {
     font-size: 32px;
     color: #333;
     margin-bottom: 0;
     /* Bỏ margin dưới để căn chỉnh với align-items-end đẹp hơn */
 }



 .mission-text .sub-title {
     font-size: 24px;
     color: #8C2B2A;
     text-align: start;
     margin-bottom: 20px;
     font-family: 'Times New Roman', serif;
     display: flex;
     align-items: center;
     justify-content: start;
     gap: 15px;
 }

 .text-dess-su-menh {
     color: #000;
     font-family: OpenSans_Condensed-Regular, serif;
 }

 .title-chuyengiatuvan {
     /* Để pseudo-element định vị theo thẻ này */
     position: relative;

     /* --- 1. Typography (Thông số chữ) --- */
     font-family: Arial, sans-serif;
     /* Thay bằng font bạn muốn */
     font-weight: bold;
     /* Chữ trong ảnh trông khá đậm */
     font-size: 24px;
     line-height: 26px;
     letter-spacing: 0.02em;
     /* 2% tương đương 0.02em */
     text-transform: uppercase;
     text-align: center;

     /* --- 2. Gradient Fill (Màu chữ chuyển sắc) --- */
     /* Kỹ thuật: tạo nền gradient rồi cắt theo hình dạng chữ */
     background: linear-gradient(to right, #FFFFFF, #FFF1BC, #F3D68D);
     -webkit-background-clip: text;
     /* Cho trình duyệt Safari/Chrome */
     background-clip: text;
     color: transparent;
     /* Làm màu chữ trong suốt để lộ nền gradient */
 }

 /* --- 3. Shadows (Tạo hiệu ứng bóng) --- */
 /* 
  Sử dụng pseudo-element '::after' để tạo một lớp nằm sau chữ chính.
  Lớp này sẽ chứa TẤT CẢ các hiệu ứng bóng để kiểm soát thứ tự xếp chồng.
*/
 .title-chuyengiatuvan::after {
     content: attr(data-text);
     /* Lấy nội dung từ thuộc tính data-text */

     /* Đặt lớp này nằm chính xác bên dưới lớp chữ chính */
     position: absolute;
     left: 0;
     top: 0;
     z-index: -1;
     /* QUAN TRỌNG: Đẩy lớp này ra phía sau */

     /* Làm cho chữ của lớp này trong suốt, chỉ giữ lại hiệu ứng bóng */
     color: transparent;

     /* Áp dụng tất cả các lớp shadow từ Figma tại đây */
     text-shadow:
         /* Lớp Inner shadow (trên cùng) */
         0px 0px 2.3px #C19113,

         /* Lớp Drop shadow (dưới cùng) */
         /* Figma có 2 lớp drop shadow giống hệt, trong CSS chỉ cần 1 là đủ */
         0px 4px 4px rgba(0, 0, 0, 0.25);
 }

 .deco-icon {
     height: 18px;
     /* Kích thước icon hoa văn */
 }




 /* ========================================================= */
 /*  CSS CHO TITLE NẰM ĐÈ LÊN NỘI DUNG (ABSOLUTE)
/* ========================================================= */

 /* 1. Thiết lập cho section cha */


 /* 2. Thiết lập cho khối tiêu đề */
 /* .sticky-title-wrapper {
     position: absolute;
     top: 40px;
     left: 0;
     right: 0;
     justify-content: center;
     z-index: 10;
 } */



 .section-title {
     margin: 0;
 }


 .h1-chuyen-gia {
     font-family: 'Roboto_Extra-Bold', sans-serif;
     font-weight: 400;
     font-weight: bold;
     /* color: #F3CD6E;
     text-transform: uppercase;
     text-shadow:
         2px 3px 0px #000000; */
     text-transform: uppercase;
     text-align: center;
     background-image: linear-gradient(to right, #f5d36e, #FEEBA3, #ffe06b);
     background-clip: text;
     color: transparent;
     /* -webkit-text-stroke: 0.5px rgb(186, 19, 15); */
     text-align: center;
     letter-spacing: 0;
     opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.5s; /* trễ 0.5s */
 }




 .gioi-thieu-section {

     background-image: url(../images/bg_chuyen_gia_tu_van.jpg);

     background-repeat: no-repeat;

     background-size: cover;

     background-position: center;

     /* padding-top: 150px; */

     align-items: normal;
     /* === THÊM DÒNG NÀY ĐỂ SỬA LỖI === */

     overflow: hidden;
     /* Hoặc overflow-x: hidden; */

 }

 .dichvudetail-section {
     background-image: url(../images/dichvu-detail.svg);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     /* padding-top: 150px; */
     align-items: normal;
     /* === THÊM DÒNG NÀY ĐỂ SỬA LỖI === */
     overflow: hidden;
     /* Hoặc overflow-x: hidden; */
 }

 .about-upleft-image {
     position: relative;
     bottom: 0;
     left: 0;
 }

 .about-upright-image {
     position: relative;
     bottom: 0;
     right: 0;
 }

 .decorative-line {
     /* --- 1. ĐỊNH VỊ --- */
     position: absolute;
     /* Định vị tuyệt đối so với thẻ cha có position: relative */
     top: 0;
     /* Đặt ở sát mép trên cùng của section */
     left: 50%;
     /* Đặt điểm bắt đầu bên trái ở giữa section */
     transform: translateX(-50%);
     /* Dịch chuyển sang trái 50% chiều rộng của chính nó để căn giữa hoàn hảo */
     z-index: 10;
     /* Đảm bảo nó nổi lên trên các phần tử nền khác */

     /* --- 2. TẠO HÌNH DÁNG (từ yêu cầu trước) --- */
     width: 1px;
     /* Chiều rộng của đường kẻ */
     height: 80px;
     /* Chiều cao của đường kẻ */
     background-color: #888;
     /* Màu của đường kẻ */
     padding-bottom: 20px;
     /* --- THÊM VÀO --- */
     /* Đặt điểm xoay ở chính giữa và trên cùng */
     transform-origin: top center;
     /* Áp dụng animation */
     animation: swing 1s ease-in-out infinite alternate;

 }

 /* --- THÊM VÀO --- */
 /* Định nghĩa animation "swing" */
 @keyframes swing {
     from {
         /* Bắt đầu nghiêng sang trái (-10 độ) */
         /* Giữ lại translateX để phần tử không bị lệch khỏi tâm */
         transform: translateX(-50%) rotate(-5deg);
     }

     to {
         /* Kết thúc nghiêng sang phải (10 độ) */
         transform: translateX(-50%) rotate(5deg);
     }
 }

 /* Dùng ::after để tạo hình tròn ở cuối đường kẻ */
 .decorative-line::after {
     content: '';
     position: absolute;

     /* Vị trí của hình tròn */
     top: 100%;
     left: 50%;
     /* Dịch chuyển lên trên một chút để đầu đường kẻ chạm vào giữa vòng tròn */
     transform: translate(-50%, -50%);

     /* === THAY ĐỔI CHÍNH Ở ĐÂY === */

     /* Kích thước của vòng tròn ngoài cùng (màu trắng) */
     width: 24px;
     height: 24px;

     /* Màu nền trắng cho vòng tròn ngoài */
     background-color: #860002;

     /* Viền đỏ sẫm cho vòng tròn ngoài */
     border: 1px solid #860002;

     border-radius: 50%;
     box-sizing: border-box;

     /* Thêm hiệu ứng bóng đổ để tạo hình tròn nhỏ bên trong */
     /* Đây là một kỹ thuật dùng box-shadow để vẽ một hình khác bên trong */
     box-shadow:
         inset 0 0 0 7px #fafafa;
     /* inset shadow tạo hình tròn bên trong */
 }

 .title-gioi-thieu {
     /* padding-top: 10px; */
     /* font-weight: 700; */
     /* font-family: CormorantGaramond-Bold, serif; */
     font-family: 'Times New Roman', serif;

 }

 .gioi-thieu-content {
     color: #000;
     text-align: center;
     /* font-family: CormorantGaramond-Semi-Bold, serif; */
     font-family: OpenSans_Condensed-Regular, serif;
 }

 .xem-them {
     color: #A1000D;
     text-align: center;
     font-family: 'Times New Roman', serif;


 }

 /* === PHẦN GIẢI PHÁP CHÍNH === */




 /* 4. Tiêu đề "Sứ mệnh" */
 .section-title {
     /* Xóa margin mặc định của h2 để căn chỉnh chính xác */
     margin: 0;

     font-size: 3rem;
     /* Tùy chỉnh kích thước */
     color: #333;
     font-weight: bold;
     position: relative;
     z-index: 2;
     /* Đảm bảo chữ nằm trên đường kẻ */
     display: inline-block;
     /* Cần thiết để transform hoạt động đúng */

     /* 
         * === BƯỚC QUAN TRỌNG NHẤT ===
         * Dịch chuyển H2 LÊN TRÊN một khoảng bằng 50% CHIỀU CAO CỦA CHÍNH NÓ.
         * Điều này làm cho tâm của dòng chữ thẳng hàng với tâm của icon tròn.
        */
     transform: translateY(-50%);
 }




 /* === SECTION SỨ MỆNH === */




 /* === PHẦN CSS ĐÃ SỬA LỖI === */

 /* 1. KHỐI BAO BỌC CHUNG */


 /* 2. ĐƯỜNG KẺ DỌC */
 .decoration-dot {
     /* --- 1. ĐỊNH VỊ --- */
     position: absolute;
     /* Định vị tuyệt đối so với thẻ cha có position: relative */
     top: 0;
     /* Đặt ở sát mép trên cùng của section */
     left: 50%;
     /* Đặt điểm bắt đầu bên trái ở giữa section */
     transform: translateX(-50%);
     /* Dịch chuyển sang trái 50% chiều rộng của chính nó để căn giữa hoàn hảo */
     z-index: 10;
     /* Đảm bảo nó nổi lên trên các phần tử nền khác */

     /* --- 2. TẠO HÌNH DÁNG (từ yêu cầu trước) --- */
     width: 1px;
     /* Chiều rộng của đường kẻ */
     height: 150px;
     /* Chiều cao của đường kẻ */
     background-color: #888;
     /* Màu của đường kẻ */
     padding-bottom: 20px;
     /* --- THÊM VÀO --- */
     /* Đặt điểm xoay ở chính giữa và trên cùng */
     transform-origin: top center;
     /* Áp dụng animation */
     animation: swing 1s ease-in-out infinite alternate;
 }

 /* 3. DẤU CHẤM TRÒN (Tạo từ ::before của đường kẻ) */
 .decoration-dot::before {
     content: '';
     position: absolute;

     /* Vị trí của hình tròn */
     top: 100%;
     left: 50%;
     /* Dịch chuyển lên trên một chút để đầu đường kẻ chạm vào giữa vòng tròn */
     transform: translate(-50%, -50%);

     /* === THAY ĐỔI CHÍNH Ở ĐÂY === */

     /* Kích thước của vòng tròn ngoài cùng (màu trắng) */
     width: 24px;
     height: 24px;

     /* Màu nền trắng cho vòng tròn ngoài */
     background-color: #860002;

     /* Viền đỏ sẫm cho vòng tròn ngoài */
     border: 1px solid #860002;

     border-radius: 50%;
     box-sizing: border-box;

     /* Thêm hiệu ứng bóng đổ để tạo hình tròn nhỏ bên trong */
     /* Đây là một kỹ thuật dùng box-shadow để vẽ một hình khác bên trong */
     box-shadow:
         inset 0 0 0 7px #fafafa;
     /* inset shadow tạo hình tròn bên trong */
 }

 /* 4. CHỮ "SỨ MỆNH" */
 .section-title {
     /* Định vị tuyệt đối bên trong .title-wrapper */
     position: absolute;

     /* 
     * Đặt nó ở cùng độ cao với dấu chấm tròn.
     * top = chiều cao của đường kẻ.
    */
     top: 150px;

     /* Bắt đầu từ đường trung tâm */
     left: 50%;

     /* 
     * === MẤU CHỐT CỦA GIẢI PHÁP ===
     * Dịch chuyển nó sang phải một chút (ví dụ 20px) để tạo khoảng cách với dấu chấm.
     * Dịch chuyển nó LÊN TRÊN 50% chiều cao của chính nó để căn giữa theo chiều dọc.
    */
     transform: translate(20px, -50%);

     margin: 0;
     /* Xóa margin mặc định */
     font-size: 2.5rem;
     color: #3a3a3a;
     font-weight: 500;
     font-family: 'Times New Roman', serif;
     white-space: nowrap;
     /* Đảm bảo chữ không bị xuống dòng */
 }

 /* Các style khác cho .mission-content, .card-container... giữ nguyên như cũ */

 .card-container-miss {
     display: flex;
     gap: 20px;
     /* justify-content: center; */
 }

 .card-item-miss {

     height: 190px;

     text-align: center;

     width: 100px;

     background-image: url('../images/tam_tri_tin.svg');

     background-repeat: no-repeat;
     /* QUAN TRỌNG: Không lặp lại ảnh */

     background-size: contain;
     /* QUAN TRỌNG: Che phủ toàn bộ khối */

     background-position: center;
     /* QUAN TRỌNG: Căn ảnh ra giữa */

     display: flex;

     font-family: 'Times New Roman', serif;

     justify-content: center;
     font-style: italic;
     align-items: center;

 }

 .card-highlight {
     background-image: url('../images/tam_tri_tin_color.svg');
     color: white;
     cursor: pointer;
 }

 .section-3 {
     background-image: url('../images/Quy_Trinh_Bg.png');
     background-repeat: no-repeat;
     /* QUAN TRỌNG: Không lặp lại ảnh */
     background-size: cover;
     /* QUAN TRỌNG: Che phủ toàn bộ khối */
     background-position: center;
     /* QUAN TRỌNG: Căn ảnh ra giữa */
     align-items: normal;
     overflow: hidden;
 }

 .title-quytrinh {
     font-family: 'Times New Roman', serif;
     line-height: normal;
 }

 /* === SECTION CÁC BƯỚC === */
 /* .steps-section {
    padding: 80px 0;
    background-image: url('path/to/your/background-mountain.jpg');
    background-size: cover;
    background-position: center;
    position: relative; 
} */

 /* === SLIDER === */
 /* .steps-slider .slick-list {
    padding: 0 50px !important;
} */

 /* === TỪNG SLIDE ITEM === */
 .step-item {
     /* Quan trọng: Tạo khoảng cách giữa các slide */
     padding: 0 15px;
 }

 .step-content {
     /* Ảnh nền khung vàng cho mỗi slide */
     background-image: url('../images/khung_cac_buoc.svg');
     /* ĐƯỜNG DẪN ĐẾN FILE KHUNG VÀNG */
     background-size: 100% 100%;
     /* Kéo dãn khung để lấp đầy */
     background-repeat: no-repeat;

     /* Đặt chiều cao hoặc tỷ lệ để khung không bị dẹt */
     height: 450px;
     /* Điều chỉnh chiều cao cho phù hợp */

     /* Dùng Flexbox để sắp xếp nội dung bên trong */
     display: flex;
     flex-direction: column;

     /* Padding để nội dung không dính sát viền khung */
     padding: 40px 30px;
     box-sizing: border-box;
 }

 /* Phần chữ bên trong slide */
 .step-text {
     text-align: center;
     color: #333;
     font-family: 'Times New Roman', serif;
 }

 .step-text h3 {
     font-weight: bold;
     font-size: 1.5rem;
     margin-bottom: 10px;
 }

 .step-text p {
     font-size: 1rem;
     line-height: 1.4;
 }

 /* --- CSS CHO SLIDER HIỂN THỊ 3 CÁI --- */

 /* Khung chính bao bọc toàn bộ slider (Giữ nguyên) */
 .my-manual-slider {
     position: relative;
     width: 90%;
     max-width: 1200px;
     margin: 50px auto;
 }

 /* Viewport (Giữ nguyên) */
 .slider-viewport {
     overflow: hidden;
     border-radius: 8px;
 }

 /* Track (Giữ nguyên) */
 .slider-track {
     display: flex;
     transition: transform 0.5s ease-in-out;
 }

 /* Từng slide (THAY ĐỔI LỚN) */
 .slide {
     /* 
     * QUAN TRỌNG: Mỗi slide chiếm 1/3 chiều rộng của viewport.
     * Sử dụng calc() để tính toán chính xác.
    */
     flex: 0 0 calc(100% / 3);

     box-sizing: border-box;
     /* Thêm padding để tạo khoảng cách giữa các slide */
     padding: 0 10px;
 }

 /* Nội dung bên trong slide (Giữ nguyên) */
 .slide-content {
     background-image: url(../images/khung_cac_buoc.svg);

     background-repeat: no-repeat;

     background-size: cover;

     background-position: center;

     /* padding-top: 150px; */

     align-items: normal;
     /* === THÊM DÒNG NÀY ĐỂ SỬA LỖI === */

     overflow: hidden;

     background-color: #fcf9f3;
     border: 2px solid #e0d9c8;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 2rem;
     color: #333;
     border-radius: 8px;
 }

 /* Nút điều hướng (Giữ nguyên) */
 .slider-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background-color: unset;
     color: white;
     border: none;
     /* padding: 10px 15px; */
     font-size: 24px;
     cursor: pointer;
     z-index: 10;
     border-radius: 50%;
     /* width: 50px;
    height: 50px; */
 }

 .prev-btn {
     left: -25px;
 }

 .next-btn {
     right: -25px;
 }

 .slider-btn:disabled {
     cursor: not-allowed;
     opacity: 0.3;
 }

 .content-quytrinhkhach {
     font-size: 18px;
     height: 84px;
     line-height: 24px;
     font-family: OpenSans_Condensed-Regular, serif;
 }

 .title-quytrinhkhach {
     font-size: 36px;
     font-family: 'Times New Roman', serif;
 }







 /* --- Section chính --- */
 .commitment-section {
     background: #6a0303;
     /* Màu đỏ sẫm như trong hình */
     color: #f0e6e6;
     /* Màu chữ trắng ngà */
     padding: 80px 0;
     width: 100%;
     position: relative;
     /* Để định vị các họa tiết trang trí */
     overflow: hidden;
     /* Ẩn các phần họa tiết thừa ra ngoài */
 }


 /* --- Header của Section --- */
 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 70px;
 }

 .tagline {
     /* font-family: CormorantGaramond-Italic, serif; */
     font-family: 'Times New Roman', serif;
     font-style: italic;
     /* Font chữ có chân cho tagline */
     font-size: 30px;
     font-weight: 500;
 }

 .main-heading-wrapper {
     position: relative;

     /* Bật Flexbox để xếp các item con (vòng tròn, chữ) theo hàng ngang */
     display: flex;

     /* Căn các item vào giữa theo chiều dọc */
     align-items: center;

     /* Đẩy toàn bộ group sang bên phải */
     justify-content: flex-end;

     /* Tạo khoảng cách 15px giữa các item (vòng tròn và chữ) */
     gap: 15px;

     /* Giữ lại padding bên phải để tạo không gian với mép màn hình */
     padding-right: 60px;
 }

 .gthiu-main-heading-wrapper {
     position: relative;

     /* Bật Flexbox để xếp các item con (vòng tròn, chữ) theo hàng ngang */
     display: flex;

     /* Căn các item vào giữa theo chiều dọc */
     align-items: center;

     /* Đẩy toàn bộ group sang bên phải */
     justify-content: flex-start;

     /* Tạo khoảng cách 15px giữa các item (vòng tròn và chữ) */
     gap: 15px;

     /* Giữ lại padding bên phải để tạo không gian với mép màn hình */
     padding-right: 60px;
 }

 /* --- MỚI: CSS cho đường kẻ và chấm tròn trang trí --- */
 .heading-decorator {
     position: absolute;
     position: relative;
     width: 24px;
     height: 24px;
     border: 1px solid rgba(255, 255, 255, 0.7);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;

     /* Thu nhỏ lại để vừa với dòng chữ */
     flex-shrink: 0;
     /*    Điểm xoay theo chiều dọc là -500px (500px phía trên phần tử này) */
     transform-origin: center -150px;

     /* 2. Áp dụng animation */
     animation: pendulum-swing 5s ease-in-out infinite alternate;

 }

 /* Tạo chấm tròn bên trong */
 .heading-decorator::after {
     content: '';
     display: block;
     width: 10px;
     height: 10px;
     background-color: white;
     border-radius: 50%;

 }

 /* Tạo đường kẻ dọc phía trên */
 .heading-decorator::before {
     content: '';
     position: absolute;
     bottom: 100%;
     /* Bắt đầu từ mép trên của vòng tròn */
     left: 50%;
     transform: translateX(-50%);
     width: 1px;
     height: 150px;
     /* <-- THAY ĐỔI DÒNG NÀY: Tăng chiều cao lên rất nhiều */
     background: linear-gradient(to top,
             rgba(255, 255, 255, 0.6),
             rgba(255, 255, 255, 0.2));
 }

 /* 3. Định nghĩa animation "pendulum-swing" */
 @keyframes pendulum-swing {
     from {
         /* Vì dây treo rất dài (500px) nên ta chỉ cần một góc xoay nhỏ */
         transform: rotate(-3deg);
     }

     to {
         transform: rotate(3deg);
     }
 }

 .main-heading {
     font-family: 'Times New Roman', serif;
     font-size: 56px;
     font-weight: 700;
 }

 .flower-icon {
     position: absolute;
     top: 50px;
     /* Điều chỉnh lại vị trí top */
     right: 0;
     width: 40px;
     height: 40px;
     color: #d4af37;
     opacity: 0.8;
 }



 /* --- Từng item trong lưới --- */
 .commitment-item {
     text-align: center;
     position: relative;
 }

 .item-icon-placeholder {
     width: 150px;
     height: 150px;

     /* background-color: #d9d9d9; */
     /* border: 10px solid white; */
     border-radius: 50%;
     margin: 0 auto 25px auto;
     background-repeat: no-repeat;
     /* QUAN TRỌNG: Không lặp lại ảnh */
     background-size: cover;
     /* QUAN TRỌNG: Che phủ toàn bộ khối */
     background-position: center;
     /* QUAN TRỌNG: Căn ảnh ra giữa */
     overflow: hidden;

     position: relative;
 }

 .camketicon1 {
     background-image: url('../images/camket1.jpg');
 }

 .camketicon2 {
     background-image: url('../images/camket2.jpg');
 }

 .camketicon3 {
     background-image: url('../images/camket3.jpg');
 }

 .item-number {
     /* Bật position:relative để làm mỏ neo cho đường kẻ ::after */
     position: relative;

     /* Kích thước và hình dạng */
     width: 45px;
     height: 45px;
     border-radius: 50%;

     /* Kiểu đường viền mảnh, màu trắng mờ giống trong ảnh */
     border: 1.5px solid rgba(255, 255, 255, 0.5);

     /* Căn giữa số bên trong vòng tròn */
     display: flex;
     justify-content: center;
     align-items: center;

     /* Căn giữa vòng tròn trong cột và tạo khoảng trống LỚN ở dưới
       để chứa cả đường kẻ và khoảng cách đến tiêu đề */
     margin: 0 auto 25px auto;

     /* Kiểu chữ cho số */
     font-size: 20px;
     font-weight: 300;
     /* Làm số mảnh hơn một chút */
     color: rgba(255, 255, 255);
 }

 .item-number::after {
     content: '';
     /* Bắt buộc phải có để pseudo-element hiển thị */

     /* Định vị tuyệt đối so với .item-number */
     position: absolute;
     top: 100%;
     /* Bắt đầu ngay dưới mép của vòng tròn */
     left: 50%;
     transform: translateX(-50%);
     /* Căn giữa đường kẻ một cách hoàn hảo */

     /* Kích thước của đường kẻ */
     width: 1px;
     margin-top: 9px;
     height: 18px;
     /* Bạn có thể điều chỉnh chiều dài này */

     /* Màu của đường kẻ */
     background-color: rgba(255, 255, 255, 0.5);
 }

 .item-title {
     font-family: CormorantGaramond-Italic, serif;
     font-size: 22px;
     font-weight: 700;
     line-height: 1.4;
     margin-bottom: 15px;
 }

 .item-description {
     font-size: 16px;
     line-height: 26px;
     max-width: 350px;
     margin: 0 auto;
     font-family: OpenSans_Condensed-Regular, serif;
 }

 /* --- Họa tiết trang trí --- */
 .commitment-section img[class^="deco-"] {
     position: absolute;
     opacity: 0.4;
     pointer-events: none;
     /* Để không click vào được */
 }


 .item-title-camket {
     font-family: 'Times New Roman', serif;
     /* font-family: OpenSans_Condensed-Bold, serif; */
     color: #FFFFFF;
 }






 :root {
     --card-gap: 30px;
     /* Định nghĩa khoảng trống giữa các card */
 }


 /* --- Section chính --- */
 .testimonial-section {
     width: 100%;
     /* Nền giấy với họa tiết nhỏ */
     background-image: url('../images/reviews_kh.jpg');
     background-repeat: no-repeat;
     /* QUAN TRỌNG: Không lặp lại ảnh */
     background-size: cover;
     /* QUAN TRỌNG: Che phủ toàn bộ khối */
     background-position: center;
     /* QUAN TRỌNG: Căn ảnh ra giữa */
     overflow: hidden;

     position: relative;
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
 }

 /* --- Tiêu đề Section --- */
 .section-title-phanhoi {
     text-align: center;
     margin-bottom: 60px;
     margin-top: 15px;
     position: relative;
 }

 .section-title-phanhoi h2 {
     font-family: 'Times New Roman', serif;
     font-size: 36px;
     color: #333;
     /* font-weight: 700; */
 }

 .title-decorator {
     position: absolute;
     top: -30px;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 1px;
     background-color: #b9936c;
 }

 .title-decorator::after {
     content: '';
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background-color: #fff;
     border: 2px solid #a42a2a;
 }

 /* --- Slider --- */
 .slider-container {
     position: relative;
 }

 .slider-viewport {
     width: 100%;
     overflow: hidden;
 }

 .slider-track-phanhoi {
     display: flex;
     gap: var(--card-gap);
     transition: transform 0.5s ease-in-out;
 }

 /* --- Card Phản hồi --- */
 .testimonial-card {
     padding: 30px 25px;
     background-color: #fff;
     border-radius: 12px;
     border: 2px solid #d3b895;

     /* ----- 3. BÓNG ĐỔ ----- */
     /* Một chút bóng đổ nhẹ nhàng để card nổi bật */
     box-shadow: 0 5px 13px rgb(185 158 88 / 86%);
     position: relative;
 }

 /* Họa tiết góc trên card */
 .testimonial-card::before {
     content: '';
     position: absolute;
     width: 30px;
     height: 30px;
     background-image: url("../images/topphanhoi.svg");
     background-size: contain;
     opacity: 0.7;
 }

 .testimonial-card::after {
     content: '';
     position: absolute;
     width: 30px;
     height: 30px;
     background-image: url("../images/bottomphanhoi.svg");
     background-size: contain;
     opacity: 0.7;
 }

 .testimonial-card::before {
     top: 10px;
     right: 10px;
 }

 .testimonial-card::after {
     bottom: 10px;
     right: 10px;
 }

 .card-header {
     display: flex;
     align-items: start;
     margin-bottom: 20px;
 }

 .avatar {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     object-fit: cover;
     margin-right: 12px;
     border: 2px solid #eee;
     flex-shrink: 0;
 }

 .author-info h3 {
     font-size: 20px;
     font-weight: 700;
     color: #333;
     margin: 0;
 }

 .author-info p {
     font-size: 16px;
     color: #5f5e5e;
     margin: 4px 0 0 0;
 }

 .testimonial-text {
     /* 1. Bắt buộc: Ẩn đi phần văn bản bị thừa */
     padding-top: 20px;
     overflow: hidden;

     /* 2. Bắt buộc: Kích hoạt chế độ layout đặc biệt của WebKit 
       (dù không còn là chuẩn, nhưng vẫn là cách duy nhất để line-clamp hoạt động) */
     display: -webkit-box;

     /* 3. Quan trọng nhất: Đặt số dòng tối đa muốn hiển thị */
     -webkit-line-clamp: 6;

     /* 4. Bắt buộc: Sắp xếp nội dung theo chiều dọc */
     -webkit-box-orient: vertical;

     /* ----- KẾT THÚC CODE GIỚI HẠN DÒNG ----- */

     /* Giữ lại các thuộc tính style cũ của bạn */
     font-size: 18px;
     line-height: 28px;
     color: #555;
 }

 /* --- Nút điều hướng --- */
 .slider-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     background-color: #fff;
     border: 2px solid #e0c5a3;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: all 0.2s ease;
     color: #b9936c;
 }

 .slider-btn:hover {
     background-color: #f7f3ed;
     transform: translateY(-50%) scale(1.1);
 }

 /* ===== BẮT ĐẦU PHẦN RESPONSIVE ===== */

 /* Mobile (Mặc định, dưới 768px) - 1 card */
 .testimonial-card {
     flex: 0 0 100%;
 }

 .testimonial-section {
     border: none;
     padding: 60px 10px;
 }

 .slider-btn {
     width: 45px;
     height: 45px;
 }

 #prev-btn2 {
     left: -5px;
 }

 #next-btn2 {
     right: -5px;
 }

 /* Tablet (Từ 768px trở lên) - 2 card */
 @media (min-width: 768px) {
     .testimonial-card {
         flex: 0 0 calc((100% - var(--card-gap)) / 2);
     }
 }

 /* Desktop (Từ 992px trở lên) - 3 card */
 @media (min-width: 992px) {
     .testimonial-card {
         flex: 0 0 calc((100% - var(--card-gap) * 2) / 3);
     }

     .testimonial-section {

         padding: 80px 40px;
     }

     #prev-btn2 {
         left: -70px;
     }

     #next-btn2 {
         right: -70px;
     }
 }

 .slider-track.grabbing,
 .slider-track-phanhoi.grabbing {
     cursor: grabbing;
     cursor: -webkit-grabbing;
     user-select: none;
     /* Ngăn bôi đen văn bản khi kéo */
 }





 /* Giao diện liên hệ */
 .contact-section {
     display: flex;
     align-items: center;
     justify-content: center;
     background-image: url('../images/bgggg.svg');
     background-repeat: no-repeat;
     /* QUAN TRỌNG: Không lặp lại ảnh */
     background-size: cover;
     /* QUAN TRỌNG: Che phủ toàn bộ khối */
     background-position: center;
     /* QUAN TRỌNG: Căn ảnh ra giữa */
     overflow: hidden;
     padding: 100px 15px;
     position: relative;
 }

 /* --- Hộp Liên hệ chính & Khung Trang trí --- */
 .contact-box {
     border-radius: 4px;
     background-color: #ffffff7d;
     padding: 50px;
     position: relative;
     border: 3px solid #B99E58;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 /* Kỹ thuật dùng span để vẽ các góc trang trí */
 .corner-deco {
     position: absolute;
     width: 40px;
     height: 40px;

 }

 .corner-top-left {
     top: 15px;
     left: 15px;

     border-top-left-radius: 8px;
 }

 .corner-top-right {
     top: 15px;
     right: 15px;

     border-top-right-radius: 8px;
 }

 .corner-bottom-left {
     bottom: 15px;
     left: 15px;

     border-bottom-left-radius: 8px;
 }

 .corner-bottom-right {
     bottom: 15px;
     right: 15px;

     border-bottom-right-radius: 8px;
 }

 /* --- Cột thông tin bên trái --- */
 .contact-info {
     color: #4a4a4a;
 }

 .contact-title {
     font-family: 'Times New Roman', serif;
     font-size: 42px;
     font-weight: 700;
     color: #8C1C13;
     /* Màu đỏ sẫm */
     margin-bottom: 20px;
 }

 .contact-description,
 .contact-hours {
     font-size: 16px;
     margin-bottom: 20px;
     font-family: OpenSans_Condensed-Regular, serif;
     font-weight: 400;
 }

 .contact-list {
     list-style: none;
     padding: 0;
     margin-top: 24px;
 }

 .contact-list li {
     margin-bottom: 15px;
     font-size: 16px;
     display: flex;
     align-items: center;
 }

 .contact-list li i {
     color: #d3b895;
     margin-right: 15px;
     width: 20px;
     text-align: center;
 }

 /* --- Form bên phải --- */
 .form-control {
     background-color: #fff !important;
     border: 1px solid #B99E58 !important;
     border-radius: 8px !important;
     padding: 12px 15px !important;
     font-size: 15px;
     transition: all 0.3s ease;
 }

 .form-control:focus {
     border-color: #b9936c;
     box-shadow: 0 0 0 3px rgba(211, 184, 149, 0.25);
 }

 .form-control::placeholder {
     color: #aaa;
     font-size: 14px;
 }

 textarea.form-control {
     resize: none;
 }

 /* Nút Submit */
 .btn-submit {
     background: linear-gradient(to top, #8C1C13, #a42a2a);
     color: #fff;
     border: 1px solid #d3b895;
     border-radius: 8px;
     padding: 12px 40px;
     font-weight: 700;
     font-size: 16px;
     letter-spacing: 1px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 10px rgba(140, 28, 19, 0.3);
 }

 .btn-submit:hover {
     color: #fff;
     transform: translateY(-2px);
     box-shadow: 0 6px 15px rgba(140, 28, 19, 0.4);
 }

 /* --- Họa tiết trang trí bên ngoài --- */
 .deco-left,
 .deco-right {
     position: absolute;
     opacity: 0.8;
     z-index: -1;
 }

 .deco-left {
     left: 10%;
     top: 50%;
     transform: translateY(-50%);
     /* width: 80px; */
 }

 .deco-right {
     right: 10%;
     bottom: 50%;
     transform: translateY(50%);
     /* width: 80px; */
 }

 .contact-list li {
     font-weight: 600;
     font-family: OpenSans_Condensed-Regular, serif;
 }

 .input-contact {
     border: 1px solid #B99E58;
 }

 .deco-hoatietbottomleft,
 .deco-hoatietbottomright {
     position: absolute;
     opacity: 0.8;
     z-index: 0;

 }

 footer {
     background: #730009;
     color: #f0e6e6;
     /* Màu chữ trắng ngà */
     padding: 60px 0;
     font-size: 15px;
 }



 .footer-col {
     margin-bottom: 30px;
     /* Tạo khoảng cách giữa các cột trên mobile */
 }

 /* Cột 1: Logo và Giới thiệu */
 .footer-logo img {
     max-width: 80px;
     margin-bottom: 20px;
 }

 .footer-about {

     margin-bottom: 20px;
     font-size: 28px;
     font-family: CormorantGaramond-Italic, serif;
 }

 .footer-about a {
     color: #f5c542;
     /* Màu vàng gold cho link */
     text-decoration: underline;
     font-weight: 500;
 }

 .footer-about a:hover {
     color: #fff;
 }

 .footer-contact-info {
     margin-bottom: 8px;
     font-size: 20px;
 }

 /* Cột 2 & 3: Tiêu đề và link */
 .footer-title {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 25px;
     color: #fff;
     font-family: OpenSans_Condensed-Bold, serif;
 }

 .footer-links {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-links li {
     margin-bottom: 12px;
 }

 .footer-links a {
     color: #f0e6e6;
     text-decoration: none;
     font-size: 20px;
     font-family: OpenSans_Condensed-Regular, serif;

     transition: all 0.2s ease;
 }

 .footer-links a:hover {
     color: #fff;
     opacity: 1;
     padding-left: 5px;
     /* Hiệu ứng hover nhẹ */
 }

 /* Cột 4: Mạng xã hội */
 .social-icons {
     display: flex;
     gap: 15px;
     /* Khoảng cách giữa các icon */
 }

 .social-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 8px;
     color: #fff;
     font-size: 18px;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .social-icon:hover {
     transform: translateY(-3px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 /* Màu riêng cho từng icon */
 .social-icon.facebook {
     background-color: #1877F2;
 }

 .social-icon.youtube {
     background-color: #FF0000;
 }

 .social-icon.zalo {
     background-color: #0068FF;
 }

 /* Responsive: Trên màn hình nhỏ (mobile), căn giữa cột cuối */
 @media (max-width: 767px) {
     .footer-col:last-child {
         text-align: center;
     }

     .social-icons {
         justify-content: center;
     }
 }


 /* --- MENU MOBILE --- */


 /* --- 1. Header của menu --- */
 .mobile-nav-header {
     display: flex;
     justify-content: space-between;
     align-items: center;

     flex-shrink: 0;
     /* Không co lại */
 }

 .mobile-nav-logo {
     display: flex;
     align-items: center;
     text-decoration: none;
     color: #8C1C13;
     /* Màu đỏ sẫm */
     font-weight: 700;
 }

 .mobile-nav-logo img {
     width: 40px;
     height: 40px;
     /* margin-right: 10px; */
 }

 /* Nút đóng [X] */
 .mobile-nav-close {
     background-color: #8C1C13;
     /* Nền đỏ sẫm */
     color: #fff;
     border: none;
     width: 35px;
     height: 35px;
     border-radius: 8px;
     font-size: 18px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* --- 2. Phần thân menu (các link) --- */
 .mobile-nav-main {
     margin-top: 30px;
     /* XÓA flex-grow: 1; ĐỂ margin-top: auto ở footer hoạt động đúng */
     overflow-y: auto;
     /* Tự động có scroll nếu nội dung quá dài */
 }

 .mobile-nav-main ul {
     list-style: none;
     padding: 0;
     margin: 0;
     background-color: #8C1C13;
     border-radius: 12px;
     overflow: hidden;
     /* Để bo góc có tác dụng */
 }

 .mobile-nav-main ul li a {
     display: block;
     padding: 15px 20px;
     color: #fff;
     text-decoration: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     font-size: 16px;
     transition: background-color 0.2s ease;
     font-family: OpenSans_Condensed-Bold, serif;
 }

 .mobile-nav-main ul li:last-child a {
     border-bottom: none;
     /* Bỏ đường kẻ của link cuối cùng */
 }

 .mobile-nav-main ul li a:hover,
 .mobile-nav-main ul li a.active {
     background-color: #a42a2a;
     /* Màu đỏ đậm hơn khi hover hoặc active */
 }

 /* --- 3. Footer của menu (các nút chức năng) --- */
 .mobile-nav-footer {

     flex-shrink: 0;
     /* Không co lại */

     /* border-top: 1px solid #e0d9cf; */

     /* Đây là chìa khóa để đẩy footer xuống dưới cùng */

     margin-top: auto;
 }

 .mobile-nav-button {
     display: flex !important;
     justify-content: center;
     align-items: center;
     background-image: url('../images/btn_ho_tro.svg');
     background-repeat: no-repeat;
     /* QUAN TRỌNG: Không lặp lại ảnh */
     background-size: cover;
     /* QUAN TRỌNG: Che phủ toàn bộ khối */
     background-position: center;
     /* QUAN TRỌNG: Căn ảnh ra giữa */
     overflow: hidden;

 }



 .mobile-nav-button:hover {
     background-color: #a0805c;
     /* Màu đậm hơn khi hover */
     color: #fff;
 }

 .mobile-nav-button i {
     margin-right: 10px;
 }

 .btn-movbie1,
 .btn-movbie2 {
     margin-bottom: 20px;
 }

 .gradient-text {
     /* ----- BƯỚC 1: TẠO NỀN GRADIENT ----- */
     /* Đây là màu chuyển sắc từ trên xuống dưới.
       Bạn có thể thay đổi các mã màu này theo ý muốn. */
     background: linear-gradient(to bottom, #860002, #A80003, #BC0005);

     /* ----- BƯỚC 2: CẮT NỀN THEO HÌNH DẠNG CỦA CHỮ ----- */
     /* Thuộc tính này sẽ "cắt" background theo hình dạng của text */
     -webkit-background-clip: text;
     background-clip: text;
     font-size: 18px;
     /* -----f BƯỚC 3: LÀM CHO MÀU CHỮ TRONG SUỐT ----- */
     /* Làm cho màu chữ gốc trở nên trong suốt để lộ ra lớp nền gradient bên dưới */
     color: transparent;
     font-family: Anton-Regular, serif;
     /* ----- CÁC THUỘC TÍNH PHỤ ĐỂ CHỮ ĐẸP HƠN (TÙY CHỌN) ----- */
     font-weight: 700;
     /* Độ đậm */
     text-align: center;
     /* Căn giữa */
 }

 .hoi-dap {
     display: flex !important;
     justify-content: center;
     align-items: center;
     background-image: url('../images/hoi_dap.svg');
     background-repeat: no-repeat;
     /* QUAN TRỌNG: Không lặp lại ảnh */
     background-size: cover;
     /* QUAN TRỌNG: Che phủ toàn bộ khối */
     background-position: center;
     /* QUAN TRỌNG: Căn ảnh ra giữa */
     overflow: hidden;

 }

 .section-title-hoi-dap {
     font-family: 'Times New Roman', serif;
 }

 .box-content-hoi-dap {
     display: flex;
     justify-content: center;
     padding-top: 52px;
 }

 .content-faqs {
     background: linear-gradient(306deg, #FFFCD9, #FAF9EC, #F1EFD7, #F4F0C0);
     padding: 24px;
 }

 .accordion-box-hoidap {
     background: linear-gradient(to bottom, #F3E5B7, #FAF2D5, #F6EAC1, #FFFCF0, #F6EAC1);
     border: 1px solid #B99E58;
     border-radius: 12px;
 }

 /* --- CONTAINER CHÍNH CỦA ACCORDION --- */
 /* --- ACCORDION TỐI ƯU HIỆU NĂNG --- */

 .accordion-container {
     width: 100%;
     padding: 15px;
 }

 .accordion-item {
     margin-bottom: 15px;
 }

 .accordion-item:last-child {
     margin-bottom: 0;
 }

 .accordion-header {
     width: 100%;
     background: #FFFFFF;
     border: 1px solid #B99E58;
     border-radius: 12px;
     padding: 16px 25px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-align: left;
     font-size: 16px;
     font-weight: 500;
     color: #4A4A4A;
     cursor: pointer;
     box-shadow: 0 4px 15px rgba(211, 184, 149, 0.25);
     transition: all 0.3s ease;
     /* Thêm z-index để header luôn nằm trên content */
     position: relative;
     z-index: 2;
     font-family: OpenSans_Condensed-Regular, serif;
 }

 .is-open .accordion-header {
     border-radius: 12px 12px 0 0;
     box-shadow: none;
     border-bottom: none;
     background: linear-gradient(to right, #FFFCD9, #FAF9EC, #F1EFD7, #F4F0C0);
 }

 .accordion-header:hover {
     border-color: #d3b895;
     box-shadow: 0 6px 20px rgba(211, 184, 149, 0.3);
 }

 /* --- PHẦN NỘI DUNG (THAY ĐỔI LỚN) --- */

 .accordion-content {
     /* Sử dụng Grid để tạo hiệu ứng đóng/mở */
     display: grid;
     /* Mặc định: nội dung có 0 hàng -> ẩn */
     grid-template-rows: 0fr;
     transition: grid-template-rows 0.4s ease-out;
     /* Transition mượt mà hơn */

     /* Đảm bảo content nằm dưới header */
     position: relative;
     z-index: 1;
     margin-top: -10px;
     /* Kéo content lên để che viền dưới của header */
 }

 .accordion-body-wrapper {
     /* Wrapper này rất quan trọng để grid hoạt động đúng */
     overflow: hidden;
 }

 .accordion-body-box {
     padding: 20px 25px;
     padding-top: 25px;
     /* Thêm padding-top để không dính vào header */
     background: linear-gradient(to right, #FFFCD9, #FAF9EC, #F1EFD7, #F4F0C0);
     border: 1px solid #B99E58;
     border-top: none;
     /* Bỏ viền trên vì header đã có viền dưới */
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
     color: #555;
     line-height: 1.7;
     font-size: 15px;
 }

 /* --- TRẠNG THÁI MỞ --- */
 .accordion-item.is-open .accordion-content {
     /* Khi mở, đổi thành 1 hàng với chiều cao tự động */
     grid-template-rows: 1fr;
 }

 /* Icon (giữ nguyên nhưng có một số điều chỉnh nhỏ) */
 .accordion-icon {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
     margin-left: 15px;
     background-image: url("../images/snap-icon.svg");
     background-repeat: no-repeat;
     background-position: center;
     transition: transform 0.3s ease;
 }

 .accordion-item.is-open .accordion-icon {
     transform: rotate(-180deg);
 }



 /* CSS cho cột ảnh bên trái để xếp dọc */
 .image-column-hoidap {
     display: flex;
     /* Kích hoạt Flexbox để sắp xếp */
     flex-direction: column;
     /* Yêu cầu các phần tử con xếp theo cột (trên-dưới) */
     gap: 24px;
     position: relative;
     /* Tạo khoảng trống 24px giữa hai ảnh */
 }

 /* Style phụ cho ảnh thêm đẹp (tùy chọn) */
 .box-cah-hoi-dap {
     background: #B99E58;
     height: 140px;
     position: relative;
 }

 .trangtrihoidapright {
     position: absolute;
     right: 0;
     bottom: 0;
 }

 .trangtrihoidapleft {
     position: absolute;
     left: 0;
     bottom: 0;
 }

 .trangtri2thanh1 {
     position: absolute;
 }

 .trangtri2thanh2 {
     position: absolute;
 }

 .trangtri2hoidap {
     position: absolute;
 }

 .box-news {
     border: 2px solid transparent;
     background-image:
         linear-gradient(white, white),
         linear-gradient(to bottom, #FADFB4, #C0983D, #C79E3F, #DAAF47, #DEB249);
     background-origin: border-box;
     background-clip: content-box, border-box;
     box-shadow: 0 4px 4px 0 #B99E5866;
     border-radius: 12px;
     position: relative;
 }

 .top-news-box {
     position: absolute;
     top: 10px;
     right: 10px;
 }

 .bottom-news-box {
     position: absolute;
     bottom: 10px;
     right: 10px;
 }

 .news-images {
     width: 100%;
     /* hoặc 1 kích thước cụ thể như 300px */
     max-width: 400px;
     /* tùy theo bạn muốn giới hạn */
     height: auto;
     /* hoặc 1 chiều cao cố định nếu muốn khung cố định */
     overflow: hidden;
     /* ẩn phần ảnh tràn ra */
     position: relative;
     border-radius: 12px;
     /* Thêm vào đây */
 }

 .news-images img {
     width: 100%;
     height: auto;
     object-fit: contain;
     /* hoặc "cover", tùy mục đích */
     display: block;

 }

 .box-news:hover .img-news-fluid {
     transform: scale(1.05);
     /* phóng to 5% khi hover */

 }

 .box-news:hover .title-noibat {
     color: #A1000D;
 }

 .box-news:hover {
     cursor: pointer;
 }

 .box-title-noibat {
     /* height: 64px; */
     padding-top: 20px;
 }

 .title-noibat {
     font-family: 'Times New Roman', serif;
     font-size: 26px;
     font-weight: 600;
     line-height: 32px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }

 .des-noibat {
     font-family: OpenSans_Condensed-Regular, serif;
     font-size: 16px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     font-weight: 400;
     line-height: 28px;
 }

 .box-xemthem {
     display: flex;
     gap: 10px;
 }

 .a-xemthem {
     font-family: OpenSans_Condensed-Regular, serif;
     color: #A1000D;
     font-weight: 600;
 }

 .experts-section {
     /* Sử dụng radial-gradient để tạo hiệu ứng nền tối ở rìa, sáng hơn ở giữa */
     background: linear-gradient(to bottom, #8c1c1c, #4a0303);

 }

 .section-title-main-heading {
     font-family: 'Times New Roman', serif;
     color: #FFFFFF;
     font-size: 56px;
 }

 /* 1. KHUNG NGOÀI */
 .box-gthieuthay-chuyengia {
     /* THAY ĐỔI QUAN TRỌNG NHẤT: Thêm position: relative */
     position: relative;

     /* CÁC THUỘC TÍNH CŨ CỦA BẠN */
     background-image: url('../images/thay_khung_ngoai.svg');
     /* Thay bằng path của bạn */
     background-repeat: no-repeat;
     aspect-ratio: 3 / 4;

     /* CẢI TIẾN: Dùng '100% 100%' thay cho 'cover' để SVG không bị cắt xén */
     background-size: 100% 100%;
 }

 /* 2. KHUNG TRONG VÀ NỘI DUNG */
 .box-trong-chuyengia {
     /* CÁC THUỘC TÍNH CŨ CỦA BẠN ĐÃ ĐÚNG */
     background-image: url('../images/thay_khung_trong.svg');
     /* Thay bằng path của bạn */
     background-repeat: no-repeat;
     background-size: 100% 100%;
     position: absolute;
     top: -30%;
     /* Khoảng cách này tạo ra độ dày của khung ngoài */
     left: 18px;
     right: 18px;
     bottom: 18px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 25px 15px;
     box-sizing: border-box;
     /* Đảm bảo padding không làm thay đổi kích thước */
 }

 /* 4. KHU VỰC CHỨA CHỮ (.contentcontent) */
 .contentcontent {
     position: absolute;
     bottom: 12%;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
     text-align: center;
 }

 .glowing-tag {
     display: inline-block;
     padding: 6px 20px;
     background-color: #4d1a0f;
     border: 1.5px solid #d4af37;
     color: #f3e5ca;
     border-radius: 999px;
     font-family: 'Times New Roman', serif;
     font-size: 16px;
     font-style: italic;
     font-weight: 600;
     white-space: nowrap;
     box-shadow: 0 0 12px 2px rgba(255, 220, 150, 0.7), inset 0 0 8px rgba(255, 220, 150, 0.4);
     margin-bottom: 16px;
 }

 /* 5. TÊN CHUYÊN GIA */
 .gradient-text-thaytintuc {
     background: linear-gradient(to right, rgb(255, 221, 121), rgb(255, 227, 122), rgb(254, 235, 163), rgb(243, 205, 110), rgb(255, 227, 122));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     white-space: normal;
     font-size: 32px;
     font-weight: 700;
     font-family: 'Times New Roman', serif;
 }

 .kienthucphongthuy {
     display: flex !important;
     justify-content: center;
     align-items: center;
     background-image: url(../images/kien_thuc_pt.svg);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     overflow: hidden;
     position: relative;
 }

 .titlekienthucphongthuy {
     text-align: center;
     font-family: 'Times New Roman', serif;
 }

 .boxkienthucphongthuy {
     background: #FFFFFF;
     box-shadow: #1877F2;
 }





 /* --- Khối chính bao bọc toàn bộ nội dung --- */
 .feng-shui-section {
     background-color: #ffffff;
     border-radius: 16px;
     padding: 32px;
     margin-top: 2rem;
     margin-bottom: 2rem;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
 }

 /* --- Kiểu cho các Thẻ/Tag (Phong thủy nhà ở, ...) --- */
 .article-tag {
     /* 1. Các thuộc tính định dạng cơ bản của bạn */
     background: linear-gradient(to right, #FFFCD9, #FAF9EC, #F1EFD7, #F4F0C0);
     color: #000000B2;
     padding: 4px;
     max-width: 180px;
     border-radius: 6px;
     text-align: center;
     font-size: 13px;
     font-weight: 600;
     font-family: OpenSans_Condensed-Bold, serif;
     margin-bottom: 8px;

     /* --- PHẦN CODE ĐỂ CẮT CHỮ --- */

     /* Bắt buộc phải là block hoặc inline-block để giới hạn chiều rộng hoạt động */
     display: block;

     /* 2. Giới hạn văn bản chỉ trên 1 dòng */
     -webkit-line-clamp: 1;

     /* Các thuộc tính đi kèm bắt buộc */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }


 .title-kienthuch4 {
     font-size: 24px;
     /* Cắt dòng và hiển thị 1 dòng duy nhất */
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     /* Thêm dòng này nếu muốn có dấu "..." */
     white-space: normal;
     max-width: 100%;
     /* hoặc giới hạn chiều rộng cụ thể */
 }

 .title-kienthuc {
     font-family: 'Times New Roman', serif;
 }

 .title-kienthuch3 {
     font-size: 32px;
 }

 /* --- Kiểu cho link "Xem thêm" --- */
 .read-more-link {
     color: #8c4b4a;
     /* Màu đỏ đất */
     font-weight: 600;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     transition: color 0.3s ease;
 }

 .read-more-link:hover {
     color: #6d3a39;
 }

 /* Vòng tròn và mũi tên trong link "Xem thêm" */
 .read-more-link .arrow-icon {
     display: inline-block;
     margin-left: 8px;
     border: 1px solid #e4c8a2;
     /* Màu vàng nhạt */
     border-radius: 50%;
     width: 24px;
     height: 24px;
     line-height: 17px;

     text-align: center;
     font-size: 17px;
     transition: background-color 0.3s ease, border-color 0.3s ease;
 }

 .read-more-link:hover .arrow-icon {
     background-color: #f5efdc;
 }

 /* --- Cột bên trái (Bài viết chính) --- */
 .main-article .article-image {
     width: 100%;
     height: auto;
     border-radius: 12px;
     object-fit: cover;
 }

 .main-article .article-content {
     padding-top: 1.5rem;
 }

 /* --- Cột bên phải (Các bài viết phụ) --- */
 .side-article {
     display: flex;
     gap: 1rem;
     /* Khoảng cách giữa ảnh và nội dung */
 }

 /* Thêm khoảng cách giữa các bài viết phụ */
 .side-article:not(:last-child) {
     margin-bottom: 1.75rem;
 }

 .side-article .article-thumb {
     flex-shrink: 0;
     /* Không co lại */
     width: 180px;
     /* height: 80px; */
     border-radius: 8px;
     object-fit: cover;
 }

 /* Đường kẻ ngang ngăn cách */
 .side-article hr {
     border: 0;
     border-top: 1px solid #e4c8a2;
     /* Màu vàng nhạt */
     margin: 1rem 0;
     opacity: 1;
 }

 /* --- Responsive cho mobile --- */
 @media (max-width: 991.98px) {
     .side-articles {
         margin-top: 2.5rem;
     }
 }

 .titledetailtintuc {
     font-family: 'Times New Roman', serif;
     font-size: 42px;
     font-weight: 700;
 }

 .contet-detail-tintuwc {
     font-family: OpenSans_Condensed-Regular, serif;
 }

 .sidebar-datlich {
     border-radius: 16px;
     border: 1px solid #FFFFFF;
     background: #FFFBF5;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
 }

 .form-widget-header {
     text-align: center;
     background: #780507;
     padding-top: 20px;
     padding-bottom: 20px;
     border-radius: 16px 16px 0 0;

 }

 .form-widget-header span {
     font-family: OpenSans-Italic, serif;
     /* Thay bằng font bạn muốn */
     font-weight: bold;
     /* Chữ trong ảnh trông khá đậm */
     font-size: 24px;
     line-height: 24px;
     letter-spacing: 0.02em;
     /* 2% tương đương 0.02em */
     text-transform: uppercase;
     text-align: center;

     /* --- 2. Gradient Fill (Màu chữ chuyển sắc) --- */
     /* Kỹ thuật: tạo nền gradient rồi cắt theo hình dạng chữ */
     background: linear-gradient(to right, #FFFFFF, #FFF1BC, #F3D68D);
     -webkit-background-clip: text;
     /* Cho trình duyệt Safari/Chrome */
     background-clip: text;
     color: transparent;
 }

 .form-widget-body {
     padding: 33px;
 }

 .cauhoithuonggap-news {
     font-family: 'Times New Roman', serif;
     font-size: 28px;
     margin-bottom: 20px;
 }

 .contet-detail-tintuwc {
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
 }

 .backdichvuphongthuy {
     /* THAY ĐỔI QUAN TRỌNG NHẤT: Thêm position: relative */
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     /* CÁC THUỘC TÍNH CŨ CỦA BẠN */
     background-image: url('../images/card_dich_vu.svg');
     /* Thay bằng path của bạn */
     background-repeat: no-repeat;
     aspect-ratio: 3 / 4;
     flex-direction: column;
     /* CẢI TIẾN: Dùng '100% 100%' thay cho 'cover' để SVG không bị cắt xén */
     background-size: 100% 100%;
 }

 .title-dichvuphongthuy {
     margin-top: 16px;
     margin-bottom: 4px;
     font-size: 26px;
     font-family: 'Times New Roman', serif;
     height: 63px;
     background: linear-gradient(to right, #FFFFFF, #FFF1BC, #F3D68D);
     -webkit-background-clip: text;
     /* Cho trình duyệt Safari/Chrome */
     background-clip: text;
     color: transparent;
     line-height: normal;
     display: block;

     /* 2. Giới hạn văn bản chỉ trên 1 dòng */
     -webkit-line-clamp: 2;

     /* Các thuộc tính đi kèm bắt buộc */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .content-dichvuphongthuy2 {
     font-family: OpenSans_Condensed-Regular, serif;
     font-size: 18px;
     color: #FFFFFF;
     line-height: 30px;
     height: 95px;
     display: block;

     /* 2. Giới hạn văn bản chỉ trên 1 dòng */
     -webkit-line-clamp: 3;

     /* Các thuộc tính đi kèm bắt buộc */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .box-xemthem-dichvuphongthuy {
     text-align: center;
     font-family: OpenSans_Condensed-Regular, serif;
     font-size: 20px;
     color: white;
 }

 .container-fixx {
     margin: 0 auto;
 }

 .form-control:focus {
     border: 1px solid #E0BC54 !important;
     box-shadow: unset !important;
 }


 /* --- Bố cục chính --- */

 /* Thẻ cha chứa toàn bộ */
 .article-layout {

     padding: 1rem;
     margin-bottom: 2rem;

     /* 
      CỰC KỲ QUAN TRỌNG:
      Thuộc tính này để "dọn dẹp" float, đảm bảo thẻ cha bao bọc đúng chiều cao
      của cả ảnh và text. Đây là cách hiện đại thay cho "clearfix hack".
    */
     display: flow-root;
 }

 /* Định dạng cho hình ảnh */
 .article-image {
     /* Đẩy ảnh sang trái, cho phép text bao bọc bên phải và bên dưới */
     float: right;
     max-width: 100%;
     /* Kích thước của ảnh */
     /* width: 150px; */
     height: auto;

     /* Tạo khoảng cách giữa ảnh và text */
     /* margin-right: 1.5rem; */
     /* Khoảng cách bên phải */
     margin-bottom: 0;
     /* Khoảng cách bên dưới */

     /* Thêm bo góc cho đẹp (tùy chọn) */
     border-radius: 8px;
     margin-left: 1.0rem;
 }

 /* Khối chứa văn bản (không cần style phức tạp) */
 .article-text h3 {
     margin-top: 0;
     /* Xóa khoảng cách mặc định của tiêu đề */
 }

 .article-text p {
     margin: 0;
     /* line-height: 1.6; */
     /* Tăng chiều cao dòng cho dễ đọc */
     text-align: justify;
     /* Căn đều 2 bên (tùy chọn) */
 }


 /* #toast-container {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 9999;
    
 }
 .toaasst{
 background: linear-gradient(to bottom, #EFE5B8, #F2E7C3, #F4D297);
     border-radius: 15px;
     padding: 2px;
    animation: slideInFromRight 0.5s ease-out forwards;
 }

 .toast-show {
     background-color: #5A6234;
     color: white;
     padding: 12px 16px;
     border-radius: 6px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     font-size: 15px;
     min-width: 245px;
     max-width: 275px;
     opacity: 1;
     display: flex;
     align-items: center;
     gap: 12px;
     font-family: OpenSans_Condensed-Bold, serif;
     background-color: #5A6234;
     border-radius: 13px;
     padding: 20px;
 }

 .icon-toast {
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #35F676;
     width: 32px;
     height: 32px;
 } */



 /* ---- CSS cho Lỗi Form ---- */
 .error-text {
     color: #dc3545;
     font-size: 0.875em;
     margin-top: 5px;
     min-height: 1.0em;
 }

 .input-contact.is-invalid {
     border-color: #dc3545 !important;
 }

 /* ---- CSS cho Toast Notification ---- */
 #toast-container {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .toaasst {
     background: linear-gradient(to bottom, #EFE5B8, #F2E7C3, #F4D297);
     border-radius: 15px;
     padding: 2px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     animation: slideInFromRight 0.5s ease-out forwards;
 }

 .toaasst.toast-hiding {
     animation: slideOutToRight 0.5s ease-in forwards;
 }

 .toast-show {
     color: white;
     border-radius: 13px;
     padding: 16px 20px;
     font-size: 15px;
     min-width: 250px;
     max-width: 280px;
     font-family: OpenSans_Condensed-Bold, serif;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .toast-show.toast-success {
     background-color: #5A6234;
 }

 .toast-show.toast-error {
     background-color: #5A6234;
 }

 .icon-toast {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
 }

 .icon-toast i {
     font-size: 20px;
 }

 /* ---- Keyframes cho Animations ---- */
 @keyframes slideInFromRight {
     from {
         opacity: 0;
         transform: translateX(100%);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes slideOutToRight {
     from {
         opacity: 1;
         transform: translateX(0);
     }

     to {
         opacity: 0;
         transform: translateX(100%);
     }
 }

 .icon-scess {
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #35F676;
     width: 32px;
     height: 32px;
 }

 .icon-error {
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #e73131;
     width: 32px;
     height: 32px;
 }

 /* ---- Keyframes cho Animation ---- */

 @keyframes slideInFromRight {

     /* Trạng thái bắt đầu: Ẩn, và lệch 100% sang phải */
     from {
         opacity: 0;
         transform: translateX(100%);
     }

     /* Trạng thái kết thúc: Hiện rõ, và ở vị trí ban đầu */
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 /* Animation biến mất */
 @keyframes fadeOut {
     0% {
         opacity: 1;
         transform: translateY(0);
     }

     80% {
         opacity: 1;
         transform: translateY(0);
     }

     100% {
         opacity: 0;
         transform: translateY(-10px);
     }
 }

 .is-open .accordion-header span {
     font-weight: 900;
     color: #730009;
 }

 .schedule {
     width: 60px;
 }

 /* ---- Lớp phủ cho popup ---- */
 .schedule-popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.6);
     display: none;
     /* Ẩn mặc định */
     justify-content: center;
     align-items: center;
     z-index: 1000;
     font-family: Arial, sans-serif;
 }

 /* ---- Nội dung chính của popup ---- */
 .schedule-popup-content {
     background-color: #FFFBF5;
     border-radius: 12px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
     width: 90%;
     max-width: 500px;
     overflow: hidden;
     /* Đảm bảo header bo tròn theo */
     animation: fadeIn 0.3s ease-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* ---- Header của popup ---- */
 .schedule-popup-header {
     background-color: #780507;
     color: var(--header-text-color);
     padding: 15px 25px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-family: 'Cormorant Garamond', serif;
 }

 .schedule-popup-header h2 {
     margin: 0;
     font-size: 24px;
     font-weight: 700;
     letter-spacing: 1px;
     /* Kỹ thuật: tạo nền gradient rồi cắt theo hình dạng chữ */
     background: linear-gradient(to right, #FFFFFF, #FFF1BC, #F3D68D);
     -webkit-background-clip: text;
     /* Cho trình duyệt Safari/Chrome */
     background-clip: text;
     color: transparent;
 }

 .schedule-popup-header .close-button {
     background: none;
     border: none;
     color: var(--header-text-color);
     font-size: 30px;
     font-weight: bold;
     cursor: pointer;
     line-height: 1;
     opacity: 0.8;
 }

 .schedule-popup-header .close-button:hover {
     opacity: 1;
 }


 /* ---- Thân popup (chứa form) ---- */
 .schedule-popup-body {
     padding: 20px 20px;
 }

 /* .schedule-popup-body .form-group {
     margin-bottom: 15px;
 } */



 .schedule-popup-body input::placeholder,
 .schedule-popup-body textarea::placeholder {
     color: #888;
 }

 .schedule-popup-body textarea {
     min-height: 120px;
     resize: vertical;
 }


 /* ---- Nút Đặt Lịch ---- */
 .schedule-popup-body .submit-button {
     width: 100%;
     padding: 12px 20px;
     background-color: var(--button-bg-color);
     color: var(--button-text-color);
     border: 1px solid var(--button-border-color);
     border-radius: 8px;
     font-size: 18px;
     font-weight: 700;
     font-family: 'Cormorant Garamond', serif;
     letter-spacing: 1.5px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     margin-top: 10px;
     box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
 }

 .schedule-popup-body .submit-button:hover {
     background-color: #a31919;
     /* Màu đỏ đậm hơn khi hover */
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 /* Hiệu ứng rung */
 @keyframes shake-in-place {
     0% {
         transform: rotate(0deg);
     }

     25% {
         transform: rotate(25deg);
     }

     50% {
         transform: rotate(-25deg);
     }

     75% {
         transform: rotate(25deg);
     }

     100% {
         transform: rotate(0deg);
     }
 }

 .schedule-button img {
     animation: shake-in-place 1.5s infinite;
     width: 20px;
     height: auto;
     transition: transform 0.3s ease;
 }

 /* Tùy chỉnh text */
 .schedule-text {
     /* font-size: 14px;
     animation: fadeInUp 1s ease;
     background: #842022;
     border: 2px solid #e0ba4d; */
     border-radius: 10px;
 }



 .schedule-button {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     cursor: pointer;
 }

 /* Hiệu ứng cho từng icon con */
 .child-buttons .contact-btn {
     transition: transform 0.2s ease;
 }

 .contact-btn {
     cursor: pointer;
 }

 .child-buttons .contact-btn:hover {
     transform: scale(1.1);
 }

 .sticky-buttons {
     position: fixed;
     right: 20px;
     bottom: 20px;
     display: flex;
     flex-direction: column;
     gap: 15px;
     align-items: flex-end;
 }

 /* Phone button */
 .schedule-button {
     border: none;
     background: transparent;
     cursor: pointer;
     padding: 0;
 }

 /* Messenger container */
 .floating-contact {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* Nền bo tròn (ẩn mặc định) */
 .floating-contact::before {
     content: "";
     position: absolute;
     bottom: -12px;
     left: 50%;
     transform: translateX(-50%);
     width: 68px;
     background: #d6b98b;
     border-radius: 50px;
     opacity: 0;
     transition: opacity 0.3s ease;
     z-index: 999;
 }

 /* Hover thì hiện nền */
 .floating-contact:hover::before {
     top: -125px;
     /* cao vừa đủ bao trùm các icon con */
     opacity: 1;
 }

 /* Child buttons ẩn mặc định */
 .child-buttons {
     position: absolute;
     bottom: 60px;
     /* ngay trên icon Messenger */
     right: 50%;
     transform: translateX(50%);
     display: flex;
     flex-direction: column;
     gap: 10px;
     align-items: center;
     z-index: 2000;
     /* cao hơn icon phone để đè lên */
     pointer-events: none;
     /* để không cản trở khi chưa hover */
 }

 /* Hover hiện các nút con */
 .floating-contact:hover .child-buttons {
     pointer-events: auto;
 }

 /* Hiệu ứng icon con */
 .child-buttons a {
     transform: translateY(10px);
     opacity: 0;
     transition: all 0.3s ease;
 }

 .floating-contact:hover .child-buttons a {
     transform: translateY(0);
     opacity: 1;
 }

 /* Optional: hiệu ứng hiện lên */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .schedule-popup-header h2 {
     text-align: center;
     width: 100%;
     font-weight: bold;
     margin: 0 auto;
 }

 /* ---- Pagination Custom Styling ---- */

 /* Giới hạn style chỉ áp dụng cho pagination bên trong .p-nav */

 /* Bỏ phần đệm mặc định của ul.pagination */
 .p-nav .pagination {
     padding-left: 0;
 }

 /* Thêm khoảng cách giữa các nút */
 .p-nav .page-item {
     margin: 0 4px;
 }

 /* Style chung cho tất cả các nút (page-link) */
 .p-nav .page-link {
     border-radius: 8px !important;
     /* Bo góc tròn như trong ảnh */
     border: 1px solid #e9ecef;
     /* Viền rất nhạt */
     background-color: #ffffff;
     /* Nền trắng */
     color: #495057;
     /* Màu chữ xanh đậm/xám */
     font-weight: 600;
     /* Chữ hơi đậm */
     min-width: 42px;
     /* Đảm bảo các nút có chiều rộng tối thiểu */
     height: 42px;
     /* Chiều cao cố định */
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     /* Đổ bóng nhẹ */
     transition: all 0.2s ease-in-out;
     /* Hiệu ứng chuyển động mượt mà */
 }

 /* Bỏ viền xanh khi focus vào nút */
 .p-nav .page-link:focus {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 /* Style khi di chuột vào nút (hover) */
 .p-nav .page-link:hover {
     background-color: #f8f9fa;
     /* Nền hơi xám khi di chuột */
     border-color: #dee2e6;
 }

 /* --- Style cho trang đang được chọn (ACTIVE) --- */
 /* Đây là phần quan trọng nhất để giống ảnh */
 .p-nav .page-item.active .page-link {
     background-color: #a91118;
     /* Màu đỏ đậm từ ảnh */
     border-color: #a91118;
     /* Viền cùng màu nền */
     color: #ffffff;
     /* Chữ màu trắng */
     font-weight: 700;
     /* Chữ đậm hơn */
 }

 .p-nav .page-item.active .page-link:hover {
     background-color: #9d0a0f;
     /* Màu đỏ đậm hơn một chút khi hover */
     border-color: #9d0a0f;
 }


 /* --- Style cho nút bị vô hiệu hóa (DISABLED) --- */
 /* Áp dụng cho "..." và các mũi tên khi ở trang đầu/cuối */
 .p-nav .page-item.disabled .page-link {
     background-color: #ffffff;
     /* Vẫn là nền trắng */
     color: #6c757d;
     /* Màu chữ xám hơn một chút */
     pointer-events: none;
     /* Không cho phép click */
     box-shadow: none;
     /* Bỏ bóng cho nút bị vô hiệu hóa */
 }

 /* ---- CSS cho Nút bấm tròn với viền Gradient ---- */


 .gradient-button-wrapper {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: linear-gradient(to bottom, #FADFB4, #DDC07F);
     padding: 3px;
     border: none;
     cursor: pointer;
     transition: transform 0.2s ease-out;
 }

 .button-content {
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, #FADFB4, #DDC07F);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow:
         inset 2px 4px 7.3px -2px #CA9315,
         inset 0 -2px 2px rgba(255, 255, 255, 0.4);
 }

 .button-icon {
     width: 50%;
     height: auto;
 }

 .gradient-button-wrapper:hover {
     transform: scale(1.05);
 }

 /* ---- CSS cho Hộp văn bản hình mũi tên ---- */

 .arrow-box {
     /* Quan trọng: Cần 'position: relative' để định vị hình tam giác */
     position: relative;

     /* Style cơ bản cho hộp văn bản */
     background-color: #a91c23;
     /* Màu đỏ đậm như nút bấm trước */
     color: white;
     font-family: OpenSans_Condensed-Bold, serif;
     padding: 0.5rem 2rem 0.5rem 1rem;
     /* Padding: top, right, bottom, left */
     font-size: 16px;
     /* Đảm bảo hộp văn bản nằm trên các phần tử khác nếu cần */
     z-index: 1;
 }

 /* Phần "ma thuật" - tạo ra hình tam giác cho mũi tên */
 .arrow-box::after {
     content: '';
     /* Bắt buộc phải có */
     position: absolute;

     /* Định vị tam giác ngay bên phải của hộp văn bản */
     left: 100%;
     top: 50%;
     transform: translateY(-50%);
     /* Căn giữa tam giác theo chiều dọc */

     /* Kích thước của tam giác được quyết định bởi border */
     width: 0;
     height: 0;
     border-style: solid;

     /*
     * Tính toán kích thước tam giác cho phù hợp với chiều cao của hộp.
     * Với padding-top/bottom là 0.5rem và font-size ~1rem, chiều cao hộp khoảng 38-40px.
     * Chúng ta sẽ tạo tam giác có chiều cao tương ứng (19px + 19px = 38px).
    */
     border-width: 10px 0 10px 10px;

     /* Chỉ tô màu cho cạnh bên trái, các cạnh khác trong suốt */
     border-color: transparent transparent transparent #a91c23;
 }

 .text-description-contact {
     text-align: center;
     font-family: OpenSans_Condensed-Bold, serif;
     font-size: 16px;
     font-style: italic;
 }




 .select-wrapper {
     position: relative;
 }

 /* Tùy chỉnh select box chung */
 .select-wrapper select.form-control {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     padding-right: 2.5rem;
     /* 40px */
     /* Thêm hiệu ứng chuyển đổi mượt mà */
     transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }

 /* 
     * MẸO CSS: Dùng :invalid để tạo style cho placeholder.
     * Khi select có 'required' và option được chọn có value="",
     * select sẽ ở trạng thái :invalid.
    */
 .select-wrapper select.form-control:invalid {
     color: #6c757d;
     /* Màu placeholder của Bootstrap */
 }

 /* Đảm bảo các option có màu chữ bình thường */
 .select-wrapper select.form-control option {
     color: #212529;
     /* Màu chữ đen mặc định */
 }

 /* Ẩn option placeholder khỏi danh sách khi xổ xuống */
 .select-wrapper select.form-control option[value=""][disabled] {
     display: none;
 }

 /* Icon SVG bằng pseudo-element ::after */
 .select-wrapper::after {
     content: '';
     position: absolute;
     top: 50%;
     right: 1rem;
     /* 16px */
     transform: translateY(-50%);
     width: 1.25em;
     /* 20px */
     height: 1.25em;
     /* 20px */
     background-image: url("../images/snap-icon.svg");
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     pointer-events: none;
 }

 /* Animation cho hiệu ứng rung */
 @keyframes shake {

     10%,
     90% {
         transform: translate3d(-1px, 0, 0);
     }

     20%,
     80% {
         transform: translate3d(2px, 0, 0);
     }

     30%,
     50%,
     70% {
         transform: translate3d(-4px, 0, 0);
     }

     40%,
     60% {
         transform: translate3d(4px, 0, 0);
     }
 }

 /* Class để áp dụng animation vào popup content */
 /* Đảm bảo bạn có một class cho nội dung bên trong popup, ví dụ: .schedule-popup-content */
 .schedule-popup-content.shake {
     animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
     transform: translate3d(0, 0, 0);
     backface-visibility: hidden;
     perspective: 1000px;
 }

 /* Container chính */
 .select-wrapper {
     position: relative;
     font-family: Arial, sans-serif;
 }

 .select-wrapper select {
     display: none;
 }

 /* Box hiển thị giá trị đã chọn */
 .select-selected {
     background-color: #fff;
     color: #999;
     /* Màu placeholder mặc định */
     padding: 12px 16px;
     border: 1px solid #B99E58;
     border-radius: 5px;
     cursor: pointer;
     user-select: none;
     position: relative;
 }

 /* Đổi màu chữ khi đã chọn */
 .select-selected.has-value {
     color: #333;
 }

 .select-selected.select-arrow-active::after {
     transform: translateY(-50%) rotate(180deg);
 }

 .select-selected.select-arrow-active {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }

 .select-items {
     position: absolute;
     background-color: white;
     top: 100%;
     left: 0;
     right: 0;
     z-index: 99;
     border: 1px solid #ddd;
     border-top: none;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     max-height: 200px;
     overflow-y: auto;
 }

 .select-hide {
     display: none;
 }

 .select-items div {
     /* color: #333; */
     padding: 12px 16px;
     cursor: pointer;
     transition: background-color 0.2s ease, color 0.2s ease;
 }

 .select-items div:hover {
     background-color: #f1f1f1;
 }

 .same-as-selected {
     background-color: rgba(0, 123, 255, 0.1);
 }

 .bk-formtuvan {
     background-image: url(../images/Quy_Trinh_Bg.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     align-items: normal;
     overflow: hidden;
 }

 .trxx-card {
     padding: 30px 25px;
     background-color: #fff;
     border-radius: 12px;
     border: 2px solid #d3b895;
     box-shadow: 0 5px 13px rgb(185 158 88 / 86%);
     position: relative;
 }

 .trxx2-card {
     padding: 30px 25px;
     background-color: #fff;
     border-radius: 12px;
     border: 2px solid #d3b895;
     box-shadow: 0 5px 13px rgb(185 158 88 / 86%);
     position: relative;
 }

 .trxx-card::after {
     content: '';
     position: absolute;
     width: 30px;
     height: 30px;
     background-image: url(../images/bottomphanhoi.svg);
     background-size: contain;
     opacity: 0.7;
     bottom: 10px;
     right: 10px;
 }

 .trxx-card::before {
     top: 10px;
     right: 10px;
     content: '';
     position: absolute;
     width: 30px;
     height: 30px;
     background-image: url(../images/topphanhoi.svg);
     background-size: contain;
     opacity: 0.7;
 }

 .trxx2-card::after {
     content: '';
     position: absolute;
     width: 30px;
     height: 30px;
     background-image: url(../images/bottomphanhoi.svg);
     background-size: contain;
     opacity: 0.7;
     top: 10px;
     left: 10px;
     transform: rotate(180deg);
 }

 .trxx2-card::before {
     bottom: 10px;
     left: 10px;
     content: '';
     position: absolute;
     width: 30px;
     height: 30px;
     background-image: url(../images/topphanhoi.svg);
     background-size: contain;
     opacity: 0.7;
     transform: rotate(180deg);
 }


 /* .contact-btn[data-tooltip] {
            position: relative;
        }

        .contact-btn[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            right: 70px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, .8);
            color: #fff;
            padding: 3px 8px;
            border-radius: 5px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 1;
            visibility: visible;
            z-index: 1003;
        } */

 .schedule-text {
     display: block;
     animation: fadeOut 1s ease-in-out 5s forwards;
 }

 @keyframes fadeOut {
     to {
         display: none;

         visibility: hidden;
     }
 }

 .header-hotline {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 6px 12px;
     position: relative;
     /* Cần thiết cho kỹ thuật viền gradient */

     /* --- Viền & Bo góc (Borders & Radius) --- */
     border-radius: 20px;
     /* 1. Tạo một viền trong suốt để "đặt chỗ" cho gradient */
     border: 1px solid transparent;

     /* 2. Tạo 2 lớp nền: 
           - Lớp trong cùng (bên trái) là màu nền chính của bạn.
           - Lớp ngoài (bên phải) là gradient cho viền.
        */
     background:
         linear-gradient(#730009, #730009),
         linear-gradient(to bottom, #EFE5B8, #F2E7C3, #F4D297);

     /* 3. Quy định cách hiển thị 2 lớp nền:
           - Lớp nền chính chỉ hiển thị bên trong padding (padding-box).
           - Lớp gradient hiển thị ra tới tận viền (border-box).
        */
     background-clip: padding-box, border-box;
     background-origin: padding-box, border-box;
     /* Đảm bảo tương thích tốt hơn */

     /* --- Đổ bóng (Shadows) --- */
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
 }

 /* --- CSS cho liên kết bên trong (Giữ nguyên) --- */
 .header-hotline .hotline-link {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #ffffff;
     font-weight: bold;
     font-size: 1.1rem;
     text-decoration: none;
     position: relative;
     /* Đảm bảo nội dung nổi lên trên nền */
     z-index: 1;
 }

 /* Ẩn ở màn hình dưới 1024px (Giữ nguyên) */
 @media (max-width: 1200px) {

     .header-hotline,
     .title-logo {
         display: none !important;
     }
 }


 .commitment-tu-van {
     background: linear-gradient(310deg, #F3E5B7, #FAF2D5, #F6EAC1, #FFF8DE, #F6EAC1);
     border: 1px solid #F3EAD8;
     border-radius: 12px;
     padding: 1rem 1.5rem;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
     margin-top: 20px
 }

 .commitment-list {
     list-style-type: none;
     /* Xóa dấu chấm đầu dòng của list */
     padding: 0;
     margin: 0;
 }

 .commitment-item-tuvan {
     display: flex;
     align-items: center;
     /* Căn giữa icon và chữ theo chiều dọc */
     padding: 1rem 0;
     border-bottom: 1px solid #EADDCB;
     /* Đường kẻ ngăn cách */
 }

 /* Xóa đường kẻ của item cuối cùng */
 .commitment-item-tuvan:last-child {
     border-bottom: none;
     padding-bottom: 0.5rem;
     /* Giảm padding dưới cho cân đối */
 }

 .commitment-item-tuvan:first-child {
     padding-top: 0.5rem;
     /* Giảm padding trên cho cân đối */
 }

 .commitment-icon {

     margin-right: 15px;
     /* Khoảng cách giữa icon và chữ */
     flex-shrink: 0;
     /* Đảm bảo icon không bị co lại */
 }

 .commitment-text {
     color: #A47C48;
     font-size: 17px;
     /* Cỡ chữ 17px */
     line-height: 25px;
     /* Giãn dòng cho dễ đọc */
     font-family: OpenSans_Condensed-Bold, serif;
 }



 /* BẮT ĐẦU: CSS cho Popup */

 .popup-overlay-lienhe {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.6);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1050;
     /* Đảm bảo popup nổi lên trên */
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0s 0.3s;
 }

 .popup-overlay-lienhe.show {
     opacity: 1;
     visibility: visible;
     transition: opacity 0.3s ease;
 }

 .popup-content-lienhe {

     border-radius: 12px;
     text-align: center;
     width: 100%;
     max-width: 700px;
     position: relative;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     transform: scale(0.9);
     transition: transform 0.3s ease;
     border-radius: 16px;
 }

 .popup-overlay-lienhe.show .popup-content-lienhe {
     transform: scale(1);
 }

 .popup-content-lienhe h2 {
     font-size: 24px;
     color: #28a745;
     margin-top: 15px;
     margin-bottom: 10px;
 }

 .popup-content-lienhe p {

     margin-bottom: 25px;
     line-height: 1.5;
 }

 .close-popup {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 30px;
     color: #aaa;
     cursor: pointer;
     line-height: 1;
 }

 .close-popup:hover {
     color: #333;
 }

 .popup-content-lienhe .btn {
     padding: 10px 30px;
     border-radius: 5px;
     font-weight: bold;
     cursor: pointer;
     border: none;
     font-size: 16px;
 }

 .popup-content-lienhe .btn-success {
     background-color: #28a745;
     color: white;
 }

 /* CSS cho icon checkmark động */
 .popup-icon {
     margin: 0 auto 10px;
 }

 .checkmark {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: block;
     stroke-width: 3;
     stroke: #fff;
     stroke-miterlimit: 10;
     margin: 0 auto;
     box-shadow: inset 0px 0px 0px #4caf50;
     animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
 }

 .checkmark-circle {
     stroke-dasharray: 166;
     stroke-dashoffset: 166;
     stroke-width: 3;
     stroke-miterlimit: 10;
     stroke: #4caf50;
     fill: none;
     animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
 }

 .checkmark-check {
     transform-origin: 50% 50%;
     stroke-dasharray: 48;
     stroke-dashoffset: 48;
     animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
 }

 .schedule-popup-conten-success {
     background-color: #FFFBF5;
     */ border-radius: 12px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
     width: 100%;
     max-width: 700px;
     overflow: hidden;
     animation: fadeIn 0.3s ease-out;
     border-radius: 16px;
 }

 .schedule-popup-header-success {

     background-color: #780507;
     color: var(--header-text-color);
     padding: 15px 25px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: 'Cormorant Garamond', serif;


 }

 .schedule-popup-header-success h5 {
     font-family: OpenSans-Italic, serif;
     font-weight: bold;
     font-size: 24px;
     line-height: 32px;
     letter-spacing: 0.02em;
     text-transform: uppercase;
     text-align: center;
     background: linear-gradient(to right, #FFFFFF, #FFF1BC, #F3D68D);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .text-title-success {
     font-family: OpenSans-Italic, serif;
     font-size: 18px;
     color: #000000 !important;
 }

 @keyframes stroke {
     100% {
         stroke-dashoffset: 0;
     }
 }

 @keyframes scale {

     0%,
     100% {
         transform: none;
     }

     50% {
         transform: scale3d(1.1, 1.1, 1);
     }
 }

 @keyframes fill {
     100% {
         box-shadow: inset 0px 0px 0px 40px #4caf50;
     }
 }

 .h3-chuyen-gia {
       font-family: 'Roboto-SemiBold', sans-serif;
     font-weight: 400;

     line-height: 40px;
     letter-spacing: 0.0;
     text-transform: uppercase;
     text-align: center;
     background-image: linear-gradient(to right, #F5E192, #FFEEB5, #F5E192);
     background-clip: text;
     color: transparent;
     opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.5s; /* trễ 0.5s */
     /* -webkit-text-stroke: 0.5px rgb(186, 19, 15); */
 }


 .feature-card {
    position: relative;
    width: 200px; /* Chiều rộng cố định của card */
    height: 245px; /* Chiều cao cố định của card */
    
    /* Sử dụng ảnh khung làm background */
    background-image: url('/assets/images/bx-baner.svg'); /* Cập nhật đường dẫn đến ảnh của bạn */
    background-size: cover; /* Đảm bảo ảnh nền phủ kín thẻ */
    background-repeat: no-repeat;
    background-position: center;

    /* Căn giữa nội dung văn bản bên trong thẻ */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Căn giữa theo chiều dọc */
    text-align: center;
    gap: 20px; /* Khoảng cách giữa nhãn và mô tả */
    box-sizing: border-box; /* Bao gồm padding/border trong kích thước */
    flex-shrink: 0; /* Quan trọng: Ngăn không cho card bị co lại */
}
.feature-label {
    position: relative;
    z-index: 2;
    background-color: transparent;
    color: #FFFFFF;
    font-family: 'Times New Roman', serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 600;
    padding: 8px 18px;
    border: 1px solid #FFD700;
    border-radius: 9999px;
    box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.7);
    white-space: nowrap;
    margin-top: -30px; /* Điều chỉnh vị trí nhãn */
}

.feature-description {
    position: relative;
    z-index: 2;
    /* text-transform: uppercase; */
    text-align: center;
    background-image: linear-gradient(to right, #f5d36e, #FEEBA3, #ffe06b);
    background-clip: text;
    color: transparent;
    font-family: 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 900;
    font-style: italic;
    line-height: 1.5;
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.5); */
    max-width: 75%;
    padding: 0 10px;
}
.btn-hover-default-banner{
    font-family: 'Times New Roman', Times, serif;
    color: #190000;
}
.btun-banner{
    
    font-weight: 900 !important;

}


@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
  }
  .bg-la-so{
        background-image: url(../images/Quy_Trinh_Bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    align-items: normal;
    background-position: center center;
    overflow: hidden;
  }

  .checkbox-wrapper-31:hover .check {
    stroke-dashoffset: 0;
  }

  .checkbox-wrapper-31 {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  .checkbox-wrapper-31 .background {
    fill: #ccc;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s;
  }
  .checkbox-wrapper-31 .stroke {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
    stroke-dashoffset: 100;
    stroke-dasharray: 100;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s;
  }
  .checkbox-wrapper-31 .check {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    stroke-dashoffset: 22;
    stroke-dasharray: 22;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s;
  }
  .checkbox-wrapper-31 input[type=radio] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    -appearance: none;
    -webkit-appearance: none;
  }
  .checkbox-wrapper-31 input[type=radio]:hover {
    cursor: pointer;
  }
  .checkbox-wrapper-31 input[type=radio]:checked + svg .background {
    fill: #B99E58;
  }
  .checkbox-wrapper-31 input[type=radio]:checked + svg .stroke {
    stroke-dashoffset: 0;
  }
  .checkbox-wrapper-31 input[type=radio]:checked + svg .check {
    stroke-dashoffset: 0;
  }