/* Base Styles */
* {
  box-sizing: border-box;
}

/* Ẩn khỏi giao diện nhưng vẫn đọc được bởi Google/trình đọc màn hình - dùng
   cho <h1> bắt buộc phải có vì lý do SEO ở những khối chỉ có ảnh (không chữ)
   như hero banner, tránh phải thêm chữ thừa phá layout thiết kế gốc. */
.hb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   GLOBAL UI SYSTEM
   ========================================================================== */
.hb-section-title {
    font-size: var(--hb-fs-h1);
    font-weight: 700 !important;
    font-family: var(--hb-font, "Roboto", sans-serif);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: var(--hb-space-12);
    line-height: 1.3;
}
.hb-section-title.text-center { text-align: center; }
.hb-section-title.text-left { text-align: left; }
.hb-section-title.light-text { color: #fff; }
.hb-section-title.dark-text { color: var(--hb-text-main); }

/* ==========================================================================
   GLOBAL UI COMPONENTS (Cards & Buttons)
   ========================================================================== */
.hb-card {
    background-color: #ffffff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.hb-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
.hb-nav-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}
.hb-nav-btn:hover {
    background-color: var(--hb-secondary, #ba9667);
    border-color: var(--hb-secondary, #ba9667);
    color: #fff;
}
.hb-nav-btn.dark-theme {
    border-color: rgba(0,0,0,0.2);
    color: var(--hb-text-main);
}
.hb-nav-btn.dark-theme:hover {
    background-color: var(--hb-secondary, #ba9667);
    border-color: var(--hb-secondary, #ba9667);
    color: #fff;
}


@media (max-width: 991px) {
    .hb-section-title {
        font-size: var(--hb-fs-h3);
        margin-bottom: var(--hb-space-6);
    }
    .hb-section-title.text-left {
        text-align: center;
    }
}
body {
  font-family: var(--hb-font, "Roboto", sans-serif);
  color: var(--hb-text-muted);
  background: var(--hb-bg-body);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/* .hb-container / .hb-container--flush chuyển sang design-tokens.css để mọi
   trang (không riêng trang chủ) dùng chung đúng 1 định nghĩa. */

.hb-section {
  width: 100%;
  padding: var(--hb-space-20) 0;
  position: relative;
}
.hb-bg-white { background-color: var(--hb-white); }
.hb-bg-soft { background-color: var(--hb-bg-soft); }

/* Typography */
.hb-h2 {
  font-family: var(--hb-font, "Roboto", sans-serif);
  font-size: var(--hb-fs-h1);
  font-weight: var(--hb-fw-bold);
  color: var(--hb-text-main);
  line-height: var(--hb-lh-tight);
  margin: 0 0 var(--hb-space-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hb-h2--center { text-align: center; margin: 0; }

.hb-text-accent { color: var(--hb-secondary); }
.hb-text-brand { color: var(--hb-primary); }

.hb-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hb-space-6);
  margin-bottom: var(--hb-space-8);
  flex-wrap: wrap;
}
.hb-head-row--center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: var(--hb-space-12);
}

/* Buttons dùng chung */
.hb-btn {
  font-family: var(--hb-font, "Roboto", sans-serif);
  font-weight: var(--hb-btn-font-weight);
  font-size: var(--hb-fs-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--hb-btn-padding-y) var(--hb-btn-padding-x);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-space-2);
  text-decoration: none;
  transition: var(--hb-transition);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}
.hb-btn:hover {
  transform: translateY(-2px);
}

.hb-btn--primary {
  background: var(--hb-btn-primary-bg, var(--hb-secondary));
  color: var(--hb-btn-primary-text, var(--hb-primary-hover));
  border-color: var(--hb-btn-primary-bg, var(--hb-secondary));
  box-shadow: 0 4px 12px rgba(212, 176, 76, 0.3);
}
.hb-btn--primary:hover {
  background: var(--hb-secondary-hover);
  border-color: var(--hb-secondary-hover);
}

.hb-btn--outline-brand {
  background: transparent;
  color: var(--hb-primary);
  border-color: var(--hb-primary);
}
.hb-btn--outline-brand:hover {
  background: var(--hb-primary);
  color: var(--hb-white);
}

/* Nút outline dùng chung */
.hb-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hb-white);
  color: var(--hb-primary);
  padding: var(--hb-space-3) var(--hb-space-8);
  border-radius: 0;
  font-size: var(--hb-fs-sm);
  font-weight: var(--hb-fw-bold);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  border: 2px solid var(--hb-primary);
  transition: var(--hb-transition);
}
.hb-outline-btn:hover {
  background: var(--hb-primary);
  color: var(--hb-white);
}

/* ==========================================================================
   1. HERO BANNER: IMAGE ONLY SLIDER
   ========================================================================== */
.hb-hero-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.hb-hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  /* Cho phép kéo/vuốt ngang để chuyển slide (JS xử lý qua Pointer Events) mà
     vẫn giữ được cuộn dọc trang bình thường trên cảm ứng. */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.hb-hero-slider:active {
  cursor: grabbing;
}

.hb-hero-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: none;
  position: relative;
}

.hb-hero-slide.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hb-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hb-hero-link {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
}

/* ==========================================================================
   NÚT SLIDER MOBILE — 1 CHUẨN DÙNG CHUNG (Hero, Danh mục, Blog)
   Trước đây mỗi khối tự định nghĩa 1 kiểu nút riêng (44px tròn / 36px vuông /
   60px vuông viền, icon lẫn lộn ký tự HTML và SVG) gây lộn xộn. Nay gộp về
   1 class .hb-mobile-slider-btn: 44px vuông (không bo góc theo chuẩn design
   system), nền kính mờ + viền mảnh, icon SVG chevron đồng nhất. Mỗi khối chỉ
   còn giữ lại CSS định vị (absolute/flex) riêng của mình.
   ========================================================================== */
.hb-mobile-slider-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  color: var(--hb-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--hb-transition);
  backdrop-filter: blur(4px);
}
.hb-mobile-slider-btn svg {
  width: 20px;
  height: 20px;
}
.hb-mobile-slider-btn:hover,
.hb-mobile-slider-btn:active {
  background: rgba(255, 255, 255, 0.3);
  color: var(--hb-white);
}

.hb-hero-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--hb-space-4);
  z-index: 10;
  pointer-events: none;
}

.hb-hero-nav button {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.3);
  color: var(--hb-primary-hover);
  /* Đồng bộ viền với .hb-nav-btn (dùng chung ở các slider khác trên trang) -
     trước đây "border: none" khiến nút slider banner khác biệt, không có
     viền ngoài như carousel "Các dòng sản phẩm". */
  border: 1px solid rgba(255, 255, 255, 0.5);
  width: 44px;
  height: 44px;
  border-radius: 0;
  font-size: var(--hb-fs-h4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--hb-transition);
  backdrop-filter: blur(4px);
}

.hb-hero-nav button:hover {
  background: var(--hb-white);
  color: var(--hb-primary);
  box-shadow: var(--hb-shadow-md);
}

/* Trên mobile, .hb-mobile-slider-btn ghi đè kiểu nút cũ ở trên (dùng 2 class
   để thắng độ đặc trưng mà không đụng tới nút hero bên bản desktop, nơi
   .hb-hero-nav button vẫn giữ nguyên vì không có class .hb-mobile-slider-btn). */
.hb-hero-nav .hb-mobile-slider-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  color: var(--hb-white);
}
.hb-hero-nav .hb-mobile-slider-btn:hover,
.hb-hero-nav .hb-mobile-slider-btn:active {
  background: rgba(255, 255, 255, 0.3);
  color: var(--hb-white);
  box-shadow: none;
}

