/* HERO SECTION */
.hero-row-custom{display:flex;flex-wrap:wrap;margin:0 -10px;width:calc(100% + 20px);}
.hero_menu,.hero_banner,.hero_vertical{padding:0 5px;position:relative;box-sizing:border-box;margin-bottom:15px;}

/* MENU TRÁI */
.vertical-menu{background:#fff;border-radius:var(--radius);box-shadow:0 2px 6px rgba(0,0,0,.06);border:1px solid #f0f0f0;height:100%;overflow:hidden;}
.vertical-menu ul li a{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid #eee;font-size:14px;}
.vertical-menu ul li:last-child a{border-bottom:0;}
.vertical-menu ul li a:hover{background:#fafafa;padding-left:18px;color:var(--secondary);}

/* BANNER GIỮA */
.hero_banner>.swiper{border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;width:100%;}
.swiper-hero-main .swiper-slide img{width:100%;height:auto;display:block;object-fit:cover;}

/* TABS */
.hero-control-tabs{display:flex;justify-content:space-between;background:#fff;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.05);border:1px solid #f0f0f0;border-top:none;}
.hero-tab-btn{flex:1;text-align:center;padding:10px 5px;cursor:pointer;font-size:13px;border-top:2px solid transparent;transition:.3s;background:#f8f8f8;}
.hero-tab-btn span{display:block;font-weight:600;}
.hero-tab-btn small{display:block;font-size:11px;color:#777;margin-top:2px;}
.hero-tab-btn.active{background:#fff;border-top-color:var(--primary);color:var(--primary);}
.hero-tab-btn:hover{background:#fff;}

/* BANNER DỌC */
.vertical-banner-wrapper{height:380px;position:relative;overflow:hidden;border:1px solid #ddd;border-radius:var(--radius);background:#fff;}
.swiper-vertical-banner{width:100%;height:100%;}
.swiper-vertical-banner .swiper-slide img{width:100%;height:100%;object-fit:cover;}
.vertical-btn-next,.vertical-btn-prev{position:absolute;left:50%;transform:translateX(-50%);width:30px;height:30px;background:rgba(255,255,255,.9);border:1px solid #ddd;color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:8;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.3s;}
.vertical-btn-next:hover,.vertical-btn-prev:hover{background:var(--primary);color:#fff;}
.vertical-btn-prev{top:5px;}
.vertical-btn-next{bottom:5px;}
/* --- NỘI DUNG MỚI: CSS cho Grid Menu trên Mobile riêng ở trang chủ --- */
.grid-menu-mobile{display:none;margin-bottom:15px;background:#fcfcfc;border-radius:var(--radius);padding:15px 10px;box-shadow:0 1px 4px rgba(0,0,0,0.05);}
.grid-menu-mobile .list_menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:15px 10px;text-align:center;}
.grid-menu-mobile .item_menu a{display:block;color:var(--text);}
.grid-menu-mobile .item_menu img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);border:1px solid #eee;margin-bottom:4px;}
.grid-menu-mobile .item_menu span{font-size:11px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;}
/* --- KẾT THÚC CSS Grid Menu --- */
/* PC >=1200px */
@media(min-width:1200px){
.hero_menu{width:18%;display:block;}
.hero_banner{width:62%;display:block;}
.hero_vertical{width:20%;display:block;}
.hero-row-custom{margin-bottom:0;}
grid-menu-mobile { display: none; }
}

/* TABLET 768–1199px */
@media(min-width:768px) and (max-width:1199px){
.hero_vertical{display:none;}
.hero_menu{width:20%;display:block;}
.hero_banner{width:80%;display:block;}
.vertical-menu{height:380px;}
.grid-menu-mobile { display: none; } /* Ẩn Grid menu */
}

/* MOBILE <768px */
@media(max-width:767px){
.hero_menu{display:none;}
.hero_vertical{display:none;}
.hero_banner{width:100%;display:block;}
.swiper-hero-main .swiper-slide img{height:180px;}
.grid-menu-mobile { display: block; }
}
/* =========================================================
   [NEW - CẬP NHẬT] KHỐI 1: STATIC BANNER (4 CỘT)
   ========================================================= */
.section-static-banner {
    margin-bottom: 25px;
}

.banner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 cột trên desktop */
    gap: 15px;
}

.banner-item a {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    position: relative;
}

.banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-radius: var(--radius);
}

.banner-item a:hover img {
    transform: scale(1.05); /* Hiệu ứng zoom nhẹ khi hover */
}

/* Thêm lớp phủ và text nếu cần */
.banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.4));
    font-size: 14px;
    font-weight: 600;
}

/* Responsive cho banner */
@media (max-width: 991px) {
    .banner-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 cột */
        gap: 10px;
    }
}
@media (max-width: 576px) {
    .banner-grid {
        grid-template-columns: 1fr; /* Mobile: 1 cột */
        gap: 8px;
    }
}
/* =========================================================
   [NEW] KHỐI 2: CHÍNH SÁCH (POLICY ICONS)
   ========================================================= */
.section-policy-icons {
    background: #fff;
    padding: 20px 15px;
    border-radius: var(--radius);
    border: 1px solid #eee;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.policy-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

.policy-item {
    flex: 1 1 calc(25% - 15px); /* Chia 4 cột */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 8px;
    transition: 0.3s;
}

.policy-item:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.policy-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--secondary); /* Màu cam */
    border: 1px solid var(--secondary);
    border-radius: 50%;
    flex-shrink: 0;
    background: #fff;
}

.policy-text h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
    text-transform: uppercase;
}

.policy-text p {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.policy-link {
    display: flex; /* Bắt buộc để căn chỉnh icon và text */
    gap: 12px;
    width: 100%;
    height: 100%;
}

.policy-item:hover .policy-text h4,
.policy-item:hover .policy-text p {
    color: var(--primary); /* Đổi màu chữ khi hover vào toàn bộ item */
}
/* =========================================================
   [NEW - CẬP NHẬT] KHỐI 3: TIN TỨC & BÀI VIẾT (LIST DỌC)
   ========================================================= */
.section-news-block {
    margin-bottom: 30px;
}

.news-list-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* Quan trọng để các cột căn trên cùng */
}

/* Cột chính chứa danh sách bài viết */
.news-list-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px; /* Khoảng cách giữa các bài viết */
}

/* Cột Sidebar (chứa Banner/Bài viết hot) */
.news-list-sidebar {
    width: 300px; /* Độ rộng cố định cho sidebar */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Tiêu đề cho các block phụ trong sidebar */
.sidebar-block-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    border-left: 4px solid var(--primary);
    padding-left: 8px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* ITEM TIN TỨC DẠNG LIST */
.news-item-list {
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee; /* Đường kẻ phân chia */
    transition: 0.3s;
}

.news-item-list:hover {
    background: #fcfcfc;
}

.news-item-list:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.nil-thumb {
    width: 140px; /* Độ rộng thumbnail lớn hơn */
    height: 100px;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
}

.nil-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.news-item-list:hover .nil-thumb img {
    transform: scale(1.05);
}

.nil-content {
    flex-grow: 1;
}

.nil-title a {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.nil-title a:hover {
    color: var(--primary);
}

.nil-summary {
    font-size: 13px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}

.nil-meta {
    font-size: 12px;
    color: var(--secondary);
}
.nil-meta i {
    margin-right: 4px;
}

/* Responsive cho List Dọc */
@media (max-width: 991px) {
    .news-list-wrapper {
        flex-direction: column; /* Đổi thành cột dọc trên Tablet/Mobile */
    }
    .news-list-sidebar {
        width: 100%; /* Sidebar chiếm toàn bộ chiều rộng */
        order: -1; /* Đưa Sidebar lên trên */
    }
    .nil-thumb {
        width: 100px; /* Thu nhỏ ảnh trên mobile */
        height: 70px;
    }
    .nil-title a {
        font-size: 14px;
    }
    /* Ẩn các tin tức phụ trong sidebar trên Mobile để tiết kiệm không gian */
    .sidebar-small-news .news-item-list:nth-child(n+3) {
        display: none;
    }
}


/* =========================================================
   [NEW] KHỐI 4: GIỚI THIỆU & SEO CONTENT (FOOTER CONTENT)
   ========================================================= */
.section-footer-content {
    background: #fff;
    padding: 30px 0;
    margin-top: 20px; /* Tạo khoảng cách với các khối trên */
    border-top: 1px solid var(--border);
}

.sfc-header h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 15px;
    text-align: center;
}

.sfc-header p {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 25px;
    color: #555;
}

.sfc-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
}

.sfc-content h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary); /* Tiêu đề phụ dùng màu cam nổi bật */
    margin-top: 25px;
    margin-bottom: 10px;
}

.sfc-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 20px;
    margin-bottom: 8px;
    border-left: 3px solid var(--primary);
    padding-left: 10px;
}

/* Style cho danh sách cam kết (3 Giá Trị) */
.commitment-list {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin: 20px 0;
    padding: 20px 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    text-align: center;
}

.commitment-item {
    flex: 1 1 30%;
}

.commitment-icon {
    font-size: 30px;
    color: var(--secondary);
    margin-bottom: 8px;
}

.commitment-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
}

/* Style cho FAQ */
.faq-item {
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 3px solid var(--secondary);
}
.faq-item strong {
    color: var(--primary);
}
.faq-item p {
    margin-top: 5px;
    padding-left: 0;
}

.sfc-content .highlight {
    color: var(--primary);
    font-weight: 700;
}
.sfc-content .highlight-secondary {
    color: var(--secondary);
    font-weight: 700;
}

@media (max-width: 768px) {
    .sfc-header h1 { font-size: 20px; }
    .commitment-list { flex-direction: column; }
}