@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//vicdi.vn/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.3.4") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//vicdi.vn/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//vicdi.vn/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//vicdi.vn/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//vicdi.vn/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//vicdi.vn/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//vicdi.vn/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//vicdi.vn/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//vicdi.vn/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Heebo", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #777777;
	--wd-text-font-size: 16px;
	--wd-title-font: "Lexend", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Lexend", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lexend", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Lexend", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lexend", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 15px;
	--wd-brd-radius: 10px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(110,0,0);
	--wd-alternative-color: rgb(130,8,0);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(191,0,0);
	--btn-accented-bgcolor-hover: rgb(216,0,0);
	--btn-transform: capitalize;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(249,249,249);
	background-image: none;
}
 {
	font-family: "Lexend", Arial, Helvetica, sans-serif;
	font-weight: 700;
}
.page .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) .wd-page-content {
	background-color: rgb(249,249,249);
	background-image: none;
}
.single-product .wd-page-content {
	background-color: rgb(249,249,249);
	background-image: none;
}
.woodmart-archive-blog .wd-page-content {
	background-color: rgb(249,249,249);
	background-image: none;
}
.single-post .wd-page-content {
	background-color: rgb(249,249,249);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1314px;
--wd-form-brd-radius: 35px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

@media (min-width: 1314px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: #0a0a0a;
}

/* =========================================================
   CSS TRANG TRÍ THANH PHÂN TRANG (PAGINATION)
   ========================================================= */

.elementor-pagination {
    display: flex; /* Đảm bảo các số được căn chỉnh trên một dòng */
    justify-content: center; /* Căn giữa thanh phân trang */
    align-items: center;
    gap: 5px; /* Khoảng cách giữa các số */
}

/* Định dạng chung cho tất cả các nút (số trang, nút tiến/lùi) */
.elementor-pagination .page-numbers {
    /* Thiết lập hình dạng Vòng tròn */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px; /* Chiều rộng vòng tròn */
    height: 38px; /* Chiều cao vòng tròn (phải bằng chiều rộng) */
    border-radius: 50%; /* Tạo hình tròn */

    /* Định dạng mặc định */
    background-color: transparent;
    border: 1px solid #dddddd; /* Viền mờ bao quanh */
    color: #333333; /* Màu chữ mặc định */
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

/* Định dạng đặc biệt cho nút Prev/Next (nếu bạn muốn chúng là hình tròn) */
.elementor-pagination .prev,
.elementor-pagination .next {
    font-size: 18px; /* Tăng kích thước mũi tên */
}

/* 1. TRẠNG THÁI ACTIVE (Trang hiện tại) */
.elementor-pagination .page-numbers.current {
    background-color: #6E0000; /* Nền màu đỏ yêu cầu */
    color: #ffffff !important; /* Chữ màu trắng */
    border-color: #6E0000; /* Viền cùng màu nền */
    font-weight: 700; /* Làm nổi bật số trang hiện tại */
}

/* 2. TRẠNG THÁI HOVER (Di chuột qua các nút không phải active) */
.elementor-pagination a.page-numbers:hover {
    background-color: #6E0000; /* Nền màu đỏ yêu cầu */
    color: #ffffff; /* Chữ màu trắng */
    border-color: #6E0000; /* Viền cùng màu nền */
    cursor: pointer;
}

/* Xử lý nút Prev/Next khi Active hoặc Hover */
.elementor-pagination a.page-numbers.prev:hover,
.elementor-pagination a.page-numbers.next:hover {
    background-color: #6E0000; 
    color: #ffffff; 
    border-color: #6E0000; 
}
/* =========================================================
   											TRANG DỰ ÁN
   ========================================================= */

/* 1. Thiết lập cho Widget Text Editor (Chủ đầu tư, Địa chỉ, Diện tích, Số tầng) */


.du-an-archive .elementor-widget-text-editor {
    /* Đảm bảo là block và giới hạn chiều rộng để kích hoạt cắt chữ */
    display: block;
    width: 350px; /* <--- ĐIỀU CHỈNH GIÁ TRỊ NÀY (Ví dụ: 150px cho ~20 ký tự) */
    max-width: 100%; /* Đảm bảo không tràn ra ngoài card */

    /* Bắt buộc cho hiệu ứng cắt chữ */
    white-space: nowrap;      /* Ngăn chặn text tự động xuống dòng */
    overflow: hidden;         /* Ẩn phần text tràn ra ngoài */
    text-overflow: ellipsis;  /* Hiển thị dấu '...' cho phần bị cắt */
    
    /* Cần thiết khi dùng Flexbox/Grid */
    min-width: 0; 

    /* *LƯU Ý*: Các định dạng (màu, font, padding) ban đầu của bạn sẽ BỊ MẤT. */
    /* Nếu bạn muốn giữ lại định dạng đó, bạn phải thêm lại chúng vào đây */
    /* Ví dụ:
    color: #333333;
    padding-left: 20px;
    position: relative; 
    */
}

/* 2. Thiết lập cho Tiêu đề Dự án (Heading) */
.du-an-archive .elementor-heading-title {
    /* Đảm bảo là block và giới hạn chiều rộng để kích hoạt cắt chữ */
    display: block;
    width: 350px; /* <--- ĐIỀU CHỈNH GIÁ TRỊ NÀY (Ví dụ: 150px cho ~20 ký tự) */
    max-width: 100%;

    /* Bắt buộc cho hiệu ứng cắt chữ */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Cần thiết khi dùng Flexbox/Grid */
    min-width: 0;
}

















/* Thiết lập chung cho nút Hotline */
.call-to-action-button {
    /* Thiết lập Flexbox để căn chỉnh icon và chữ */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Kiểu dáng nút */
    background-color: #ffffff; /* Màu nền xanh dương nổi bật */
    color: #6E0000; /* Màu chữ trắng */
    text-decoration: none;
    font-size: 18px; /* Kích thước chữ */
    font-weight: 700;
    
    /* Padding (khoảng đệm) để tạo hình dạng bầu dục */
    padding: 10px 25px; 
    border-radius: 50px; /* Bo góc cực cao để tạo hình bầu dục */
    
    /* Hiệu ứng đổ bóng và chuyển động nhẹ */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Hiệu ứng khi di chuột qua */
.call-to-action-button:hover {
    background-color: #bf0000; /* Màu nền đậm hơn khi hover */
		color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px); /* Nhấc nút lên một chút */
}

/* Kiểu dáng cho Icon điện thoại */
.call-to-action-button i {
    font-size: 16px; 
    margin-right: 8px; /* Khoảng cách giữa icon và chữ "Hotline" */
    color: #6E0000; /* Đảm bảo icon có màu trắng */
}

/* Kiểu dáng riêng cho số điện thoại */
.call-to-action-button .phone-number {
    /* Đặt màu đỏ hoặc màu nổi bật khác (nếu cần thay đổi từ màu trắng mặc định) */
    /* Trong thiết kế này, tôi giữ màu trắng để khớp với nền xanh */
    /* Nếu muốn số điện thoại màu đỏ, bạn thay đổi thành: color: #FF0000; */
    
    margin-left: 5px; /* Khoảng cách giữa chữ "Hotline:" và số điện thoại */
    font-weight: 900; /* Làm số điện thoại cực đậm */
}





/* ========================  
   MOBILE STANDALONE SECTION STYLES
   ======================== */
#mobile-video-section {
    /* Ẩn section này trên PC (giả sử PC > 768px) */
    display: none; 
}
@media (max-width: 768px) {
    #mobile-video-section {
        display: block; /* Hiện thị trên Mobile */
        padding: 0 15px 20px 15px;
        background-color: #f7f7f7; /* Nền nhẹ nhàng */
    }

    /* ----------------- 1. VIDEO CHÍNH (Mobile) ----------------- */
    #mobile-main-video-box {
        position: relative;
        padding-bottom: 56.25%; /* Tỷ lệ 16:9 */
        height: 0;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    
    #mobile-main-video-box .img-cover {
        position: absolute;
        width: 100%; height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    /* Iframe & Placeholder Styles */
    #mobile-main-video-box iframe, 
    #mobile-main-video-box #video-placeholder-mobile {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    
    /* Nút Play */
    #mobile-main-video-box #mobile-play-button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        background: rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }
    #mobile-main-video-box .video-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #6E0000;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: transform 0.3s;
    }
    
    /* ----------------- 2. CAROUSEL CUỘN NGANG ----------------- */
    #mobile-video-carousel {
        display: flex;
        overflow-x: scroll;
        padding-top: 15px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        gap: 10px; /* Khoảng cách giữa các item */
    }

    /* Ẩn thanh cuộn trên một số trình duyệt */
    #mobile-video-carousel::-webkit-scrollbar { display: none; }

    .carousel-item {
        flex-shrink: 0; /* Quan trọng: Ngăn item co lại */
        width: 120px; /* Chiều rộng cố định cho mỗi thumbnail */
        cursor: pointer;
        text-align: center;
        padding: 5px;
        border-radius: 6px;
        border: 2px solid transparent;
        transition: all 0.2s;
        background-color: #fff;
    }
    
    .carousel-item.active {
        border-color: #6E0000; /* Đường viền nổi bật khi active */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .carousel-item img {
        width: 100%;
        height: 67.5px; /* Tỷ lệ 16:9 cho ảnh thumbnail (120*9/16) */
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 5px;
    }
    
    .carousel-item .video-title {
        font-size: 12px;
        font-weight: 600;
        color: #333;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 30px; /* 2 dòng */
        line-height: 15px;
    }
}