.hb-hero-dots {
  position: absolute;
  bottom: var(--hb-space-4);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: var(--hb-space-2);
  z-index: 10;
}

.hb-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: var(--hb-transition);
}

.hb-hero-dot.active {
  background: var(--hb-secondary);
  transform: scale(1.2);
}

/* ==========================================================================
   CATEGORY HERO SECTION (Full-Screen Premium Hero)
   ========================================================================== */
.hb-cat-hero-section {
    width: 100%;
    margin: 0; /* Xóa margin/padding trắng ngoài Hero */
    height: 100vh;
    position: relative;
}

.hb-cat-hero-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hb-cat-bg-group {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    /* Cho phep keo/vuot ngang de chuyen danh muc (JS xu ly qua Pointer Events)
       ma van giu duoc cuon doc trang binh thuong tren cam ung. */
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}
.hb-cat-bg-group:active {
    cursor: grabbing;
}

.hb-cat-hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03); 
    transition: opacity 1s ease-in-out, transform 1.5s ease-out, visibility 1s;
}

.hb-cat-hero-bg.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}

.hb-cat-hero-gradient {
    position: absolute;
    top: 0; left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.35), transparent);
    z-index: 3;
    pointer-events: none;
}

.hb-cat-container-wrap {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    height: 100%; 
    width: 100%; 
    z-index: 4; 
    pointer-events: none;
}

.hb-cat-hero-nav-overlay {
    pointer-events: auto;

    position: absolute;
    top: 10vh; /* Cách trên một khoảng vừa phải */
    left: var(--hb-space-4); /* Canh thẳng hàng với phần rìa trái của chữ trong container (kế thừa padding của container) */
    display: flex;
}

.hb-cat-nav-line {
    display: none; /* Ẩn line cũ, ta sẽ vẽ line bằng pseudo-element để có thể "cắt đứt" */
}

.hb-cat-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 24px; /* Khoảng cách từ line đến chữ */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px; /* Tăng khoảng cách cho thoáng */
}

/* KHÔI PHỤC ĐƯỜNG KẺ DỌC LIỀN MẠCH BẰNG PSEUDO-ELEMENT */
.hb-cat-nav-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: -20px;
    bottom: -20px;
    width: 1px;
    background: #c9b5b5; /* Giảm hẳn độ sáng (opacity 20%) để nó chìm sâu làm nền tảng */
}

.hb-cat-nav-item {
    position: relative;
    padding: 0;
    border: none;
}

.hb-cat-nav-link {
    color: rgba(255, 255, 255, 0.5); /* Inactive mờ để dễ phân biệt */
    text-decoration: none;
    font-family: var(--hb-font, "Roboto", sans-serif);
    font-size: var(--hb-fs-sm);
    font-weight: 500 !important;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: block;
    letter-spacing: 1px;
    line-height: 1.2;
    white-space: nowrap;
}

.hb-cat-nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
}

.hb-cat-nav-item.is-active .hb-cat-nav-link {
    color: #ffffff;
    font-weight: 500 !important; 
    text-shadow: 0 0 10px rgba(255,255,255,0.5); /* Sáng bóng nổi bật */
    text-decoration: underline;
    text-underline-offset: 16px; /* Hạ đường gạch chân xuống một chút để chữ thoáng hơn */
    text-decoration-thickness: 1px; /* Gạch chân thanh mảnh */
    text-decoration-color: #ffffff; /* Sáng tối đa */
}

/* NÉT GẠCH NGANG (TICK) NỐI TỪ LINE VÀO CHỮ CHO MỤC ACTIVE */
.hb-cat-nav-item.is-active::before {
    content: ''; 
    position: absolute;
    left: -22px; /* Đặt gần sát vào đường kẻ dọc */
    top: 50%;
    transform: translateY(-50%); 
    width: 16px; 
    height: 16px;
    background-color: transparent; 
    box-shadow: none;
    /* Sử dụng SVG Chevron Right cực sắc nét làm icon điều hướng */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)); /* Glow cho icon */
}

@media (max-width: 1024px) {
    .hb-cat-hero-nav-overlay {
        left: 5%;
        max-width: 40%;
    }
}

/* ==========================================================================
   DANH MỤC SẢN PHẨM (Mobile) - dải huy hiệu tròn viền vàng đồng cuộn ngang,
   cùng phong cách với khối "Hồ sơ pháp lý & bằng chứng" (.hb-proof-badges-*)
   - thay cho slider ảnh cao gần hết màn hình kiểu cũ (.hb-cat-mobile-slider,
   đã gỡ - chỉ hiện 1 danh mục/lần, phải bấm mũi tên mới xem được danh mục
   khác). Chỉ dùng ở mobile/home.blade.php - bản desktop dùng .hb-cat-hero-section
   (hover đổi ảnh, layout khác hẳn) ở trên.
   ========================================================================== */
.hb-cat-badges-section {
    width: 100%;
    padding: var(--hb-space-8) 0;
    background: var(--hb-white);
}
.hb-cat-badges-title {
    font-family: var(--hb-font);
    font-size: var(--hb-fs-h4);
    font-weight: var(--hb-fw-bold);
    color: var(--hb-text-main);
    text-transform: uppercase;
    margin: 0 0 var(--hb-space-5);
}
.hb-cat-badges-scroll {
    display: flex;
    gap: var(--hb-space-6);
    overflow-x: auto;
    padding-bottom: var(--hb-space-1);
}
.hb-cat-badges-scroll::-webkit-scrollbar {
    display: none;
}
.hb-cat-badges-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hb-space-2);
    text-decoration: none;
    width: 84px;
}
.hb-cat-badges-ring {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px solid var(--hb-secondary);
    padding: 3px;
    overflow: hidden;
}
.hb-cat-badges-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.hb-cat-badges-label {
    font-family: var(--hb-font);
    font-size: var(--hb-fs-xs);
    font-weight: var(--hb-fw-medium);
    color: var(--hb-text-main);
    text-align: center;
    line-height: var(--hb-lh-tight);
}


/* ==========================================================================
   CAROUSEL BASE (Thanh trượt dùng chung)
   ========================================================================== */
.hb-prod-carousel-wrap {
    position: relative;
    padding: 0 var(--hb-space-12); /* Chừa chỗ cho nút Next/Prev */
}

.hb-prod-carousel-viewport {
    overflow: hidden;
    width: 100%;
}

.hb-prod-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
.hb-prod-carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}










/* ==========================================================================
   CERTIFICATES SECTION (Giấy Chứng Nhận - Dạng Split Layout)
   ========================================================================== */
.hb-cert-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111;
    /* Từ 1025px trở lên đã có overflow:hidden riêng (khối "cuộn từng khối",
       xem @media min-width:1025px bên dưới) - khai báo luôn ở đây để tầm
       768-1024px (không cuộn từng khối nhưng vẫn height:100vh cố định)
       cũng không bị nội dung tràn đè lên khối kế tiếp. */
    overflow: hidden;
}

.hb-cert-overlay {
}

.hb-cert-section .hb-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hb-cert-split-layout {
    display: grid;
    grid-template-columns: 35% 65%; /* Tỷ lệ 35/65 cho bố cục bất đối xứng hiện đại */
    align-items: center;
    gap: 80px;
}

.hb-cert-split-text {
    padding-right: 0;
}



.hb-cert-split-text .hb-text-accent {
    color: var(--hb-secondary);
    display: block;
    font-weight: 500;
}

.hb-cert-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--hb-fs-body);
    line-height: 1.6;
    margin-bottom: var(--hb-space-10);
    font-weight: 300;
    letter-spacing: 0.5px;
    font-family: var(--hb-font, "Roboto", sans-serif);
}

