/* ======================================= */
/* 0. BIẾN DÙNG CHUNG - chỉnh màu/độ bo góc ở đây sẽ áp dụng toàn site */
/* ======================================= */
:root {
    --primary: #2b60de;
    --primary-dark: #1a42a3;
    --navy: #1a2b4d;
    --accent: #ffd166;
    --danger: #d70018;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 2px 10px rgba(20, 30, 60, 0.05);
    --shadow-md: 0 10px 24px rgba(20, 30, 60, 0.10);
    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ======================================= */
/* 1. RESET & CƠ BẢN */
/* ======================================= */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', Tahoma, sans-serif; background: linear-gradient(180deg, #eef4ff 0%, #eef2fa 320px); color: #333; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1600px; margin: 30px auto; padding: 0 15px; }

/* ======================================= */
/* TOP BAR (thanh tiện ích trên cùng) */
/* ======================================= */
.top-bar { background-color: var(--navy); color: #cfd8ea; font-size: 13px; }
.top-bar-inner {
    max-width: 1600px; margin: 0 auto; padding: 8px 15px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
}
.top-bar-left a { color: var(--accent); font-weight: 700; animation: promo-glow 2.2s ease-in-out infinite; }
.top-bar-left a:hover { text-decoration: underline; }
@keyframes promo-glow {
    0%, 100% { text-shadow: 0 0 0 rgba(255, 209, 102, 0); }
    50% { text-shadow: 0 0 10px rgba(255, 209, 102, 0.75); }
}
.top-bar-right { display: flex; gap: 18px; flex-wrap: wrap; }
.top-bar-right span { white-space: nowrap; }

/* ======================================= */
/* HEADER CHÍNH */
/* ======================================= */
header { background: linear-gradient(135deg, var(--primary) 0%, #2450bd 100%); box-shadow: 0 2px 10px rgba(20,30,60,0.15); }
.header-inner {
    max-width: 1600px; margin: 0 auto; padding: 15px 15px;
    display: flex; align-items: center; gap: 25px; flex-wrap: wrap;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 36px; width: auto; display: block; }

/* Ô tìm kiếm */
.search-box { flex-grow: 1; min-width: 220px; display: flex; max-width: 560px; }
.search-box input {
    flex-grow: 1; border: none; outline: none; padding: 11px 16px; font-size: 14px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm); min-width: 0;
}
.search-box button {
    border: none; background: var(--accent); color: var(--navy); font-size: 16px; font-weight: bold;
    padding: 0 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.search-box button:hover { background: #ffc233; }
.search-box button:active { transform: scale(0.96); }

/* Hotline / nút liên hệ nhanh bên phải header */
.header-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; flex-shrink: 0; }
.action-item { display: flex; align-items: center; gap: 8px; color: #fff; }
.action-icon { font-size: 22px; }
.action-text { font-size: 14px; font-weight: 700; line-height: 1.3; }
.action-text small { display: block; font-weight: 400; font-size: 11px; color: #cfe0ff; }
.action-cta { background: rgba(255,255,255,0.14); padding: 8px 16px; border-radius: 20px; transition: background 0.2s, transform 0.2s; animation: cta-glow 2.4s ease-in-out infinite; }
.action-cta:hover { background: rgba(255,255,255,0.24); transform: translateY(-1px); }
@keyframes cta-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(255,209,102,0); }
    50% { box-shadow: 0 0 12px rgba(255,209,102,0.55); }
}

/* ======================================= */
/* NÚT LIÊN HỆ NỔI (FLOATING) */
/* ======================================= */
.floating-contact {
    position: fixed; right: 20px; bottom: 90px; z-index: 3000;
    display: flex; flex-direction: column; gap: 12px;
}
.fc-btn {
    position: relative;
    width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: var(--shadow-md); font-size: 24px;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.fc-btn:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 14px 28px rgba(20,30,60,0.22); }
.fc-btn img { width: 30px; height: 30px; object-fit: contain; }
.fc-phone { background: #2ecc71; color: #fff; }

/* Hiệu ứng "ping" lan toả nhẹ nhàng ở 3 nút liên hệ nổi - thu hút chú ý, mỗi nút lệch nhịp 1 chút */
.fc-btn::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
    animation: fc-ping 2.4s cubic-bezier(0,0,0.2,1) infinite; pointer-events: none;
}
.fc-zalo::after { background: rgba(0,104,255,0.55); animation-delay: 0s; }
.fc-mess::after { background: rgba(0,132,255,0.55); animation-delay: 0.6s; }
.fc-phone::after { background: rgba(46,204,113,0.55); animation-delay: 1.2s; }
@keyframes fc-ping {
    0% { transform: scale(1); opacity: 0.55; }
    75%, 100% { transform: scale(1.8); opacity: 0; }
}

/* ======================================= */
/* FOOTER */
/* ======================================= */
.site-footer { background: var(--navy); color: #b9c4de; margin-top: 40px; }
.footer-grid {
    max-width: 1600px; margin: 0 auto; padding: 45px 15px 30px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px;
}
.footer-col h4 { color: #fff; font-size: 16px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-col p { font-size: 13.5px; line-height: 1.8; margin: 6px 0; }
.footer-col a { transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 10px; font-size: 13.5px; }
.footer-about { line-height: 1.7; }
.footer-social { display: flex; flex-direction: column; gap: 10px; }
.footer-social a {
    background: rgba(255,255,255,0.08); padding: 8px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
    text-align: center; transition: background 0.2s;
}
.footer-social a:hover { background: rgba(255,255,255,0.18); }
.footer-bottom {
    text-align: center; padding: 16px; background: rgba(0,0,0,0.2); font-size: 13px; color: #8ea0c7;
}


/* ======================================= */
/* 2. BỐ CỤC CHÍNH (MAIN LAYOUT) CÓ SIDEBAR */
/* ======================================= */
/* main-layout giờ chỉ còn bọc sidebar + banner (các khối còn lại đã kéo ra full-width bên dưới,
   xem .full-width-sections). Dùng lại align-items:stretch để nền trắng của sidebar luôn kéo dài
   bằng chiều cao banner bên phải - không bị hụt/lộ nền xám nhạt của body phía dưới sidebar nữa. */
.main-layout { display: flex; gap: 20px; align-items: stretch; }

/* Các khối full-width phía dưới banner (video, trust-strip, các carousel sản phẩm) - dùng chung
   class .container để mép trái/phải luôn thẳng hàng với mép của .main-layout (tức thẳng hàng với
   mép trái của sidebar), không bị bó hẹp trong .content-area (phần bên phải sidebar) nữa. */
.full-width-sections { display: block; } /* các khối con (.product-section, .trust-strip) đã tự có margin-bottom riêng */

/* Menu bên trái - Chuẩn phong cách Hoàng Hà */
.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 10px 0;
    border: 1px solid #f0f0f0;
    /* KHÔNG dùng overflow:hidden ở đây - sẽ cắt mất flyout menu (position:absolute, left:100%) */
    position: relative; z-index: 50; /* để flyout (bên trong) nổi lên trên .content-area (banner...) */
}

.sidebar-title {
    background: var(--primary); color: #fff; font-weight: 700; font-size: 14.5px;
    padding: 13px 20px; letter-spacing: 0.3px;
    border-radius: var(--radius) var(--radius) 0 0;
    /* Reset kiểu <button> mặc định - trên desktop trông y hệt div cũ, không bấm được (không cần) */
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; border: none; font-family: inherit; cursor: default;
}
.sidebar-toggle-arrow { display: none; } /* Chỉ hiện mũi tên xổ/thu gọn trên mobile */
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li { position: relative; }

.sidebar-menu li a { 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 10px 20px; color: #444; font-size: 14px; font-weight: 500; 
    border-bottom: 1px solid #f8f8f8; transition: all 0.2s ease; 
}
.sidebar-menu li a .menu-icon { margin-right: 12px; color: #888; width: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.sidebar-menu li a .menu-icon-svg { display: block; }
.sidebar-menu li a .menu-text { flex-grow: 1; }
.sidebar-menu li a .menu-arrow { font-size: 10px; color: #ccc; transition: transform 0.2s ease; }

/* Hover Sidebar */
.sidebar-menu li a:hover { color: var(--primary); background-color: #f4f7ff; font-weight: 600; }
.sidebar-menu li a:hover .menu-icon { color: var(--primary); }
.sidebar-menu li a:hover .menu-arrow { color: var(--primary); transform: translateX(3px); }

/* Mục danh mục đang được chọn (trang category.php) */
.sidebar-menu li a.active-category { color: var(--primary); background-color: #eaf0ff; font-weight: 700; border-right: 3px solid var(--primary); }
.sidebar-menu li a.active-category .menu-icon,
.sidebar-menu li a.active-category .menu-arrow { color: var(--primary); }
.sidebar-menu li:last-child a { border-bottom: none; }

/* Flyout menu bên phải sidebar (kiểu mega-menu) - hiện khi hover vào 1 danh mục */
.sidebar-flyout {
    position: absolute; left: 100%; top: -1px; width: 380px; z-index: 200;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md);
    border: 1px solid #eef0f5; padding: 16px;
    opacity: 0; visibility: hidden; transform: translateX(-6px);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}
.has-flyout:hover .sidebar-flyout {
    opacity: 1; visibility: visible; transform: translateX(0);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.flyout-header { font-weight: 700; font-size: 14px; color: #222; margin-bottom: 12px; }
.flyout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.flyout-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #f8f9fa; border: 1px solid #f0f2f7; border-radius: var(--radius-sm); padding: 10px 6px;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.flyout-tile:hover { border-color: var(--primary); transform: translateY(-2px); }
.flyout-tile img { width: 100%; height: 60px; object-fit: contain; margin-bottom: 8px; }
.flyout-tile-label { font-size: 11.5px; font-weight: 600; color: #333; line-height: 1.3; }
.flyout-tile-count { font-size: 10.5px; color: #999; margin-top: 2px; }
.flyout-viewall {
    display: block; text-align: center; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid #f0f2f7; font-size: 13px; font-weight: 600; color: var(--primary);
}
.flyout-viewall:hover { text-decoration: underline; }
.flyout-empty { text-align: center; font-size: 12.5px; color: #999; padding: 18px 10px; margin: 0; }

@media (max-width: 1300px) {
    .sidebar-flyout { width: 320px; }
    .flyout-tile img { height: 50px; }
}
@media (max-width: 900px) {
    .sidebar-flyout { display: none; } /* Trên mobile bấm thẳng vào danh mục, không cần flyout */
}

.content-area { flex-grow: 1; min-width: 0; }


/* ======================================= */
/* 2b. DÃY VIDEO TIKTOK HOT (bên dưới banner, cuộn ngang) - dùng ẢNH THUMBNAIL THẬT, bấm mới mở
   video (iframe nhúng trực tiếp của TikTok hay bị lỗi không phát được nên đổi cách này cho chắc) */
.tiktok-row-item {
    flex-shrink: 0; width: 200px; display: block; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); border: 1px solid #eef0f5; background: #fff; cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.tiktok-row-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.tiktok-thumb-wrap { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #111; overflow: hidden; }
.tiktok-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); }
.tiktok-row-item:hover .tiktok-thumb-wrap img { transform: scale(1.05); }
.tiktok-play-badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    border: 2px solid rgba(255,255,255,0.8);
}
.tiktok-row-title { padding: 10px 12px; font-size: 12.5px; color: #333; line-height: 1.4; height: 52px; overflow: hidden; }

/* Nhãn nhỏ báo nguồn video (TikTok/YouTube) khi trộn chung 1 hàng - để khách biết đang xem gì */
.video-platform-badge {
    position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 20px;
    font-size: 10px; font-weight: 700; color: #fff; letter-spacing: 0.2px;
}
.video-platform-tiktok { background: rgba(0,0,0,0.65); }
.video-platform-youtube { background: rgba(215,0,24,0.9); }

/* ======================================= */
/* 3. DÀN BANNER (BENTO GRID) */
/* ======================================= */
.bento-banners {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px;
    gap: 15px; margin-bottom: 30px;
}

.banner-item {
    display: block; position: relative; width: 100%; height: 100%; background: transparent;
    border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 16px rgba(43,96,222,0.12);
    transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.banner-item:hover { box-shadow: 0 10px 26px rgba(43,96,222,0.22); transform: translateY(-2px); }
.banner-item img {
    width: 100%; height: 100%; display: block; transition: transform 0.4s var(--ease), filter 0.3s var(--ease);
    /* Độ sáng (--banner-brightness) đặt riêng theo từng banner trong DB (bảng banners, cột
       brightness - sửa qua admin/banners.php) vì có ảnh sáng sẵn không cần chỉnh thêm.
       Độ bão hòa/tương phản vẫn dùng chung cho đồng bộ màu sắc toàn site. */
    filter: brightness(var(--banner-brightness, 1.15)) saturate(1.28) contrast(1.06);
}
/* Banner chính: ảnh đã tự thiết kế đúng khổ 1200x960 khớp khung, cover không cắt mất gì đáng kể */
.banner-main img { object-fit: cover; }
/* Banner phụ: mỗi ảnh 1 tỷ lệ gốc khác nhau (không ép khổ) - dùng fill (đúng logic gốc vốn chạy
   tốt) để không bao giờ lộ viền/nền dư ra, chấp nhận co giãn nhẹ (không đáng kể vì tỷ lệ gốc các
   ảnh này vốn đã khá gần khung hiển thị). */
.banner-sub img { object-fit: fill; }
.banner-item:hover img { filter: brightness(calc(var(--banner-brightness, 1.15) + 0.08)) saturate(1.34) contrast(1.07); }

/* Hiệu ứng "lấp lánh" - 1 vệt sáng chéo quét qua banner định kỳ, tạo cảm giác bừng sáng bắt mắt */
.banner-item::before {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 3;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: skewX(-20deg); pointer-events: none;
    animation: banner-shine 4.5s ease-in-out infinite;
}
.banner-sub::before { animation-delay: calc(var(--shine-delay, 0) * 1s); }
.banner-item:nth-of-type(1)::before { --shine-delay: 0.3; }
.banner-item:nth-of-type(2)::before { --shine-delay: 0.9; }
.banner-item:nth-of-type(3)::before { --shine-delay: 1.5; }
.banner-item:nth-of-type(4)::before { --shine-delay: 2.1; }
@keyframes banner-shine {
    0% { left: -60%; }
    18%, 100% { left: 130%; }
}
.banner-sub:hover img { transform: scale(1.035); }
.banner-main { grid-column: span 2; grid-row: span 2; background: transparent; }

/* SLIDER CHÍNH CỦA BANNER TO */
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 1; }
.slide.active { opacity: 1; z-index: 2; }


/* ======================================= */
/* 4. KHU VỰC SẢN PHẨM & SLIDER (CAROUSEL) */
/* ======================================= */
.product-section {
    background-color: #ffffff; border-radius: var(--radius); padding: 22px 20px 20px; box-shadow: var(--shadow-sm); margin-bottom: 24px;
    border-top: 3px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, var(--primary), var(--accent));
    background-origin: border-box; background-clip: padding-box, border-box;
}

/* Màu nền xen kẽ cho các khối "... Nổi Bật" ở trang chủ (render_product_carousel tự gán vòng lặp
   6 màu) - nền chỉ ánh màu nhẹ theo hướng chéo (đậm ở góc, nhạt dần về giữa) để không lấn át thẻ
   sản phẩm màu trắng bên trong, viền trên đổi màu theo cho đồng bộ. */
.product-section.section-theme-1 { background-image: linear-gradient(135deg, #eaf1ff 0%, #fff 55%), linear-gradient(90deg, #2b60de, #6fa1ff); }
.product-section.section-theme-2 { background-image: linear-gradient(135deg, #f6efff 0%, #fff 55%), linear-gradient(90deg, #7c3aed, #c4b5fd); }
.product-section.section-theme-3 { background-image: linear-gradient(135deg, #fff5e6 0%, #fff 55%), linear-gradient(90deg, #f59e0b, #fcd34d); }
.product-section.section-theme-4 { background-image: linear-gradient(135deg, #ffeef5 0%, #fff 55%), linear-gradient(90deg, #ec4899, #fbcfe8); }
.product-section.section-theme-5 { background-image: linear-gradient(135deg, #e6fbff 0%, #fff 55%), linear-gradient(90deg, #06b6d4, #a5f3fc); }
.product-section.section-theme-6 { background-image: linear-gradient(135deg, #ecfdf1 0%, #fff 55%), linear-gradient(90deg, #16a34a, #86efac); }

/* Khối video đầu trang - làm nổi bật để tạo cảm giác uy tín ngay từ đầu (viền gradient rực rỡ
   + nền hơi ánh màu thay vì trắng phẳng, đỡ đơn điệu) */
.trust-video-section {
    border: 2px solid transparent;
    background:
        linear-gradient(135deg, #f1f5ff 0%, #fff 45%, #fff7ef 100%) padding-box,
        linear-gradient(120deg, var(--primary), #ff3b3b, var(--accent), var(--primary)) border-box;
    background-size: 200% 200%, 300% 300%;
    animation: trust-border-flow 6s ease infinite;
}
@keyframes trust-border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.section-title { font-size: 20px; letter-spacing: 0.3px; margin-bottom: 22px; display: flex; align-items: center; font-weight: 700; color: #2a2f3d; }
.section-title::before { content: ""; display: inline-block; width: 5px; height: 22px; background-color: var(--primary); margin-right: 12px; border-radius: 3px; }

/* Cấu trúc trượt ngang (thư viện Swiper - xem includes/footer.php phần khởi tạo .product-swiper) */
.product-swiper { position: relative; width: 100%; padding: 15px 4px 20px; }
.product-swiper .swiper-wrapper { align-items: stretch; }

/* THẺ SẢN PHẨM */
.product-card {
    background-color: #ffffff; border-radius: var(--radius); padding: 15px;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
    position: relative; border: 1px solid #eef0f5;
    width: 240px; flex-shrink: 0; box-sizing: border-box; height: auto;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); z-index: 10; }
.product-image { width: 100%; height: 200px; object-fit: contain; margin-bottom: 15px; transition: transform 0.3s var(--ease); }
.product-card:hover .product-image { transform: scale(1.04); }

/* Chi tiết thẻ sản phẩm */
.product-link { display: block; }
.product-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; height: 42px; overflow: hidden; color: #222; line-height: 1.4; }
.specs { font-size: 12px; color: #555; margin-bottom: 15px; background: #f8f9fa; padding: 10px; border-radius: var(--radius-sm); border: 1px solid #f0f0f0; }
.specs p { margin: 4px 0; }
.specs strong { color: #333; min-width: 45px; display: inline-block; }
.price-box { display: flex; flex-direction: column; margin-bottom: 15px; }
.old-price { text-decoration: line-through; color: #999; font-size: 13px; margin-bottom: 2px; }
.price { color: var(--danger); font-size: 18px; font-weight: bold; }
.btn-buy { background-color: var(--primary); color: #fff; text-align: center; display: block; padding: 10px; border-radius: var(--radius-sm); font-weight: 600; transition: background 0.25s var(--ease), transform 0.2s var(--ease); font-size: 14px; }
.btn-buy:hover { background-color: var(--primary-dark); color: white; transform: translateY(-1px); }
.discount-badge {
    position: absolute; top: 10px; right: 10px; background: var(--danger); color: white; font-size: 12px; font-weight: bold;
    padding: 4px 9px; border-radius: 20px; z-index: 5;
    animation: badge-pulse 1.8s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(215,0,24,0.5), 0 2px 6px rgba(215,0,24,0.35); }
    50% { box-shadow: 0 0 0 6px rgba(215,0,24,0), 0 2px 6px rgba(215,0,24,0.35); }
}


/* ======================================= */
/* 5. NÚT NEXT/PREV CỦA SLIDER (Swiper - restyle lại nút mặc định cho khớp giao diện web) */
/* ======================================= */
.product-swiper .swiper-button-prev,
.product-swiper .swiper-button-next {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(43, 96, 222, 0.9); color: #fff; z-index: 20;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    opacity: 0; visibility: hidden; /* Mặc định ẨN, chỉ hiện khi hover vào khối slider */
}
.product-swiper .swiper-button-prev::after,
.product-swiper .swiper-button-next::after { font-size: 16px; font-weight: 700; }
/* HIỆN nút khi hover (Swiper tự thêm class swiper-button-disabled khi đã tới mép cuộn) */
.product-swiper:hover .swiper-button-prev:not(.swiper-button-disabled),
.product-swiper:hover .swiper-button-next:not(.swiper-button-disabled) { opacity: 1; visibility: visible; }
.product-swiper .swiper-button-prev:hover,
.product-swiper .swiper-button-next:hover { background: var(--danger); }
.product-swiper .swiper-button-prev { left: -15px; }
.product-swiper .swiper-button-next { right: -15px; }
.product-swiper .swiper-button-disabled { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }


/* ======================================= */
/* 6. HIỆU ỨNG HOVER POPUP (TOOLTIP CHI TIẾT) */
/* ======================================= */
/* Dùng kiểu "portal": lúc hover, JS (xem includes/footer.php) chuyển hẳn thẻ .hover-detail
   ra ngoài document.body và định vị bằng position:fixed theo toạ độ thật của thẻ sản phẩm.
   Nhờ vậy popup thoát khỏi overflow:hidden của khung Swiper (không còn bị cắt nữa), và JS
   tự tính popup nên hiện bên phải hay bên trái thẻ tuỳ theo còn đủ chỗ trống bên phải màn
   hình hay không - thẻ nào đang ở gần rìa phải vùng nhìn thấy thì popup tự lật sang trái. */
.hover-detail {
    position: fixed;
    width: 260px;
    background: #ffffff;
    border-radius: var(--radius);
    border: 1.5px solid var(--primary);
    box-shadow: var(--shadow-md), 0 14px 30px rgba(20,30,60,0.22);
    overflow: hidden; /* để 3 khối màu con bên trong bo tròn theo đúng góc khung ngoài */
    z-index: 9999;
    display: none;
    pointer-events: none; /* popup chỉ để xem, không cần thao tác chuột trên nó */
}
.hover-detail.active { display: block; }

/* Khối tiêu đề - nền gradient xanh nổi bật, tách hẳn khỏi phần thông số bên dưới */
.hd-header {
    background: linear-gradient(135deg, var(--primary), #17399e);
    padding: 12px 18px;
}
.hd-title { font-size: 14.5px; font-weight: 700; color: #fff; margin: 0; line-height: 1.4; }

/* Khối giá - dải màu hồng nhạt riêng, làm giá nổi bật ngay dưới tiêu đề */
.hd-price {
    color: var(--danger); font-weight: 800; font-size: 16px;
    background: #fff1f1;
    padding: 10px 18px;
    border-bottom: 1px dashed #f3d6d6;
}

.hd-specs { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; }
.hd-spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hd-label { color: #8a8f9c; font-weight: 600; font-size: 12.5px; flex-shrink: 0; }
.hd-value { color: #222; font-weight: 700; font-size: 12.5px; text-align: right; }
@media (max-width: 900px) {
    .hover-detail { display: none !important; } /* Mobile: chật, đã có nút LIÊN HỆ TƯ VẤN thay thế */
}


/* ======================================= */
/* 7. NÚT LIÊN HỆ & TÙY CHỌN ZALO/MESSENGER */
/* ======================================= */
.contact-action {
    position: relative;
    text-align: center;
    margin-top: 10px;
}

.btn-contact {
    width: 100%;
    background-color: var(--primary); 
    color: #fff; 
    text-align: center; 
    display: block; 
    padding: 10px; 
    border-radius: 6px; 
    font-weight: 600; 
    font-size: 14px; 
    border: none; 
    cursor: pointer;
    transition: background 0.3s;
}

.btn-contact:hover { background-color: var(--primary-dark); }

/* Hộp chứa 2 nút Zalo/Mess (Mặc định ẩn) */
.contact-options {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%; /* Nổi lên phía trên nút Liên hệ */
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    padding: 10px;
    margin-bottom: 10px; /* Cách nút Liên hệ 1 khoảng */
    z-index: 2000;
    transition: all 0.3s ease;
    transform: translateY(10px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

/* Mũi tên nhỏ trỏ xuống dưới */
.contact-options::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Khi lia chuột vào khối nút thì hiện Popup ra */
.contact-action:hover .contact-options {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Trang trí nút Zalo / Messenger */
.contact-options a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Khoảng cách giữa icon và chữ */
    padding: 8px;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.contact-options a:hover { opacity: 0.8; }

.opt-zalo { background: #0068ff; } /* Màu xanh Zalo */
.opt-mess { background: #0084ff; } /* Màu xanh Facebook */

.contact-options a img {
    width: 20px;   /* Khống chế kích thước icon, tránh bị to quá khổ */
    height: 20px;
    object-fit: contain;
    display: inline-block;
}

/* ======================================= */
/* 8. RESPONSIVE (MOBILE / TABLET) */
/* ======================================= */
@media (max-width: 900px) {
    .top-bar-right { display: none; }
    .header-inner { gap: 12px; }
    .search-box { order: 3; flex-basis: 100%; max-width: 100%; }
    .header-actions { gap: 12px; }
    .action-text small { display: none; }

    .main-layout { flex-direction: column; }
    .sidebar { width: 100%; }

    /* Danh mục thu gọn mặc định trên mobile (bấm tiêu đề mới xổ ra) - không thì trang bị kéo dài
       cả màn hình toàn danh mục trước khi thấy được banner/sản phẩm gì cả. */
    .sidebar-title { cursor: pointer; }
    .sidebar-toggle-arrow { display: inline-block; transition: transform 0.2s var(--ease); }
    .sidebar-menu { display: none; }
    .sidebar.sidebar-open .sidebar-menu { display: block; }
    .sidebar.sidebar-open .sidebar-toggle-arrow { transform: rotate(180deg); }

    /* Chiều cao hàng canh để tỷ lệ khung (rộng/cao) ~1.5 - GIỐNG tỷ lệ khung banner bên desktop -
       để sau này banner thiết kế đúng chuẩn 3:2 thì hiện đẹp ở mọi kích thước màn hình, không
       cần cắt/bóp nhiều (xem ghi chú đầy đủ ở .banner-item img phía trên). */
    .bento-banners { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
    .banner-main { grid-column: span 2; grid-row: span 2; }

    .footer-grid { grid-template-columns: 1fr 1fr; }

    .floating-contact { right: 12px; bottom: 16px; }
    .fc-btn { width: 46px; height: 46px; font-size: 20px; }
}

@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
    .action-item.action-cta .action-text { display: none; }
    /* Giữ lưới 2 cột luôn (không rớt về 1 cột) - dàn banner theo hàng dọc 1 cột trên điện thoại
       kéo trang dài gấp đôi không cần thiết, 2 cột vẫn đọc được bình thường mà đỡ phải cuộn nhiều. */
    .bento-banners { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 110px; } /* tỷ lệ ~1.5 - xem giải thích ở @media 900px */
    .banner-main { grid-column: span 2; grid-row: span 2; }
}

/* ======================================= */
/* 9. VIDEO & MẠNG XÃ HỘI TIÊU BIỂU */
/* ======================================= */
.video-social-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: stretch; }
.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.social-cta-stack { display: flex; flex-direction: column; gap: 14px; }
.social-cta {
    flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px;
    border-radius: var(--radius-sm); color: #fff; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.social-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.social-cta strong { display: block; font-size: 14.5px; }
.social-cta small { display: block; font-size: 12px; opacity: 0.85; margin-top: 2px; font-weight: 400; }
.social-cta-icon { font-size: 22px; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; }
.social-cta-youtube { background: linear-gradient(135deg, #ff3b3b, #c4141f); }
.social-cta-tiktok { background: linear-gradient(135deg, #232323, #010101); }

@media (max-width: 900px) {
    .video-social-grid { grid-template-columns: 1fr; }
}

/* ======================================= */
/* 10. TRANG CHI TIẾT SẢN PHẨM (product.php) */
/* ======================================= */
.product-detail-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; }
.product-detail-image { position: relative; background: #f8f9fa; border-radius: var(--radius); padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.product-detail-image img { width: 100%; max-height: 420px; object-fit: contain; }
.product-detail-title { font-size: 25px; margin: 0 0 8px; color: #1c2333; line-height: 1.35; }
.product-spec-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.product-spec-table th, .product-spec-table td { text-align: left; padding: 9px 12px; font-size: 14px; border-bottom: 1px solid #f0f2f7; }
.product-spec-table th { color: #777; font-weight: 600; width: 130px; background: #f8f9fa; }
.product-spec-table td { color: #222; font-weight: 500; }
.product-detail-desc { font-size: 14.5px; line-height: 1.8; color: #444; background: #f8f9fa; padding: 16px; border-radius: var(--radius-sm); }

@media (max-width: 800px) {
    .product-detail-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ======================================= */
/* 11. CAM KẾT DỊCH VỤ (TRUST STRIP) */
/* ======================================= */
/* Dải màu navy làm nền cho khối "cam kết dịch vụ" - đỡ đơn điệu so với toàn trắng, đồng màu với footer */
.trust-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px;
    background: linear-gradient(120deg, var(--navy), #24345c); border-radius: var(--radius); padding: 18px;
    box-shadow: var(--shadow-sm);
}
.trust-item {
    background: rgba(255,255,255,0.07); border-radius: var(--radius-sm);
    padding: 14px; display: flex; align-items: center; gap: 12px;
    border: 1px solid rgba(255,255,255,0.12); transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.trust-item:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14); }
.trust-icon {
    font-size: 22px; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1)); display: flex; align-items: center; justify-content: center;
}
.trust-item strong { display: block; font-size: 13.5px; color: #fff; }
.trust-item small { display: block; font-size: 12px; color: #b9c4de; margin-top: 2px; }

@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-strip { grid-template-columns: 1fr; } }

/* ======================================= */
/* 12. DANH SÁCH VIDEO (bên dưới video chính) */
/* ======================================= */
.video-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.video-list-item { cursor: pointer; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.video-list-item:hover { transform: translateY(-3px); }
.video-list-item.active { border-color: var(--primary); }
.video-list-thumb { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.video-list-thumb img { position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; }
.video-play-badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.video-list-title { font-size: 12.5px; color: #333; margin: 8px 2px 0; line-height: 1.4; height: 34px; overflow: hidden; }

/* ======================================= */
/* 13. POPUP LIÊN HỆ (Zalo/Messenger - hiện giữa màn hình) */
/* ======================================= */
.contact-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: contactFadeIn 0.2s var(--ease);
}
.contact-modal-overlay[hidden] { display: none; }

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

.contact-modal {
    background: #fff;
    border-radius: var(--radius);
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: contactPopIn 0.25s var(--ease);
}

@keyframes contactPopIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.contact-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    background: #f1f3f8;
    color: #555;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.contact-modal-close:hover { background: #e2e6f0; }

.contact-modal-body {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-right: 24px;
}
.contact-modal-image {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: #f6f7fb;
    border: 1px solid #eef0f5;
    flex-shrink: 0;
}
.contact-modal-title { margin: 0 0 4px; font-size: 16px; color: #1a2b4d; line-height: 1.35; }
.contact-modal-price { margin: 0; font-size: 15px; font-weight: 700; color: var(--danger); }

.contact-modal-copybox {
    background: #f6f8ff;
    border: 1px dashed var(--primary);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.contact-modal-copylabel { margin: 0 0 6px; font-size: 12.5px; color: var(--primary-dark); font-weight: 600; }
.contact-modal-message { margin: 0; font-size: 13.5px; color: #333; line-height: 1.5; }

.contact-modal-hint { margin: 0 0 18px; font-size: 13px; color: #666; line-height: 1.5; }

.contact-modal-actions { display: flex; gap: 10px; }
.contact-modal-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}
.contact-modal-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.contact-modal-btn img { width: 20px; height: 20px; object-fit: contain; }
.contact-modal-zalo { background: #0068ff; }
.contact-modal-mess { background: #0084ff; }

@media (max-width: 480px) {
    /* Popup trên điện thoại: đưa lên SÁT TRÊN màn hình (không canh giữa dọc nữa) + thu nhỏ lại -
       canh giữa dọc trên màn hình ngắn dễ bị che khuất bởi bàn phím ảo / thanh địa chỉ trình
       duyệt, khách không thấy được hết popup. */
    .contact-modal-overlay { align-items: flex-start; padding: 14px; }
    .contact-modal { padding: 18px; max-height: 85vh; }
    .contact-modal-image { width: 56px; height: 56px; }
    .contact-modal-title { font-size: 14px; }
    .contact-modal-price { font-size: 13px; }
    .contact-modal-copybox { padding: 10px 12px; }
    .contact-modal-message { font-size: 12.5px; }
    .contact-modal-hint { font-size: 12px; margin-bottom: 14px; }
    .contact-modal-actions { flex-direction: column; }
}

@media (max-width: 900px) { .video-list { grid-template-columns: repeat(2, 1fr); } }

/* ======================================= */
/* 14. TRANG XEM VIDEO RIÊNG (video.php) */
/* ======================================= */
.video-page-grid { display: grid; grid-template-columns: 380px 1fr; gap: 32px; }

.video-page-player {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.video-page-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-page-info { min-width: 0; }

/* Video YouTube nằm ngang (16:9) chứ không dọc như TikTok (9:16) - đổi tỉ lệ khung + bố cục rộng
   hơn cho đúng hình dạng gốc, không thì bị bóp méo/để viền đen 2 bên rất xấu. */
.video-page-grid-landscape { grid-template-columns: 1fr; }
.video-page-player-landscape { aspect-ratio: 16 / 9; max-width: 100%; }
.video-page-grid-landscape .video-page-info { margin-top: 4px; }

@media (max-width: 700px) {
    .video-page-grid { grid-template-columns: 1fr; gap: 20px; }
    .video-page-player { max-width: 320px; margin: 0 auto; }
    .video-page-player-landscape { max-width: 100%; }
}


/* ======================================= */
/* 15. ĐOẠN GIỚI THIỆU CUỐI TRANG CHỦ (SEO local) */
/* ======================================= */
.home-intro {
    background: #fff; border-radius: var(--radius); border: 1px solid #eef0f5;
    padding: 24px 28px; margin-top: 10px;
}
.home-intro-title { font-size: 17px; color: #222; margin: 0 0 10px; }
.home-intro p { font-size: 14px; color: #555; line-height: 1.7; margin: 0; }
.home-intro strong { color: #333; }