/* ======================== 
   VIDEO PLAYER & PLAY BUTTON 
   ======================== */
#main-video-box {
    position: relative;
    padding-bottom: 56.25%; /* Tỷ lệ 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Thêm bóng nhẹ */
}
/* CSS MỚI BỔ SUNG */
#main-video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 3;
}

/* Đảm bảo #main-play-button là div, không phải <a> (như trong HTML sửa đổi) */
#main-video-box #main-play-button {
    cursor: pointer;
}
#main-video-box .img-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

#main-video-box .video-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3); /* Lớp phủ tối mờ */
}

#main-video-box .video-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #6E0000; 
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.3s;
    cursor: pointer;
}

#main-video-box .video-btn:hover {
    transform: scale(1.1);
}

/* ======================== 
   VIDEO LIST (ACCORDION STYLES)
   ======================== */
#video-faq-list {
    margin-top: 20px;
}
#video-faq-list .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

#video-faq-list .card:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Kiểu dáng cho Card đang active */
#video-faq-list .card.active {
    border-color: #6E0000; 
    background-color: #fff9f9;
}

#video-faq-list .card-header {
    padding: 0;
}

#video-faq-list .accordion-button {
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    background: none;
    border: none;
}

/* Icon (Sử dụng CSS để bắt chước icon ban đầu) */
.more-btn-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #6E0000;
    color: #6E0000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0; /* Ngăn icon co lại */
    margin-left: 10px;
}

/* Xoay icon khi Active */
.card-video.active .more-btn-icon .icon i {
    transform: rotate(180deg);
}

/* Nội dung Card body (cho hiệu ứng gập/bung) */
#video-faq-list .card-body {
    padding: 0 20px;
    font-size: 14px;
    color: #666;
    display: none; /* JS sẽ xử lý hiển thị */
}
.card-video.active .card-body {
    padding-bottom: 20px;
}

















/* =========================================================
   1. CSS CƠ BẢN CHO KHỐI DU-AN (CARD - KÍCH THƯỚC CỐ ĐỊNH)
   ========================================================= */