.hb-cert-nav-custom {
    display: flex;
    gap: var(--hb-space-4);
}



.hb-cert-nav-custom .hb-nav-btn:hover {
    color: var(--hb-secondary);
    background: rgba(0, 0, 0, 0.1);
}

.hb-cert-carousel-wrap.hb-prod-carousel-wrap {
    padding: 0;
}

.hb-cert-carousel-track {
    padding: 20px 0;
}

.hb-cert-card {
    flex: 0 0 280px; 
    height: 390px;
    margin-right: 30px;
    scroll-snap-align: start;
    position: relative;
    background-color: transparent;
    border: none; /* Khối không dùng border */
    border-radius: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.hb-cert-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.hb-cert-card img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0.8;
    transition: all 0.4s ease;
}

.hb-cert-card:hover img {
    opacity: 1;
    transform: scale(1.05);
}

@media (max-width: 1024px) {
    .hb-cert-split-layout {
        grid-template-columns: 1fr;
        gap: var(--hb-space-8);
    }
    .hb-cert-split-text {
        text-align: center;
        padding: 0 var(--hb-space-6); 
    }
    .hb-cert-split-text .hb-section-title {
        text-align: center;
    }
    .hb-cert-desc {
        margin-bottom: var(--hb-space-6);
    }
    .hb-cert-nav-custom {
        display: none; /* Hide navigation buttons on mobile */
    }
    .hb-cert-section {
        height: auto;
        padding: var(--hb-space-12) 0;
    }
    
    /* New Mobile Grid Layout for Certificates */
    .hb-cert-carousel-wrap {
        padding: 0 var(--hb-space-4);
    }
    .hb-cert-carousel-track {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--hb-space-4);
        padding: var(--hb-space-2) 0;
        overflow-x: hidden;
    }
    .hb-cert-card {
        flex: auto !important;
        height: auto !important;
        aspect-ratio: 1 / 1.414; /* A4 aspect ratio */
        margin-right: 0 !important;
        background: rgba(255, 255, 255, 0.05); /* Frosted glass */
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: var(--hb-space-2);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hb-cert-card img {
        position: relative !important; /* Override absolute */
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}


/* ==========================================================================
/* ==========================================================================
   5. FAQ & NEWS (Tin tức & FAQ)
   ========================================================================== */
.hb-faq-grid-section,
    .hb-advantage-section,
    .hb-highlight-section,
    .hb-contact-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hb-primary-hover);
}

.hb-faq-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hb-faq-container {
    position: relative;
    z-index: 2;
    height: auto;
    width: 100%;
    padding: var(--hb-space-16) 0;
}

.hb-faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    width: 100%;
    gap: var(--hb-space-8);
}

.hb-faq-item {
    border: 1px solid var(--hb-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px 30px;
    text-align: center;
    transition: background-color 0.4s ease, border-color 0.4s ease;
    cursor: pointer;
}

.hb-faq-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.hb-faq-text {
    color: #dcd1a7;
    font-size: var(--hb-fs-body);
    line-height: 1.6;
    margin: 0 0 25px 0;
    font-weight: 400;
    font-family: var(--hb-font, "Roboto", sans-serif);
    letter-spacing: 0.5px;
}

.hb-faq-line {
    width: 50px;
    height: 2px;
    background-color: var(--hb-secondary); 
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
    transition: width 0.3s ease;
}

.hb-faq-item:hover .hb-faq-line {
    width: 70px; 
}

.hb-faq-title-item {
    background-color: transparent;
    cursor: default;
    border-color: transparent;
}

.hb-faq-title-item:hover {
    background-color: transparent; 
}



.hb-faq-link {
    color: var(--hb-secondary); 
    font-size: var(--hb-fs-sm);
    text-decoration: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.hb-faq-link:hover {
    color: #ffffff;
}

/* ==========================================================================
   FAQ GRID (Mobile) - lưới 2 cột x 4 dòng gọn trong đúng 1 màn hình (100vh),
   dùng class riêng .hb-faq-grid-section--mobile (chỉ có ở mobile/home.blade.php)
   để không đụng tới layout 3 cột của bản desktop. Dùng kỹ thuật "gap = màu
   viền" (background trên .hb-faq-grid, item có nền riêng) để ra đúng lưới kẻ
   mảnh liền mạch như ảnh mẫu, thay vì border riêng từng ô + gap rộng.
   ========================================================================== */
.hb-faq-grid-section.hb-faq-grid-section--mobile {
    /* 2 class gộp lại (specificity cao hơn 1 class) để chắc chắn thắng rule
       "height: auto" của @media (max-width: 768px) bên dưới - cùng 1 class
       .hb-faq-grid-section, cùng độ ưu tiên, rule nào đứng sau file thắng nếu
       không tăng specificity ở đây. */
    height: 100vh;
}
.hb-faq-grid-section--mobile .hb-container {
    padding-top: 0;
    padding-bottom: 0;
}
/* Dùng --hb-fs-h3 (24px) để khớp đúng cỡ tiêu đề của mọi khối mobile khác
   (About, Advantage, Proof, Product-series...) - trước đây lệch còn h4 (18px).
   margin-bottom cũng đồng bộ var(--hb-space-6) - trước đây giảm còn space-4 để
   né tràn khỏi 100vh, nhưng section này đã được ép height:auto ở mobile
   (@media max-width:768px, xem .hb-faq-grid-section) nên không còn ràng buộc
   chiều cao đó nữa, hạ margin thấp hơn các khối khác chỉ còn là lệch thừa. */
.hb-faq-title--mobile {
    font-size: var(--hb-fs-h3);
    margin-bottom: var(--hb-space-6);
    letter-spacing: 1px;
}
.hb-faq-grid-section--mobile .hb-faq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.hb-faq-grid-section--mobile .hb-faq-item {
    background: var(--hb-primary-hover);
    border: none;
    padding: var(--hb-space-4) var(--hb-space-3);
    min-height: 90px;
}
.hb-faq-grid-section--mobile .hb-faq-text {
    font-size: var(--hb-fs-xs);
    line-height: 1.5;
    margin-bottom: var(--hb-space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hb-faq-grid-section--mobile .hb-faq-line {
    width: 24px;
    height: 1px;
    box-shadow: none;
}
/* Câu trả lời: .hb-faq-answer vốn chỉ hiện qua :hover (dùng chung CSS với
   desktop) - mobile không có hover thật, thêm class .is-active (gán bằng JS
   khi chạm) để bật/tắt tương tự. Thu nhỏ cỡ chữ/padding cho vừa ô ~172px. */
.hb-faq-grid-section--mobile .hb-faq-item.is-active .hb-faq-answer {
    opacity: 1;
}
.hb-faq-grid-section--mobile .hb-faq-answer {
    padding: var(--hb-space-3);
    font-size: var(--hb-fs-xs);
    line-height: 1.5;
}
.hb-faq-link--mobile {
    display: block;
    text-align: center;
    margin-top: var(--hb-space-5);
}

/* ==========================================================================
   BLOG "KHOẢNH KHẮC VINH QUANG" (Mobile) - slider full màn hình 100svh, nền
   đen. Trước đây nằm trong <style> rời ngay trong mobile/home.blade.php với
   màu hex cứng (#121212, #c39c5d, #fff...) - chuyển hẳn về đây, dùng đúng
   token design system để đồng nhất với các khối mobile khác.
   ========================================================================== */
.hb-blog-mobile-section {
    position: relative;
    width: 100%;
    height: 100svh;
    background: var(--hb-black);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hb-blog-mobile-slider {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
}
.hb-blog-mobile-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
    background: var(--hb-black);
    z-index: 1;
}
.hb-blog-mobile-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
.hb-blog-mobile-img {
    height: 55%;
    width: 100%;
    padding: var(--hb-space-6);
    box-sizing: border-box;
}
.hb-blog-mobile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hb-blog-mobile-content {
    height: 45%;
    padding: 0 var(--hb-space-6) var(--hb-space-20) var(--hb-space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}
.hb-blog-mobile-tag {
    background: var(--hb-btn-primary-bg);
    color: var(--hb-btn-primary-text);
    font-family: var(--hb-font, "Roboto", sans-serif);
    font-size: var(--hb-fs-sm);
    font-weight: var(--hb-fw-medium);
    padding: var(--hb-space-2) var(--hb-space-4);
    margin-bottom: var(--hb-space-4);
    display: inline-block;
}
.hb-blog-mobile-title {
    font-family: var(--hb-font, "Roboto", sans-serif);
    font-size: var(--hb-fs-h3);
    color: var(--hb-white);
    margin: 0 0 var(--hb-space-3);
    line-height: var(--hb-lh-tight);
    font-weight: var(--hb-fw-regular);
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hb-blog-mobile-title a{
    color: #fff;
    text-transform: capitalize;
}
.hb-blog-mobile-desc {
    font-family: var(--hb-font, "Roboto", sans-serif);
    font-size: var(--hb-fs-body);
    color: rgba(255, 255, 255, 0.7);
    line-height: var(--hb-lh-relaxed);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hb-blog-mobile-controls {
    position: absolute;
    bottom: var(--hb-space-8);
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--hb-space-3);
    z-index: 10;
}

@media (max-width: 1024px) {
    .hb-faq-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .hb-faq-container {
        height: auto;
        min-height: 100vh;
    }
    .hb-faq-item {
        padding: 40px 20px;
    }
}

@media (max-width: 768px) {
    .hb-faq-grid {
        grid-template-columns: 1fr;
    }
    .hb-faq-grid-section,
    .hb-advantage-section,
    .hb-highlight-section,
    .hb-contact-section {
        height: auto;
        padding: var(--hb-space-16) 0;
    }
    
}







/* ==========================================================================
   CUON TUNG KHOI (fullpage) - xem hb-fullpage-scroll.js o cuoi trang
   ========================================================================== */
@media (min-width: 1025px) {
    .hb-hero-banner,
    .hb-video-section,
    .hb-cat-hero-section,
    .hb-cert-section,
    .hb-faq-grid-section,
    .hb-advantage-section,
    .hb-contact-section {
        height: 100vh;
        overflow: hidden;
    }
}
/* ==========================================================================
   VIDEO SECTION (100vh)
   ========================================================================== */
.hb-video-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hb-black);
}

/* Video giữ đúng tỉ lệ thật (không kéo giãn/crop như object-fit:cover trước
   đây) - chỉ giới hạn không vượt quá khung 100vh, phần dư ra 2 bên/trên dưới
   hiện nền đen của .hb-video-section, đúng kiểu letterbox trong ảnh mẫu. */
.hb-video-bg {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 0;
}




/* ==========================================================================
   6. CONTACT FORM SECTION
   ========================================================================== */
.hb-contact-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hb-contact-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 1;
}

.hb-contact-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start; 
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.hb-contact-form-wrap {
    width: 580px; /* Increased from 450px */
    background: #ffffff;
    padding: 70px 60px; /* Increased padding */
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border-radius: 0;
}

.hb-contact-icon {
    width: 64px; /* Increased */
    height: 64px; /* Increased */
    background: var(--hb-text-main);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: #ffffff;
    font-size: 24px; /* Increased */
    font-weight: 400;
}



.hb-contact-desc {
    text-align: center;
    font-size: var(--hb-fs-body); /* Increased from 13px */
    color: var(--hb-neutral-500);
    margin-bottom: 35px;
    line-height: 1.6;
}

.hb-form-group {
    margin-bottom: var(--hb-space-6); /* Increased */
}

.hb-form-input {
    width: 100%;
    height: 54px; /* Increased from 45px */
    border: 1px solid #e0e0e0;
    padding: 0 20px;
    font-size: var(--hb-fs-body); /* Increased from 14px */
    color: var(--hb-neutral-900);
    outline: none;
    transition: border-color 0.3s;
    background: #ffffff;
    border-radius: 0;
}

.hb-form-input:focus {
    border-color: #b71c1c;
}

.hb-btn-submit {
    width: 100%;
    height: 54px; /* Increased from 45px */
    background-color: #b71c1c;
    color: #ffffff;
    border: none;
    font-size: var(--hb-fs-h4); /* Increased from 16px */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 0;
}

.hb-btn-submit:hover {
    background-color: #d32f2f;
}

.hb-form-msg {
    margin-top: 15px;
    font-size: var(--hb-fs-body);
    text-align: center;
}
.hb-form-msg.is-success {
    color: #2e7d32;
}

@media (max-width: 991px) {
    .hb-contact-section {
        height: auto;
        padding: var(--hb-space-16) 0;
    }
    .hb-contact-bg {
        opacity: 0.3;
    }
    .hb-contact-container {
        justify-content: center;
    }
    .hb-contact-form-wrap {
        width: 100%;
        max-width: 500px;
        padding: 50px 40px;
    }
}
/* .hb-contact-section--mobile chỉ có ở mobile - gộp 2 class để thắng rule
   "height: auto" ngay phía trên (cùng .hb-contact-section, cùng độ ưu
   tiên), theo đúng quy chuẩn "mọi khối cao bằng màn hình". */
.hb-contact-section.hb-contact-section--mobile {
    height: 100vh;
}
.hb-contact-section--mobile .hb-contact-form-wrap {
    padding: var(--hb-space-10) var(--hb-space-6);
}



/* ==========================================================================
   7. COMPETITIVE ADVANTAGE
   ========================================================================== */
.hb-advantage-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    background-color: #111;
    overflow: hidden;
}

.hb-advantage-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.hb-advantage-left {
    flex: 0 0 45%;
    padding-right: 50px;
    color: #fff;
}



.hb-advantage-subtitle {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: var(--hb-space-12);
    color: var(--hb-secondary);
    letter-spacing: 1px;
}

.hb-advantage-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.hb-adv-icon-svg {
    color: var(--hb-secondary);
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.hb-adv-contact-label {
    font-size: var(--hb-fs-h4);
    color: #cccccc;
    margin-bottom: var(--hb-space-4);
    display: flex;
    align-items: center;
    gap: 10px;
}

.hb-adv-phone-number {
    color: var(--hb-secondary);
    font-size: 28px;
    font-weight: 500;
    margin-left: var(--hb-space-3);
}

.hb-adv-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 50px;
    font-size: var(--hb-fs-h4);
    font-weight: 500;
    color: var(--hb-secondary);
    background: transparent;
    border: 1px solid var(--hb-secondary);
    border-radius: 0;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 1.5px;
    margin-top: 25px;
}

.hb-adv-phone-btn:hover {
    background: var(--hb-secondary);
    color: #ffffff;
}

.hb-advantage-right {
    flex: 0 0 55%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hb-adv-image {
    max-width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}

@media (max-width: 991px) {
    .hb-advantage-container {
        flex-direction: column;
        text-align: center;
    }
    .hb-advantage-left {
        flex: 0 0 100%;
        padding-right: 0;
        margin-bottom: var(--hb-space-12);
    }
    .hb-advantage-contact {
        align-items: center;
    }
    .hb-advantage-right {
        flex: 0 0 100%;
    }
    
    .hb-advantage-subtitle {
        font-size: var(--hb-fs-h4);
    }
    .hb-advantage-section {
        height: auto;
        padding: var(--hb-space-16) 0;
    }
}

/* ==========================================================================
   COMPETITIVE ADVANTAGE (Mobile) - ảnh infographic lên trước (đổi thứ tự
   HTML trong mobile/home.blade.php), phần chữ/nút bên dưới thu gọn riêng
   thay vì dùng size desktop (tiêu đề 40px, số hotline 28px quá to cho màn
   hình hẹp). Class .hb-advantage-section--mobile chỉ có ở mobile, luôn áp
   dụng không cần media query.
   ========================================================================== */
.hb-advantage-section.hb-advantage-section--mobile {
    /* 2 class gộp để thắng rule "height: auto" ở @media (max-width: 991px)
       phía trên (cùng 1 class .hb-advantage-section, cùng độ ưu tiên). */
    height: 100vh;
}
.hb-advantage-section--mobile .hb-adv-image {
    max-height: 42vh;
}
.hb-advantage-section--mobile .hb-advantage-right {
    margin-bottom: var(--hb-space-8);
}
.hb-advantage-section--mobile .hb-advantage-left {
    margin-bottom: 0;
}
.hb-advantage-section--mobile .hb-section-title {
    font-size: var(--hb-fs-h3);
    margin-bottom: var(--hb-space-6);
}
.hb-advantage-section--mobile .hb-adv-contact-label {
    font-size: var(--hb-fs-sm);
    flex-wrap: wrap;
    justify-content: center;
}
.hb-advantage-section--mobile .hb-adv-phone-number {
    font-size: var(--hb-fs-h4);
    margin-left: var(--hb-space-2);
}
.hb-advantage-section--mobile .hb-adv-phone-btn {
    padding: var(--hb-space-3) var(--hb-space-6);
    font-size: var(--hb-fs-sm);
    margin-top: var(--hb-space-4);
}









/* ==========================================================================
   8. PRODUCT HIGHLIGHT SECTION
   ========================================================================== */
.hb-highlight-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #eee4dc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Cấu trúc Flexbox Logic mới (Không dùng absolute chắp vá) */
.hb-highlight-container {
    position: relative;
    width: 100%;
    max-width: 1750px; 
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px; /* Chừa chỗ cho mũi tên */
}

/* Panel trái (Nhỏ hơn) */
.hb-highlight-left-box {
    position: relative;
    flex: 0 0 32%; /* Cố định 32% chiều rộng */
    min-width: 380px;
    height: 92%; /* Cao hơn */
    background: linear-gradient(180deg, #aa8a72, #f4ece1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    z-index: 2;
    box-shadow: 20px 0 50px rgba(0,0,0,0.1);
}

/* Ảnh phải (Lớn hơn) */
.hb-hl-right-bg {
    position: relative;
    flex: 1; /* Tự động co giãn chiếm phần lớn không gian còn lại */
    height: 100%;
    background-size: cover;
    background-position: center right;
    z-index: 1;
    margin-left: -5%; /* Kéo sang trái 5% để tạo độ đè lấp logic */
}

/* Slider buttons */
.hb-highlight-container 
.hb-highlight-container 
.hb-highlight-container 

/* Nội dung bên trong panel */
.hb-hl-coin {
    width: 140px;
    margin-bottom: var(--hb-space-5);
    position: relative;
    z-index: 2;
}

.hb-hl-title-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--hb-space-12);
    width: 100%;
}

.hb-hl-pattern {
    width: 100%;
    max-width: 280px;
}

.hb-hl-title {
    position: absolute;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 2px;
    font-family: var(--hb-font, "Roboto", sans-serif);
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hb-hl-desc {
    margin-bottom: 60px;
    color: #4a4036;
}

.hb-hl-desc h4 {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: var(--hb-space-4);
    letter-spacing: 1px;
    color: #4a4036;
}

.hb-hl-desc p {
    font-size: var(--hb-fs-h4);
    color: #85796a;
}

.hb-hl-prod-img {
    width: 280px;
    height: auto;
}


/* ==========================================================================
   STYLES EXTRACTED FROM HOME.BLADE.PHP
   ========================================================================== */

.hb-factory-section {
    position: relative;
    height: 100vh;
    background-color: #0c0908;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}


.hb-factory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--hb-space-8);
    width: 100%;
    height: 65vh; /* Khống chế chiều cao 2 hàng để vừa vặn trong 1 màn hình */
}
.hb-factory-img-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0); /* Tạo layer GPU riêng để chống giật lag */
}
.hb-factory-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    transform: translateZ(0);
    will-change: transform;
}
.hb-factory-img-item:hover img {
    transform: scale(1.05) translateZ(0);
}