.du-an {
    background-color: #F8F8F8;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

    
    /* >>> KÍCH THƯỚC CỐ ĐỊNH: Đặt độ rộng và chiều cao cố định */
    width: auto !important; 
    min-height: 480px !important; /* Chiều cao cố định hoặc tối thiểu */
    height: auto !important; /* Đảm bảo nội dung không bị cắt nếu tràn */

    display: flex !important; 
    flex-direction: column !important; 

}

/* Hiệu ứng khi hover (Giữ nguyên) */
.du-an:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
    text-decoration: none;
}
/* =========================================================
   2. CSS CHO CÁC THÀNH PHẦN BÊN TRONG (Đảm bảo cắt dòng)
   ========================================================= */

/* Điều chỉnh phần nội dung bên dưới ảnh */
.du-an .e-con-inner {
    padding: 15px 20px 20px 20px; 
    flex-grow: 1 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    min-width: 0 !important;
}


/* Tiêu đề dự án (Cắt dòng tuyệt đối) */
.du-an .elementor-element-89f2679 .elementor-heading-title {
    color: #6E0000;
    font-size: 20px;
    font-weight: 700;
    text-align: left; 
    line-height: 1.2;
    margin-bottom: 10px;
    
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    display: block !important; 
    width: 100% !important; 
    min-width: 0 !important; /* QUAN TRỌNG: Kích hoạt overflow/ellipsis */
}
/* Container bao quanh ảnh (Thường là Widget Image của Elementor) */
.du-an .elementor-widget-image {
    /* Đặt chiều cao CỐ ĐỊNH để ảnh có không gian lấp đầy */
    height: 200px; /* Hoặc bất kỳ chiều cao nào bạn muốn (Ví dụ: 300px) */
    width: 100%; /* Chiều rộng lấp đầy card */
    overflow: hidden; /* Cần thiết để ảnh không tràn ra ngoài vùng giới hạn */
}

/* Áp dụng cho chính thẻ <img> */
.du-an .elementor-widget-image img {
    /* Quan trọng: Bắt buộc ảnh lấp đầy toàn bộ khu vực 300x(100% chiều rộng) */
    width: 100%;
    height: 100%; 
    
    /* Cực kỳ quan trọng: Duy trì tỷ lệ khung hình của ảnh 
       và cắt bớt phần thừa nếu cần để lấp đầy không gian. */
    object-fit: cover; 
    
    /* Đảm bảo ảnh là block để width/height hoạt động tốt */
    display: block; 
}
/* =========================================================
   3. CSS CHO TRƯỜNG ACF (Text Editor) - Cắt dòng tuyệt đối
   ========================================================= */

/* 1. Áp dụng cho TẤT CẢ các Text Editor Widget */
.du-an .elementor-widget-text-editor {
    line-height: 1.5 !important;
    font-size: 14px !important;
    color: #333333 !important;
    margin-bottom: 5px !important;
    
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    width: 100% !important; 
    min-width: 0 !important; /* QUAN TRỌNG: Kích hoạt overflow/ellipsis */
    
    position: relative !important;
    padding-left: 20px !important; 
    display: block !important; 
}

/* 2. Ghi đè CSS Flex/Căn giữa chiều dọc mà bạn đã áp dụng */
.du-an .elementor-widget-text-editor .elementor-text-editor {
    display: block !important; 
    align-items: initial !important; 
    margin: 0 !important;
    padding: 0 !important;
    
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* --- CSS cho Icon (Giữ nguyên) --- */
.du-an .elementor-widget-text-editor:before {
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900; 
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #333333;
    font-size: 14px;
}
.du-an .elementor-element-ac75747:before { content: "\f007"; } 
.du-an .elementor-element-e1b17cd:before { content: "\f015"; } 
.du-an .elementor-element-4c54227:before { content: "\f1e5"; } 
.du-an .elementor-element-d1dbf68:before { content: "\f1ad"; } 


/* =========================================================
   4. CSS BỐ CỤC KHÔNG RESPONSIVE (Sử dụng Flexbox để xếp chồng card cố định)
   ========================================================= */

@media (min-width: 1025px) and (max-width: 3000px){
/* Chuyển container chính sang Flexbox để quản lý các item có kích thước cố định */
.elementor-loop-container.elementor-grid:has(.du-an) {
    display: flex !important; /* Thay thế Grid bằng Flex */
    flex-wrap: wrap !important; /* Cho phép các card xuống dòng */
    gap: 20px !important; 
    width: 100% !important; 
    justify-content: center !important; /* Tùy chọn: Căn giữa các card */
    align-items: flex-start !important; /* Quan trọng: Loại bỏ giãn chiều cao, card sẽ theo min-height */
}

/* Các item Loop phải được phép tự động tính toán vị trí */
.elementor-loop-container .e-loop-item:has(.du-an) {
    width: auto !important; 
    flex-grow: 0 !important; 
    flex-shrink: 0 !important; 
}
	.du-an {
        width: 300px !important; 
        min-height: 380px !important;
        margin: 0 !important; 
    }
}

/* Loại bỏ hoàn toàn Media Query vì không cần Responsive Width nữa */
@media (max-width: 1024px) {
    /* Loại bỏ các quy tắc Grid responsive đã cũ */
    .elementor-loop-container.elementor-grid {
        grid-template-columns: unset !important;
    }
}
/* @media (max-width: 767px) - FIX TRIỆT ĐỂ LỖI CUỘN VÀ TRÀN */
@media (max-width: 767px) {
    
    /* Định nghĩa biến */
    :root {
        --mobile-padding: 15px; 
        --card-width-mobile: 85vw; 
        /* Khoảng trống cần thiết để card cuối cùng cuộn vào vị trí CĂN TRÁI (start) 
           Bằng Chiều rộng màn hình - chiều rộng card - padding phải của container */
        --scroll-end-space: calc(100vw - var(--card-width-mobile) - var(--mobile-padding)); 
    }

    /* 1. Container chính: Thiết lập cuộn và Padding hai bên */
    .elementor-loop-container.elementor-grid {
        display: flex !important; 
        flex-wrap: nowrap !important; 
        overflow-x: scroll !important;  
        overflow-y: hidden !important; 
        -webkit-overflow-scrolling: touch;
        
        gap: 0 !important;
        margin: 0 !important;
        
        /* Đặt padding hai bên cho container (15px trái, 15px phải) */
        padding: 0 var(--mobile-padding) 10px var(--mobile-padding) !important; 
        
        scroll-snap-type: x mandatory;
    }

    /* Ẩn thanh cuộn (Giữ nguyên) */
    .elementor-loop-container.elementor-grid::-webkit-scrollbar {
        display: none;
    }
    .elementor-loop-container.elementor-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* 2. Item cha (.e-loop-item): Thiết lập kích thước và khoảng cách giữa các card */
    .elementor-loop-container.elementor-grid > .e-loop-item {
        flex-shrink: 0 !important; 
        
        /* Chiều rộng card */
        width: var(--card-width-mobile) !important; 
        
        /* Khoảng cách giữa các card */
        margin-right: var(--mobile-padding) !important; 
        margin-left: 0 !important; 
        padding: 0 !important;
        
        scroll-snap-align: start; 
        scroll-snap-stop: always; 
    }
    
    /* 3. FIX QUAN TRỌNG: Loại bỏ khoảng cách bên phải của card cuối cùng */
    .elementor-loop-container.elementor-grid > .e-loop-item:last-child {
        margin-right: 0 !important; 
    }
    
    /* 4. FIX TRIỆT ĐỂ: Thêm một phần tử ảo (pseudo-element) vào cuối container */
    /* Đây là phần bù đắp để card cuối cùng cuộn vào vị trí */
    .elementor-loop-container.elementor-grid::after {
        content: '';
        display: block; /* Đảm bảo nó là block */
        flex-shrink: 0;
        /* Chiều rộng bằng khoảng trống cần thiết để cuộn hết */
        width: var(--scroll-end-space) !important; 
        
        /* Bù trừ cho khoảng padding-right của container */
        margin-right: calc(-1 * var(--mobile-padding)) !important;
    }
    
    /* 5. Card con (.du-an): Đảm bảo lấp đầy item cha */
    .du-an {
        width: 100% !important; 
        min-height: 380px !important;
        margin: 0 !important; 
    }

    /* Điều chỉnh nhẹ các thành phần bên trong (Giữ nguyên) */
     .du-an .elementor-element-89f2679 .elementor-heading-title {
        font-size: 18px;
     }

}
}