@media (max-width: 991px) {
    .hb-factory-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        height: auto;
        gap: 10px;
    }
    .hb-factory-img-item {
        aspect-ratio: 1 / 1;
    }
    .hb-factory-section {
        height: auto;
        padding: var(--hb-space-16) 0;
    }
}


.hb-faq-item {
    position: relative;
    overflow: hidden;
}
.hb-faq-answer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(20, 15, 10, 0.95); /* Tông nền tối sang trọng */
    color: #ebdccb; /* Chữ màu vàng kem */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    opacity: 0;
    transition: opacity 0.4s ease;
    text-align: center;
    font-size: var(--hb-fs-body);
    line-height: 1.6;
    z-index: 2;
    box-sizing: border-box;
}
.hb-faq-item:hover .hb-faq-answer {
    opacity: 1;
}


#hb-product-series {
    background-color: #f7f7f7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    /* Đây là khối DUY NHẤT trong danh sách "cuộn từng khối" (11 khối, xem
       hb-fullpage-scroll.js) thiếu overflow:hidden - nếu tên danh mục dài
       xuống dòng hoặc thẻ sản phẩm cao hơn bình thường, nội dung sẽ tràn
       xuống ĐÈ LÊN khối kế tiếp thay vì bị giữ gọn trong đúng 1 màn hình
       như 10 khối còn lại, khiến cảm giác "chưa full màn" khi cuộn tới. */
    overflow: hidden;
}

.hb-ps-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--hb-space-12);
}
.hb-ps-tab-item {
    font-size: var(--hb-fs-body);
    color: var(--hb-text-main);
    cursor: pointer;
    padding: 10px 35px;
    border: 1px solid transparent;
    transition: all 0.3s;
}
.hb-ps-tab-item.active {
    border: 1px solid #666;
}
.hb-ps-tab-sep {
    width: 1px;
    height: 24px;
    background-color: var(--hb-neutral-400);
    margin: 0 15px;
}

.hb-ps-slider-container {
    position: relative;
    width: 100%;
    max-width: 1750px;
    padding: 0 70px; /* Nhường chỗ cho 2 nút 2 bên */
    margin: 0 auto;
}

.hb-ps-slider-container .hb-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Nút slider tuyệt đối 2 bên */
.hb-ps-slider-container .hb-nav-btn.prev {
    left: 10px;
}
.hb-ps-slider-container .hb-nav-btn.next {
    right: 10px;
}

.hb-ps-gallery {
    display: flex;
    gap: var(--hb-space-8);
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 5px; /* Thêm padding trên dưới để không bị cắt box-shadow */
}
/* Thuộc tính HTML "hidden" (dùng để ẩn/hiện panel theo tab) bị "display: flex"
   ở trên đè mất vì cùng độ ưu tiên với rule [hidden] mặc định của trình
   duyệt - phải khai báo lại rõ ràng ở đây thì mới thực sự ẩn được panel. */
.hb-ps-gallery[hidden] {
    display: none;
}
.hb-ps-gallery::-webkit-scrollbar {
    display: none;
}
.hb-ps-card {
    flex: 0 0 calc(25% - 22.5px);
    scroll-snap-align: start;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hb-ps-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hb-ps-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.hb-ps-card-info {
    padding: 10px 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hb-ps-card-title {
    font-size: var(--hb-fs-h4);
    color: var(--hb-text-main);
    margin: 0 0 10px 0;
    font-weight: 400;
    text-align: center;
}
.hb-ps-card-prices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hb-space-4);
    margin: 0;
}
.hb-ps-price-current {
    font-size: 22px;
    color: #c9302c;
    font-weight: bold;
}
.hb-ps-price-old {
    font-size: var(--hb-fs-body);
    color: #999;
    text-decoration: line-through;
}

/* Danh mục chưa ghim sản phẩm nào (home_products rỗng) - căn giữa cả chiều
   ngang lẫn dọc trong khung gallery, cùng chiều cao với ảnh sản phẩm 1:1 */
.hb-ps-card-empty {
    flex: 1 0 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #999;
    font-size: var(--hb-fs-body);
}

/* Thẻ Xem Thêm (See More) */
.hb-ps-card-more {
    justify-content: center;
}
.hb-ps-plus {
    position: relative;
    width: 80px; /* Dấu cộng to hơn */
    height: 80px;
    margin: auto;
}
.hb-ps-plus::before, .hb-ps-plus::after {
    content: '';
    position: absolute;
    background-color: #8c7361;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.hb-ps-plus::before {
    width: 100%;
    height: 1px;
}
.hb-ps-plus::after {
    height: 100%;
    width: 1px;
}

@media (max-width: 991px) {
    .hb-ps-slider-container { 
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        padding: 0; 
    }
    .hb-ps-slider-container .hb-nav-btn { display: none; }
    .hb-ps-gallery {
        /* Đổi từ var(--hb-space-6)=24px sang var(--hb-mobile-gutter)=14px để
           khớp đúng lề trái/phải của mọi khối khác trên mobile (trước đây
           đây là khối duy nhất lệch 24px). */
        padding: 0 var(--hb-mobile-gutter);
        /* Chỉ "padding" thì lề trái/phải chỉ đúng lúc đứng yên (đầu/cuối danh
           sách) - khi kéo/vuốt qua các thẻ ở giữa, thẻ dán sát mép màn hình vì
           padding không áp dụng cho vị trí snap ở giữa. scroll-padding giữ
           đúng khoảng lề này ở MỌI vị trí snap, không riêng lúc đứng yên. */
        scroll-padding-inline: var(--hb-mobile-gutter);
    }
    .hb-ps-card {
        flex: 0 0 calc(50% - 15px);
        scroll-snap-align: start;
        background-color: transparent;
    }
    .hb-ps-tabs {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 5px var(--hb-mobile-gutter);
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .hb-ps-tabs::-webkit-scrollbar {
        display: none;
    }
    .hb-ps-tab-item { 
        padding: 8px 15px; 
        white-space: nowrap;
        flex-shrink: 0;
    }
    .hb-ps-tab-sep {
        flex-shrink: 0;
    }
    /* Trước đây bị ép height:auto trên mobile - giờ giữ nguyên 100vh dùng
       chung với desktop (đã khai báo ở #hb-product-series gốc) theo đúng
       quy chuẩn "mọi khối cao bằng màn hình" áp dụng cho toàn bộ trang. */
}
@media (max-width: 576px) {
    .hb-ps-gallery {
        gap: var(--hb-space-4);
        padding: 0 var(--hb-mobile-gutter);
    }
    /* Thẻ to hơn (65% -> 78% chiều rộng) + ảnh đổi từ vuông 1:1 sang dọc 4:5
       (khớp đúng hình chai sản phẩm thật) - trước đây ảnh chỉ cao ~210px
       trong khi cả khối chiếm 100vh (~812px), nhìn "mỏng"/trống trải quá
       nhiều so với không gian được cấp. */
    .hb-ps-card {
        flex: 0 0 calc(78% - 15px);
    }
    .hb-ps-card-img {
        aspect-ratio: 4 / 5;
    }
    .hb-ps-card-title {
        font-size: var(--hb-fs-body);
    }
    .hb-ps-price-current {
        font-size: 18px;
    }
    .hb-ps-price-old {
        font-size: var(--hb-fs-sm);
    }
}

/* ==========================================================================
   SẢN PHẨM BÁN CHẠY (Mobile) - thay cho nội dung cũ trong #hb-product-series
   (mỗi danh mục 1 hàng thẻ nhỏ cuộn ngang) - giờ là dải thẻ sản phẩm cuộn
   ngang (thẻ đầu gắn ribbon "Bán chạy nhất"), theo layout mẫu (2026-09-21)
   nhưng gọn lại thành 1 dải cuộn thay vì hero lớn + lưới 2 cột - thấp hơn
   nhiều so với bản hero+lưới cũ (đã thử bỏ hẳn ngoại lệ height:auto để vừa
   100vh như 10 khối kia, nhưng đo thực tế trên mobile vẫn cao hơn 1 màn hình
   ~90-100px do link "Xem tất cả" nằm dưới dải thẻ - giữ lại ngoại lệ height:
   auto, chỉ là bản auto này NGẮN hơn hẳn bản hero+lưới trước).
   Class .hb-ps-tabs/-tab-item/-tab-sep/-panel/-card-empty dùng lại nguyên vẹn
   (không đổi CSS) - chỉ đổi PHẦN NỘI DUNG mỗi tab.
   ========================================================================== */
@media (max-width: 991px) {
    #hb-product-series {
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: var(--hb-space-8) 0;
        background-color: var(--hb-neutral-50);
    }
    /* #hb-product-series là flex column với align-items:center (rule gốc,
       dùng để căn giữa layout desktop cũ) - .hb-container không tự đặt
       width nên dưới align-items:center nó bị co/giãn theo NỘI DUNG thay vì
       lấp đầy chiều ngang (shrink-to-fit), khiến panel chứa dải cuộn ngang
       ".hb-bestseller-scroll" (và link "Xem tất cả" bên dưới) tràn rộng hơn
       màn hình thay vì bị giữ đúng viewport như trước (trước bị
       overflow:hidden của rule gốc che mất, giờ overflow:visible nên lộ ra).
       Ép width:100% để mỗi .hb-container con lấp đầy đúng chiều ngang thay
       vì co theo nội dung cuộn bên trong nó. */
    #hb-product-series > .hb-container {
        width: 100%;
    }
    #hb-product-series .hb-ps-panel {
        min-width: 0;
    }
    /* Gợi ý "còn tab để vuốt" bằng dải mờ dần bên phải thay vì để chữ bị cắt
       cụt lởm chởm ngay mép màn hình như trước. */
    .hb-ps-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }
}
.hb-bestseller-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hb-space-2) var(--hb-space-4);
    margin-bottom: var(--hb-space-5);
}
.hb-bestseller-title {
    display: flex;
    align-items: center;
    gap: var(--hb-space-3);
    font-family: var(--hb-font);
    font-size: var(--hb-fs-h4);
    font-weight: var(--hb-fw-bold);
    color: var(--hb-text-main);
    text-transform: uppercase;
    line-height: var(--hb-lh-tight);
    margin: 0;
}
.hb-bestseller-accent {
    flex: 0 0 auto;
    display: block;
    width: 4px;
    align-self: stretch;
    background: var(--hb-secondary);
}
.hb-bestseller-tag {
    font-family: var(--hb-font);
    font-size: var(--hb-fs-xs);
    font-weight: var(--hb-fw-bold);
    color: var(--hb-secondary);
    text-transform: uppercase;
    white-space: nowrap;
    margin-left: auto;
}