/* 1. CONTAINER CHÍNH & TIÊU ĐỀ */
.tin-tuc-sidebar-form-wrapper {
    /* Đảm bảo không có padding thừa từ bên ngoài */
    padding: 0 !important;
}

.tin-tuc-sidebar-form {
    background-color: #6E0000; /* Màu Nền Xanh Đen đậm */
    color: #FFFFFF; /* Chữ trắng */
    padding: 30px 25px; /* Padding bên trong */
    
    /* BO TRÒN GÓC CONTAINER */
    border-radius: 12px !important; /* Thêm bo tròn góc lớn */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Tiêu đề "ĐĂNG KÝ TƯ VẤN" */
.tin-tuc-title {
    color: #FFFFFF; 
    text-align: center;
    font-size: 15px;
    font-weight: 600; /* Rất đậm */
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* 2. TRƯỜNG NHẬP LIỆU (INPUT & TEXTAREA) */

/* Kiểu dáng chung cho tất cả các trường nhập liệu */
.tin-tuc-sidebar-form input[type="text"], 
.tin-tuc-sidebar-form input[type="tel"],
.tin-tuc-sidebar-form input[type="email"], 
.tin-tuc-sidebar-form textarea {
    /* Nền trắng như mẫu */
    background-color: #FFFFFF !important; 
    color: #333333 !important; /* Chữ màu đen hoặc xám đậm */
    
    /* Thiết lập viền */
    border: 1px solid #DDDDDD !important; 
    
    /* BO TRÒN GÓC INPUT */
    border-radius: 8px !important; /* Bo tròn góc input */
    
    /* Padding, Margin, Giao diện */
    padding: 12px 15px !important; 
    margin-bottom: 15px !important; /* Khoảng cách giữa các trường */
    width: 100% !important;
    box-shadow: none !important;
    font-size: 15px;
    line-height: 1.5;
}

/* Placeholder */
.tin-tuc-sidebar-form ::placeholder {
    color: #999999 !important; /* Màu placeholder xám nhạt */
    opacity: 1; 
}


/* 3. NÚT SUBMIT (ĐĂNG KÝ NGAY) */
.tin-tuc-sidebar-form input[type="submit"] {
    background-color: #FFFFFF !important; /* Màu đỏ đậm tương tự mẫu */
    color: #000000 !important;
    border: none !important;
    border-radius: 8px !important; /* Bo tròn góc nút submit */
    padding: 15px !important;
    font-size: 16px;
    font-weight: 700;
    width: 100% !important; 
    text-transform: uppercase;
}









<style id="loop-29557">
/* ... Giữ lại các CSS hiện có trừ khi có xung đột ... */

/* Đảm bảo chiều cao của card bằng nhau */
.elementor-29557 .elementor-element.elementor-element-2a1a065 {
    --display: flex;
    --flex-direction: column;
    /* Thiết lập chiều cao cố định cho card */
    min-height: 550px; /* **ĐIỀU CHỈNH GIÁ TRỊ NÀY:** Đặt một chiều cao cố định đủ lớn cho tất cả các card. Ví dụ: 550px */
    height: 100%; /* Giữ lại 100% để thích ứng với container cha */
    /* Các thuộc tính khác giữ nguyên */
    border-style: solid;
    --border-style: solid;
    border-width: 1px 1px 1px 1px;
    --border-top-width: 1px;
    --border-right-width: 1px;
    --border-bottom-width: 1px;
    --border-left-width: 1px;
    --border-radius: 10px 10px 10px 10px;
    box-shadow: 12px 14px 30px -49px #919191;
    --padding-top:0px;
    --padding-bottom:0px;
    --padding-left:0px;
    --padding-right:0px;
}

/* ẢNH FEATURED: Thiết lập chiều cao cố định để chúng không làm thay đổi chiều cao card */
.elementor-29557 .elementor-element.elementor-element-f4008c1 img {
    width: 100%;
    max-width: 100%;
    /* **ĐIỀU CHỈNH GIÁ TRỊ NÀY:** Đặt chiều cao cố định cho ảnh */
    height: 352px; /* Giữ nguyên 352px hoặc điều chỉnh nếu cần */
    object-fit: cover; /* **QUAN TRỌNG:** Cắt ảnh để vừa vặn, tránh bị kéo dãn */
}

/* Nội dung còn lại nên được thiết lập để không gây biến đổi chiều cao (như text-excerpt) */
.elementor-29557 .elementor-element.elementor-element-82af642 {
    /* Quan trọng: Sử dụng flex-grow: 1 để đẩy footer xuống dưới, nếu cần */
    flex-grow: 1; 
    padding:0px 10px 10px 10px;
    text-align:justify;
}

/* Nếu bạn muốn đảm bảo tiêu đề (title) có cùng chiều cao (nếu tiêu đề có 1 dòng, 2 dòng...) 
   và phần tóm tắt (excerpt) có cùng chiều cao, bạn có thể áp dụng chiều cao cố định 
   hoặc số dòng tối đa cho các phần tử này */

/* Ví dụ cho excerpt: Giới hạn số dòng để tránh đẩy chiều cao card khác nhau */
.elementor-29557 .elementor-element.elementor-element-82af642 p {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* **ĐIỀU CHỈNH GIÁ TRỊ NÀY:** Số dòng tối đa */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Các thuộc tính khác giữ nguyên */
.elementor-29557 .elementor-element.elementor-element-2a1a065.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-29557 .elementor-element.elementor-element-f4008c1{width:var( --container-widget-width, 100.213% );max-width:100.213%;--container-widget-width:100.213%;--container-widget-flex-grow:0;}.elementor-29557 .elementor-element.elementor-element-f4008c1.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-29557 .elementor-element.elementor-element-7d652f7{padding:10px 10px 0px 10px;text-align:center;}.elementor-29557 .elementor-element.elementor-element-7d652f7 .elementor-heading-title{color:#6E0000;}.elementor-29557 .elementor-element.elementor-element-82af642{padding:0px 10px 10px 10px;text-align:justify;}.elementor-29557 .elementor-element.elementor-element-72b5667{margin:-30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 10px 10px;}.elementor-29557 .elementor-element.elementor-element-72b5667 .elementor-icon-list-icon{width:14px;}.elementor-29557 .elementor-element.elementor-element-72b5667 .elementor-icon-list-icon i{font-size:14px;}.elementor-29557 .elementor-element.elementor-element-72b5667 .elementor-icon-list-icon svg{--e-icon-list-icon-size:14px;}@media(min-width:769px){.elementor-29557 .elementor-element.elementor-element-2a1a065{--width:99.79%;}}
</style>













































/* --- 1. Bố cục chung (Flexbox) --- */
.wheel-list-layout {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    min-height: 600px; 
    padding: 50px 0;
    position: relative;
    overflow: hidden; 
}

/* --- CỘT 1: BÁNH XE ĐIỀU HƯỚNG (BÊN TRÁI) --- */
.services-list-holder {
    /* CHỈNH WIDTH CỘT TRÁI VỀ 50% */
    width: 50%; 
    position: relative;
    display: flex;
    /* Đẩy vòng tròn dịch vụ về phía CUỐI cột trái */
    justify-content: flex-end; 
    align-items: center;
    min-height: 600px; 
    z-index: 10; 
    /* DỊCH CHUYỂN TOÀN BỘ CỘT SANG PHẢI MỘT NỬA CHIỀU RỘNG VÒNG TRÒN (400px / 2 = 200px) */
    /* => Đảm bảo vòng tròn căn giữa màn hình */
    transform: translateX(200px); 
    padding-right: 0;
}

/* Vòng tròn trung tâm (Vòng tròn màu trắng/xám nhạt lớn) */
.services-list-holder .center-circle {
    position: relative; 
    width: 400px; 
    height: 400px;
    border-radius: 50%;
    background-color: #f0f0f0; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 
    z-index: 2; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Các phần khác trong Cột 1 (Dịch vụ bên trái) giữ nguyên */
.services-list-holder .main-circle {
    width: 200px;
    height: 200px;
    background-color: #6E0000; 
    border-radius: 50%; 
    z-index: 16;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
}

.services-list-holder .main-circle .services-title {
    font-size: 18px; 
    line-height: 1.3;
    color: white; 
    padding: 5px;
    margin: 0;
}

.wheel-content {
    position: absolute;
    top: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 15; 
}

.services-name-list {
    position: absolute;
    top: 50%;
    right: 100px;
    transform: translateY(-50%);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: right; 
}

.services-name-list .service-name {
    position: relative; 
    cursor: pointer;
    font-size: 16px;
    color: #444; 
    width: auto; 
    max-width: 300px; 
    line-height: 1.2;
    transition: all 0.3s ease;
    margin: 50px 0; 
    text-align: right; 
}
.services-name-list .service-name:hover{
	color: #6E0000 !important;
	transform: translateY(-6px);
}
.services-name-list .service-name[data-service-target="1"],
.services-name-list .service-name[data-service-target="2"],
.services-name-list .service-name[data-service-target="3"],
.services-name-list .service-name[data-service-target="4"] { 
    top: auto; 
    right: auto;
    bottom: auto;
}

.service-name .context {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    float: none; 
}

/* Đảm bảo chấm tròn nằm bên phải chữ */
.service-name .context > .wave-circle {
    order: 2; 
    margin-left: 5px;
    margin-right: 0;
}

.service-name .wave-circle {
    width: 8px;
    height: 8px;
    background-color: #CCCCCC;
    border-radius: 50%;
    margin: 0 3px;
}
.service-name.active .wave-circle {
    background-color: #6E0000; 
}


/* --- CỘT 2: NỘI DUNG CHI TIẾT (BÊN PHẢI) --- */
.services-detail-holder {
    /* CHỈNH WIDTH CỘT PHẢI VỀ 50% */
    width: 50%; 
    position: relative;
    
    /* HUỶ BỎ DỊCH CHUYỂN NỀN CŨ */
    transform: none; 
    
    /* TĂNG KHOẢNG CÁCH ĐỆM BÊN TRÁI (PADDING-LEFT) để đẩy chữ ra xa vòng tròn */
    padding: 0 50px 0 250px; /* Thêm padding 250px bên trái */
    
    display: flex;
    align-items: center;
    min-height: 600px;
    z-index: 5; 
}

/* --- Vòng tròn lớn phía sau nội dung (bg-circle) --- */
.services-detail-holder .bg-circle {
    display: none;
}

/* Các phần khác của cột 2 giữ nguyên */
.service-content-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.service-content-item {
    display: none; 
}
.service-content-item.active {
    display: block;
}
.service-content-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
    line-height: 1.2;
}
.services-detail-holder .desc p {
    line-height: 1.6;
    margin-bottom: 10px;
    text-align: justify;
    color: #555;
}


/* --- Responsive (Mobile - dưới 992px) --- */
@media (max-width: 991px) {
    .wheel-list-layout {
        flex-direction: column; /* Chuyển bố cục từ ngang sang dọc */
        min-height: auto;
    }
    
    /* 1. ẨN VÒNG TRÒN LỚN MÀU TRẮNG (Chỉ giữ lại vòng tròn đỏ) */
    .services-list-holder .center-circle {
        display: none; 
    }
    
    /* CHỈ GIỮ LẠI VÒNG TRÒN ĐỎ VÀ CĂN GIỮA */
    .services-list-holder {
        order: 1; /* Đặt lên trên */
        width: 100%; 
        transform: none; /* Loại bỏ dịch chuyển ngang */
        justify-content: center;
        min-height: auto; 
        padding-right: 0; 
        margin-bottom: 30px; 
    }
    .services-list-holder .main-circle {
        /* Giảm kích thước vòng tròn đỏ trên mobile */
        width: 180px; 
        height: 180px;
    }

    /* Đặt lại vị trí container chứa các tiêu đề */
    .wheel-content {
        position: absolute; /* Quan trọng: Giữ absolute để căn chỉnh các tiêu đề */
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%); /* Căn giữa tuyệt đối */
        width: 100%; 
        height: 100%; 
        z-index: 15; 
    }
    
    /* Xử lý danh sách tiêu đề */
    .services-name-list {
        position: absolute; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Căn giữa danh sách */
        list-style: none;
        padding: 0;
        margin: 0;
        width: 350px; /* Chiều rộng cần thiết để chứa các mục xoay */
        height: 350px; /* Chiều cao cần thiết */
        text-align: left; /* Căn chỉnh nội dung */
    }

    /* 2. HIỆU ỨNG UỐN CONG VÀ CĂN ĐỀU (Quan trọng nhất) */
    .services-name-list .service-name {
        /* Đặt vị trí tuyệt đối cho mỗi mục */
        position: absolute; 
        top: 50%;
        left: 50%;
        
        /* Đẩy ra khỏi tâm 130px và xoay 1 góc ban đầu */
        transform-origin: 0 0; /* Đặt tâm xoay về góc trên bên trái */
        transform: translate(-50%, -50%) rotate(0deg) translateX(-130px);
        
        /* Bỏ các margin cũ gây rối */
        margin: 0; 
        max-width: none;
        width: auto;
        
        /* Đảm bảo chữ dạt hết sang trái */
        text-align: left; 
    }

    /* 3. ĐIỀU CHỈNH GÓC XOAY CHO TỪNG TIÊU ĐỀ */
    /* Tổng cộng có 4 mục. Góc lệch giữa các mục là 360/4 = 90 độ. 
       Để dạt sang trái (vị trí 9 giờ), chúng ta bắt đầu từ 180 độ (12 giờ) */
    .services-name-list .service-name[data-service-target="1"] { 
        /* Vị trí bắt đầu (Khoảng vị trí 8 giờ) */
        transform: translate(-50%, -50%) rotate(160deg) translateX(-130px); 
    }
    .services-name-list .service-name[data-service-target="2"] { 
        /* Vị trí 7 giờ */
        transform: translate(-50%, -50%) rotate(200deg) translateX(-130px); 
    }
    .services-name-list .service-name[data-service-target="3"] { 
        /* Vị trí 6 giờ */
        transform: translate(-50%, -50%) rotate(240deg) translateX(-130px); 
    }
    .services-name-list .service-name[data-service-target="4"] { 
        /* Vị trí 5 giờ */
        transform: translate(-50%, -50%) rotate(280deg) translateX(-130px); 
    }

    /* Xử lý căn chỉnh chữ trong tiêu đề */
    .service-name .context {
        display: inline-flex; /* Quan trọng: Đổi từ flex thành inline-flex */
        justify-content: flex-start; /* Dạt chữ sang trái */
        align-items: center;
        /* Xoay ngược chữ lại 90 độ để chữ không bị nghiêng theo đường cong */
        /* Tuy nhiên, do xoay phức tạp, ta sẽ dùng transform: rotate(-90deg) cho chữ */
    }
    .service-name .context > .wave-circle {
        order: 1; /* Đẩy chấm tròn sang trái chữ */
        margin-right: 5px;
        margin-left: 0;
    }
    
    /* Ẩn chi tiết không cần thiết khi xoay */
    .wheel-content .line-circle { display: none; }
    .services-list-holder .second-circle { display: none; }
    
    
    /* CỘT 2: NỘI DUNG CHI TIẾT (Mobile) */
    .services-detail-holder {
        order: 2; 
        width: 100%; 
        transform: none; 
        padding: 0 20px; 
        min-height: auto;
    }

    /* Ẩn vòng tròn lớn phía sau nội dung */
    .services-detail-holder .bg-circle {
        display: none; 
    }
}








/* Tăng độ ưu tiên cho class của mỗi post */
.wd-posts.wd-blog-holder .wd-post {
    /* Quan trọng: Thiết lập mỗi bài viết là một flex container */
    display: flex; 
    /* Buộc bài viết có chiều cao bằng nhau trong cùng một hàng */
    height: 100%; 
}

/* Buộc phần nội dung bên trong của bài viết kéo dài tối đa */
.wd-posts.wd-blog-holder .wd-post-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Buộc phần nội dung text kéo giãn để đẩy phần chân (read-more) xuống dưới cùng */
.wd-posts.wd-blog-holder .wd-post-content {
    flex-grow: 1; /* Cho phép nội dung kéo giãn */
    display: flex;
    flex-direction: column;
}
/* Áp dụng cho tiêu đề bài viết */
.wd-posts .wd-post-title a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Giới hạn số dòng hiển thị */
    -webkit-line-clamp: 2; 
    line-height: 1.2; /* Tùy chỉnh line-height nếu cần */
    max-height: calc(1.2em * 2); /* Tính toán max-height dựa trên line-height */
}
/* 1. Thiết lập Chiều cao cố định cho vùng chứa ảnh */
.wd-posts .wd-post-img.post-img-wrapp {
    /* Đặt chiều cao tiêu chuẩn của ảnh (ví dụ 250px) */
    height: 250px; 
    width: 100%;
    overflow: hidden; /* Quan trọng để ẩn phần ảnh bị cắt */
}

/* 2. Ép ảnh lấp đầy vùng chứa */
.wd-posts .wd-post-img.post-img-wrapp img {
    width: 100%;
    height: 100%;
    /* Ép ảnh kéo dài để lấp đầy vùng chứa, giữ nguyên tỷ lệ và cắt bỏ phần thừa */
    object-fit: cover; 
}










.tieu-de-gioi-thieu p strong{
	color: #6E0000;
}
.tieu-de-gioi-thieu p{
	text-align: justify;
}
















/* --- CHUNG: CONTAINER VÀ KHUNG LỚN --- */

.block_introduce {
    padding: 80px 0 0px; /* Thêm padding dưới cho tab */
    position: relative; 
    overflow: hidden; /* Dùng hidden để kiểm soát các phần tử tuyệt đối */
    background-color: #F7F7F7;
}

.introduce .box_content {
    display: flex;
    align-items: flex-start;
    width: 100%;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
/* --- BỔ SUNG CSS CẦN THIẾT CHO BỐ CỤC NẰM NGANG --- */

#wheel-list-desktop {
    display: flex; /* Bật Flexbox */
    justify-content: space-around; /* Tùy chọn: Dàn đều khoảng cách giữa hai cột */
    align-items: flex-start; /* Quan trọng: Căn chỉnh hai cột theo top */
    width: 100%;
    max-width: 1400px; /* Đặt lại max-width để kiểm soát */
    margin: 0 auto; /* Căn giữa khối chính */
    padding: 20px 0; /* Thêm padding nếu cần */
}

/* 1. Thiết lập chiều rộng cho CỘT TRÁI (Vòng tròn dịch vụ) */
.services-list-holder {
    width: 100%; /* Ví dụ: Chiếm 40% chiều rộng */
    /* Đảm bảo vòng tròn được căn giữa trong cột này */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

}

/* 2. Thiết lập chiều rộng cho CỘT PHẢI (Chi tiết dịch vụ) */
.services-detail-holder {
    width: 45%; /* Ví dụ: Chiếm 60% chiều rộng còn lại */
    padding-left: 50px; /* Thêm khoảng cách giữa 2 cột */
}

/* 3. Đảm bảo phần tử này không bị ảnh hưởng bởi CSS Tab cũ */
/* Bạn đã có CSS này ở trên, nhưng cần đảm bảo nó không gây xung đột */
.service-content-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* --- BỐ CỤC NỘI DUNG (TEXT VÀ ẢNH) --- */

.introduce .items.body-introduce {
    display: flex !important; /* Luôn dùng flex để chia content-bl và intro_images */
    width: 100%;
    min-height: 550px; /* Chiều cao tối thiểu để chứa ảnh */
    transition: opacity 0.5s ease;
    padding-bottom: 50px;
}

/* Ẩn/Hiện Nội dung */
.body-introduce.hide1 {
    display: none !important;
    opacity: 0;
    position: absolute; /* Đặt tuyệt đối để ẩn, tránh chiếm chỗ */
    top: 0;
    left: 0;
}
.body-introduce.show {
    display: flex !important;
    opacity: 1;
    position: relative; /* Đặt tương đối khi hiển thị */
}

/* Cột Text Nội dung (Bên trái) */
.body-introduce .content-bl {
    width: 50%; 
    padding-right: 70px; 
    padding-left: 0px; /* Đẩy nội dung ra khỏi chữ "PHẠM GIA" */
    position: relative;
    z-index: 0;
}

/* Cột Hình ảnh (Bên phải) */
.body-introduce .intro_images {
    width: 50%;
    position: relative; 
    min-height: 250px;
    transform: translateX(50px); /* Dịch ảnh sang phải một chút */
}

/* --- STYLING TEXT --- */

.title_welcome span, .summary_block {
    color: #A0A0A0; 
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
}

.title_block {
    font-size: 48px; /* Tăng kích thước tiêu đề */
    font-weight: 700;
    color: #333; /* Màu đen */
    margin-top: 10px;
    margin-bottom: 20px;
}
.title_block.red-text { /* Dùng cho Sứ mệnh */
    color: #FF0000;
}

/* --- BỐ CỤC HÌNH ẢNH LỒNG GHÉP (ĐÃ CĂN CHỈNH) --- */

.intro_images .item_img {
    position: absolute;
    overflow: hidden;
    /* Xoay 45 độ để tạo hình khối kim cương */
    transform: rotate(45deg); 
    border: 8px solid #FFFFFF; /* Tăng viền trắng */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.intro_images .img_inner img {
    /* Xoay ngược lại -45 độ và scale lớn hơn để nội dung ảnh nhìn thẳng và lấp đầy khối kim cương */
    transform: rotate(-45deg) scale(2.2); 
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* Đặt chung một Z-index cho cả 3 khối */

/* Khối Chính Giữa (Item 0) - Đặt Ở Vị Trí Trên Cùng */
.intro_images .item_0 {
    width: 240px;
    height: 240px;
    /* Dịch chuyển lên phía trên (Ví dụ: cách top 50px) */
		right: 150px;
		top: 0px;
    z-index: 1; /* Cùng z-index */
    /* opacity: 1; (Mặc định là 1 nếu không có) */
}

/* Khối Phía Sau Bên Trên (Item 1) - Đặt Ở Vị Trí Dưới (Bên Trái) */
.intro_images .item_1 {
    width: 240px;
    height: 240px;
    /* Thay đổi vị trí để đặt xuống dưới */
  	top: auto; 
    bottom: 85px; 
    left: 35px;
    z-index: 1; /* Cùng z-index */
}

/* Khối Phía Sau Bên Dưới (Item 2) - Đặt Ở Vị Trí Dưới (Bên Phải) */
.intro_images .item_2 {
    width: 240px;
    height: 240px;
    /* Giữ nguyên vị trí ban đầu (bottom/right) hoặc điều chỉnh */
    top: auto; 
    bottom: 0px; /* Đặt sát dưới */
    right: 60px;
    z-index: 1; /* Cùng z-index */
}
/* --- THANH TAB ĐIỀU HƯỚNG --- */

.box_tab_title {
    position: absolute;
    bottom: 0; /* Đẩy xuống sát chân */
    left: 20px; /* Căn lề với nội dung text */
    display: flex;
    justify-content: flex-start;
    width: 45%; 
    padding: 0;
}

.tab_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0; /* Loại bỏ padding ngang để dùng width 33.33% */
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #F8F8F8;
    color: #333;
    font-weight: 600;
    width: 33.33%; /* Chia đều 3 tab */
    min-height: 100px; /* Chiều cao tối thiểu để icon và text không bị nén */
    justify-content: center;
}

.tab_title.activated {
    background-color: #6E0000; 
    color: #FFFFFF;
}

.tab_title .icon {
    margin-bottom: 5px;
}

/* Kích thước Icon SVG (Điều chỉnh) */
.tab_title .icon svg {
    width: 35px; /* Kích thước lớn hơn */
    height: 35px;
    transition: fill 0.3s;
}

.tab_title .icon svg path {
    fill: #333; 
    transition: fill 0.3s;
}

.tab_title.activated .icon svg path {
    fill: #FFFFFF; 
}
/* ============================================= */
/* CSS MỤC TIÊU/SỨ MỆNH/TẦM NHÌN - MOBILE ONLY */
/* ============================================= */

.mobile-vision-container {
    padding: 20px 15px; /* Padding chung cho mobile */
    background-color: #f7f7f7; /* Nền nhẹ nhàng */
    font-family: Arial, sans-serif;
}

.mobile-vision-block {
    max-width: 100%;
}

/* --- THANH TAB ĐIỀU HƯỚNG --- */
.mobile-tab-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 20px; /* Đổi margin-bottom thành margin-top để tạo khoảng cách với khối nội dung phía trên */
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.mobile-tab-item {
    flex: 1; /* Chia đều 3 cột */
    padding: 12px 5px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-right: 1px solid #eee;
}
.mobile-tab-item:last-child {
    border-right: none;
}

.mobile-tab-item.activated {
    background-color: #6E0000; /* Màu đỏ chủ đạo */
    color: #FFFFFF;
}

.mobile-tab-title {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 4px;
}
.mobile-tab-icon {
    /* Đây là nơi để đặt SVG/Icon - Nếu có */
    width: 20px;
    height: 20px;
    margin: 0 auto;
    /* Tạm thời chỉ để giữ chỗ */
    background-color: transparent;
}


/* --- KHỐI NỘI DUNG --- */

.mobile-content-wrapper {
    position: relative;
    padding: 15px;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-height: 200px; /* Chiều cao tối thiểu */
}

.mobile-content-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}

.mobile-content-item.hide {
    display: none;
    opacity: 0;
}
.mobile-content-item.show {
    display: block;
    opacity: 1;
    position: relative; /* Đặt lại vị trí để chiếm chỗ */
}

.mobile-title {
    font-size: 18px;
    color: #333;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}

.mobile-text p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}
.mobile-text ul {
    font-size: 14px;
    line-height: 1.6;
    padding-left: 20px;
    color: #555;
}
.mobile-text ul li {
    margin-bottom: 8px;
}
/* --- BỔ SUNG ĐỊNH DẠNG CHO SVG ICONS --- */

/* Kích thước và căn giữa chung cho tất cả SVG icons */
.mobile-tab-item .mobile-tab-icon svg {
    width: 28px;  /* Đặt kích thước phù hợp cho mobile */
    height: 28px;
    display: block;
    margin: 0 auto;
}

/* Định dạng màu mặc định của Path bên trong SVG */
.mobile-tab-item .mobile-tab-icon svg path {
    fill: #333; /* Màu mặc định (ví dụ: đen) */
    transition: fill 0.3s;
}

/* Định dạng màu khi tab được kích hoạt (activated) */
.mobile-tab-item.activated .mobile-tab-icon svg path {
    fill: #FFFFFF; /* Màu trắng khi active */
}