/* ---- Dải thẻ sản phẩm cuộn ngang (đồng bộ .hb-proof-badges-scroll/-card,
   .hb-cat-badges-scroll liền kề - cùng padding-bottom giữ chỗ cho track cuộn,
   cùng ẩn scrollbar webkit) ---- */
.hb-bestseller-scroll {
    display: flex;
    gap: var(--hb-space-4);
    overflow-x: auto;
    padding: 0 var(--hb-mobile-gutter) var(--hb-space-1);
    margin: 0 calc(var(--hb-mobile-gutter) * -1) var(--hb-space-5);
    scroll-snap-type: x proximity;
    /* Thiếu dòng này thì trình duyệt tự cuộn lệch sẵn đúng bằng padding-left
       lúc vừa tải trang (để card đầu "snap" sát mép khung nhìn) - khiến lề
       trái nhìn như mất hẳn dù đã có padding. scroll-padding-inline giữ đúng
       khoảng lề ở MỌI vị trí snap, kể cả lúc đứng yên ban đầu (giống cách
       .hb-ps-gallery gốc đã xử lý). */
    scroll-padding-inline: var(--hb-mobile-gutter);
}
.hb-bestseller-scroll::-webkit-scrollbar {
    display: none;
}
.hb-bestseller-card {
    position: relative;
    flex: 0 0 42%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--hb-white);
    border: 1px solid var(--hb-border);
    text-decoration: none;
}
.hb-bestseller-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--hb-secondary);
    color: var(--hb-btn-primary-text);
    font-family: var(--hb-font);
    font-size: 10px;
    font-weight: var(--hb-fw-bold);
    text-transform: uppercase;
    padding: 3px var(--hb-space-2);
}
.hb-bestseller-card-img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.hb-bestseller-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hb-bestseller-discount {
    position: absolute;
    top: var(--hb-space-2);
    right: var(--hb-space-2);
    background: var(--hb-danger);
    color: var(--hb-white);
    font-family: var(--hb-font);
    font-size: 10px;
    font-weight: var(--hb-fw-bold);
    padding: 2px var(--hb-space-2);
}
.hb-bestseller-card-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--hb-space-3);
}
.hb-bestseller-card-title {
    font-family: var(--hb-font);
    font-size: var(--hb-fs-sm);
    font-weight: var(--hb-fw-bold);
    color: var(--hb-text-main);
    line-height: var(--hb-lh-tight);
    margin: 0 0 var(--hb-space-2);
    /* Giới hạn 2 dòng, thừa thì "..." - tên sản phẩm dài không đẩy lệch chiều
       cao thẻ so với thẻ bên cạnh trong cùng dải cuộn. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hb-bestseller-card-prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--hb-space-2);
    margin-bottom: var(--hb-space-2);
}
.hb-bestseller-price-current {
    font-family: var(--hb-font);
    font-size: var(--hb-fs-body);
    font-weight: var(--hb-fw-bold);
    color: var(--hb-price);
}
.hb-bestseller-price-old {
    font-family: var(--hb-font);
    font-size: var(--hb-fs-xs);
    color: var(--hb-text-muted);
    text-decoration: line-through;
}
.hb-bestseller-card-btn {
    display: block;
    text-align: center;
    background: var(--hb-primary);
    color: var(--hb-white);
    font-family: var(--hb-font);
    font-size: var(--hb-fs-xs);
    font-weight: var(--hb-fw-bold);
    text-transform: uppercase;
    padding: var(--hb-space-2) 0;
    margin-top: auto;
}

/* ---- Link "Xem tất cả sản phẩm" ---- */
.hb-bestseller-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hb-space-2);
    width: 100%;
    background: var(--hb-white);
    border: 1px solid var(--hb-border);
    color: var(--hb-text-main);
    font-family: var(--hb-font);
    font-size: var(--hb-fs-sm);
    font-weight: var(--hb-fw-bold);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--hb-space-3) 0;
}


#custom-hb-blog {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #0c0908;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#custom-hb-blog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background-color: #171311;
    z-index: 1;
}
#custom-hb-blog .hb-blog-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1500px;
    height: 100%;
    margin: 0 auto;
}
#custom-hb-blog .hb-blog-slide {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 40px;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
#custom-hb-blog .hb-blog-slide.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}
#custom-hb-blog .hb-blog-left {
    flex: 0 0 52%;
    max-width: 52%;
    padding-right: 40px;
}
#custom-hb-blog .hb-blog-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#custom-hb-blog .hb-blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#custom-hb-blog .hb-blog-right {
    flex: 0 0 48%;
    max-width: 48%;
    padding-left: 20px;
}
#custom-hb-blog .hb-blog-tag {
    display: inline-block;
    background-color: #ba9667;
    color: #fff;
    font-size: var(--hb-fs-sm);
    font-weight: 500;
    padding: 6px 16px;
    margin-bottom: var(--hb-space-6);
    letter-spacing: 1px;
}
#custom-hb-blog .hb-blog-title {
    font-size: 32px;
    font-weight: 300;
    color: #ebdccb;
    line-height: 1.4;
    margin-bottom: var(--hb-space-6);
    font-family: var(--hb-font, "Roboto", sans-serif);
}

#custom-hb-blog .hb-blog-title a{
    color :white;
    text-transform: capitalize;
}
#custom-hb-blog .hb-blog-desc {
    font-size: var(--hb-fs-body-lg);
    color: #fff;
    line-height: 1.6;
    margin-bottom: 70px;
    max-width: 90%;
}
#custom-hb-blog .hb-blog-nav {
    display: flex;
    gap: var(--hb-space-4);
}



/* Mobile responsive */
@media (max-width: 991px) {
    #custom-hb-blog { height: auto; padding: var(--hb-space-16) 0; }
    #custom-hb-blog .hb-blog-slide {
        flex-direction: column;
        padding: 0 20px;
        position: absolute;
    }
    #custom-hb-blog .hb-blog-slide.active {
        position: relative;
    }
    #custom-hb-blog .hb-blog-left, #custom-hb-blog .hb-blog-right {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }
    #custom-hb-blog .hb-blog-right {
        margin-top: 40px;
    }
    #custom-hb-blog::before {
        height: 50%;
    }
}



/* ==========================================================================
   NEW: CÔNG DỤNG SẢN PHẨM (Uses Section)
   ========================================================================== */
#hb-uses-section {
    height: 100vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.hb-uses-container {
    display: flex;
    align-items: center;
    gap: 80px;
}
.hb-uses-left {
    flex: 0 0 55%;
    max-width: 55%;
}
.hb-uses-gallery {
    display: flex;
    gap: var(--hb-space-5);
    
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 20px; /* Space for scrollbar */
}
/* Custom Webkit Scrollbar */
.hb-uses-gallery::-webkit-scrollbar {
    height: 6px;
}
.hb-uses-gallery::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0;
}
.hb-uses-gallery::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 0;
}
.hb-uses-gallery::-webkit-scrollbar-thumb:hover {
    background: var(--hb-text-main);
}

.hb-uses-img-card {
    flex: 0 0 calc(50% - 10px); /* 2 items per view */
    aspect-ratio: 1 / 2;
    scroll-snap-align: start;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}
.hb-uses-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.hb-uses-img-card:hover img {
    transform: scale(1.05);
}
.hb-uses-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    pointer-events: none;
}
.hb-uses-icon-bg {
    position: absolute;
    top: 20px;
    left: 40px;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2"/><path d="M20 60 Q 50 30 80 60" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"/><path d="M20 70 Q 50 40 80 70" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"/></svg>') no-repeat center/contain;
}
.hb-uses-img-title {
    position: absolute;
    top: 80px;
    left: 40px;
    color: #fff;
    writing-mode: vertical-rl;
    font-size: var(--hb-fs-h2);
    letter-spacing: 10px;
    font-family: var(--hb-font, "Roboto", sans-serif);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.hb-uses-right {
    flex: 0 0 calc(45% - 80px);
    max-width: calc(45% - 80px);
}
.hb-uses-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}
.hb-uses-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--hb-space-6);
    font-size: var(--hb-fs-body);
    line-height: 1.7;
    color: #666;
}
.hb-uses-list li svg {
    flex-shrink: 0;
    margin-right: 15px;
    color: var(--hb-secondary, #ba9667);
    margin-top: 2px;
}
.hb-uses-list li strong {
    color: #676767;
    font-weight: 500 !important;
    font-size: var(--hb-fs-h4);
    display: block;
    margin-bottom: 5px;
}
.hb-uses-list li div {
    flex: 1;
}
.hb-uses-right .hb-btn {
    border-radius: 0;
}

@media (max-width: 991px) {
    #hb-uses-section {
        height: auto;
        padding: var(--hb-space-16) 0;
    }
    .hb-uses-container {
        flex-direction: column;
        gap: var(--hb-space-8);
    }
    .hb-uses-left, .hb-uses-right {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }
    
    /* Redesign Mobile Swipe Gallery */
    .hb-uses-gallery {
        gap: var(--hb-space-4);
        padding-bottom: 0; /* Remove space for scrollbar */
    }
    .hb-uses-gallery::-webkit-scrollbar {
        display: none; /* Sleek mobile scroll */
    }
    .hb-uses-img-card {
        flex: 0 0 calc(70% - 10px); /* 1.5 Card Pattern */
        aspect-ratio: 3 / 4; /* Better height on mobile */
    }
    
    /* Redesign Premium List Cards */
    .hb-uses-list {
        margin-bottom: var(--hb-space-8);
    }
    .hb-uses-list li {
        background: var(--hb-neutral-50);
        padding: var(--hb-space-4) var(--hb-space-5);
        border-left: 4px solid var(--hb-secondary);
        align-items: center;
        box-shadow: var(--hb-shadow-sm);
        margin-bottom: var(--hb-space-3);
    }
    .hb-uses-list li svg {
        margin-top: 0;
        margin-right: var(--hb-space-4);
    }
    .hb-uses-list li strong {
        margin-bottom: 0;
        color: var(--hb-primary);
    }
    
    /* Full-width Mobile CTA */
    .hb-uses-right .hb-btn {
        width: 100%;
    }
}

/* ==========================================================================
   VỀ SẢN PHẨM (Mobile) - thay cho khối "Tinh hoa thảo dược" cũ. Bố cục dọc:
   nhãn nhỏ + tiêu đề lớn + mô tả canh giữa, lưới 2 ảnh có tag góc trên-trái.
   Chỉ dùng ở mobile/home.blade.php (#hb-about-mobile-section) - không đụng
   tới #hb-uses-section/.hb-uses-* vẫn đang dùng ở bản desktop.
   ========================================================================== */
#hb-about-mobile-section {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--hb-white);
    text-align: center;
    overflow: hidden;
}
.hb-about-mobile-title {
    font-family: var(--hb-font, "Roboto", sans-serif);
    font-size: var(--hb-fs-h3);
    font-weight: var(--hb-fw-bold);
    color: var(--hb-text-main);
    line-height: var(--hb-lh-tight);
    /* margin-bottom đồng bộ var(--hb-space-6) với các khối tiêu đề khác trên
       trang chủ mobile (Các dòng sản phẩm, Lợi thế cạnh tranh, Chứng nhận,
       Liên hệ...) - trước đây lệch space-5 (20px thay vì 24px). */
    margin: 0 0 var(--hb-space-6);
}
.hb-about-mobile-benefits {
    list-style: none;
    margin: 0 auto var(--hb-space-8);
    padding: 0 var(--hb-space-4);
    max-width: 340px;
    text-align: left;
}
.hb-about-mobile-benefits li {
    display: flex;
    align-items: center;
    font-family: var(--hb-font, "Roboto", sans-serif);
    font-size: var(--hb-fs-body);
    font-weight: var(--hb-fw-medium);
    color: var(--hb-primary);
    line-height: var(--hb-lh-relaxed);
    background: var(--hb-bg-soft);
    border-left: 3px solid var(--hb-secondary);
    padding: var(--hb-space-3) var(--hb-space-4);
    margin-bottom: var(--hb-space-3);
}
.hb-about-mobile-benefits li:last-child {
    margin-bottom: 0;
}
.hb-about-mobile-benefits li::before {
    content: "\2713";
    flex-shrink: 0;
    color: var(--hb-secondary);
    font-weight: var(--hb-fw-bold);
    margin-right: var(--hb-space-3);
}
.hb-about-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hb-space-3);
    padding: 0 var(--hb-space-4);
}
.hb-about-mobile-item {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden;
}
.hb-about-mobile-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}
/* ==========================================================================
   HỒ SƠ PHÁP LÝ & BẰNG CHỨNG (Mobile) - dải huy hiệu tròn viền vàng đồng,
   nền trắng, cuộn ngang. Thay cho khối carousel toàn màn hình nền tối kiểu
   cũ (.hb-proof-mobile-*, đã gỡ) - gọn hơn, đúng layout mẫu (2026-09-21).
   ========================================================================== */
.hb-proof-badges-section {
    width: 100%;
    padding: var(--hb-space-8) 0;
    background: var(--hb-white);
}
.hb-proof-badges-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--hb-space-5);
}
.hb-proof-badges-title {
    display: flex;
    align-items: center;
    gap: var(--hb-space-3);
    font-family: var(--hb-font);
    font-size: var(--hb-fs-h4);
    font-weight: var(--hb-fw-bold);
    color: var(--hb-text-main);
    text-transform: uppercase;
    line-height: var(--hb-lh-tight);
    margin: 0;
}
.hb-proof-badges-accent {
    flex: 0 0 auto;
    display: block;
    width: 4px;
    align-self: stretch;
    background: var(--hb-secondary);
}
.hb-proof-badges-verified {
    display: inline-flex;
    align-items: center;
    gap: var(--hb-space-1);
    font-family: var(--hb-font);
    font-size: var(--hb-fs-sm);
    font-weight: var(--hb-fw-bold);
    color: var(--hb-secondary);
    text-transform: uppercase;
    white-space: nowrap;
}
.hb-proof-badges-scroll {
    display: flex;
    gap: var(--hb-space-6);
    overflow-x: auto;
    padding-bottom: var(--hb-space-1);
}
.hb-proof-badges-scroll::-webkit-scrollbar {
    display: none;
}
.hb-proof-badges-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--hb-space-2);
    text-decoration: none;
    width: 150px;
}
.hb-proof-badges-thumb {
    position: relative;
    display: block;
    width: 150px;
    height: 190px;
    background: var(--hb-white);
    border: 1px solid var(--hb-border);
    overflow: hidden;
}
.hb-proof-badges-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hb-proof-badges-zoom {
    position: absolute;
    top: var(--hb-space-2);
    right: var(--hb-space-2);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hb-primary);
    color: var(--hb-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hb-proof-badges-label {
    font-family: var(--hb-font);
    font-size: var(--hb-fs-sm);
    font-weight: var(--hb-fw-bold);
    color: var(--hb-text-main);
    text-align: center;
    text-transform: uppercase;
    line-height: var(--hb-lh-tight);
}



/** thêm cho header **/
.hb-section-title.text-center.light-text.text-section-heathy{
    color:var(--hb-text-main);
}


#contacts{
    display: none;
}