/* ============================================================
   TECHVIET STORE - SHARED HEADER, MOBILE MENU & RESPONSIVE CSS
   Dùng chung cho: Trang chủ, Danh mục, Chi tiết SP, Tin tức
   Dán vào: Customizer > Additional CSS (Flatsome)
   ============================================================ */

:root{
  --blue-deep:#0B3D91;
  --blue-deep-dark:#082c69;
  --orange:#FF6900;
  --orange-dark:#e05a00;
  --white:#FFFFFF;
  --bg-soft:#F4F6F9;
  --green:#16A34A;
  --red:#E11D2E;
  --text-dark:#1A2233;
  --text-mid:#5B6472;
  --border:#E6E9EE;
  --radius:10px;
}

/* ===================== MOBILE TOP BAR (≤768px) ===================== */
.mobile-topbar{
  display:none;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  padding:12px 16px;
  position:sticky;
  top:0;
  z-index:60;
  box-shadow:0 1px 0 var(--border);
}
.mobile-topbar .hamburger-btn{
  width:40px;height:40px;border-radius:8px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;
  border:none;font-size:20px;color:var(--blue-deep);cursor:pointer;
}
.mobile-topbar .logo-mobile{
  display:flex;align-items:center;gap:6px;font-family:'Be Vietnam Pro',sans-serif;
  font-weight:800;font-size:19px;color:var(--blue-deep);
}
.mobile-topbar .logo-mobile span{color:var(--orange);}
.mobile-topbar .logo-mobile .logo-mark{
  width:30px;height:30px;border-radius:7px;
  background:linear-gradient(135deg,var(--blue-deep),#1d5fd4);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;
}
.mobile-topbar .mobile-actions{display:flex;gap:10px;align-items:center;}
.mobile-topbar .mobile-actions .icon-circle{
  width:38px;height:38px;border-radius:50%;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;position:relative;font-size:16px;
}
.mobile-topbar .cart-badge{
  position:absolute;top:-3px;right:-3px;background:var(--orange);color:#fff;
  font-size:10px;font-weight:700;width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.mobile-search-row{display:none;padding:0 16px 12px;background:#fff;}
.mobile-search-row .search-bar{display:flex;border:2px solid var(--blue-deep);border-radius:30px;overflow:hidden;}
.mobile-search-row .search-bar input{flex:1;border:none;outline:none;padding:9px 16px;font-size:13.5px;}
.mobile-search-row .search-bar button{background:var(--blue-deep);border:none;color:#fff;padding:0 16px;font-size:13px;}

/* ===================== OFF-CANVAS MOBILE MENU ===================== */
.offcanvas-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,20,40,.55);
  z-index:90;
}
.offcanvas-overlay.open{display:block;}

.offcanvas-menu{
  position:fixed;top:0;left:0;height:100%;width:300px;max-width:85vw;
  background:#fff;z-index:91;
  transform:translateX(-100%);
  transition:transform .3s ease;
  display:flex;flex-direction:column;
  box-shadow:4px 0 24px rgba(0,0,0,.15);
}
.offcanvas-menu.open{transform:translateX(0);}

.offcanvas-head{
  background:var(--blue-deep);color:#fff;padding:18px 16px;
  display:flex;align-items:center;justify-content:space-between;
}
.offcanvas-head .user-row{display:flex;align-items:center;gap:10px;}
.offcanvas-head .avatar{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.offcanvas-head .greet{font-size:12px;opacity:.8;}
.offcanvas-head .greet b{display:block;font-size:13.5px;font-weight:700;}
.offcanvas-head .close-btn{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);
  border:none;color:#fff;font-size:16px;cursor:pointer;
}

.offcanvas-body{flex:1;overflow-y:auto;padding:10px 0;}

.offcanvas-quicklinks{display:flex;gap:0;border-bottom:1px solid var(--border);padding:6px 0 14px;margin-bottom:6px;}
.offcanvas-quicklinks a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:11px;color:var(--text-mid);text-align:center;
}
.offcanvas-quicklinks .ic{
  width:42px;height:42px;border-radius:50%;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--blue-deep);
}

.offcanvas-nav{list-style:none;margin:0;padding:0;}
.offcanvas-nav > li{border-bottom:1px solid var(--border);}
.offcanvas-nav > li > a{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;font-size:14.5px;font-weight:600;color:var(--text-dark);
}
.offcanvas-nav > li.active > a{color:var(--blue-deep);}
.offcanvas-nav .nav-ic{display:flex;align-items:center;gap:12px;}
.offcanvas-nav .nav-ic .emoji{font-size:16px;width:22px;text-align:center;}
.offcanvas-nav .chevron{font-size:12px;color:#aab2c0;transition:transform .25s;}
.offcanvas-nav > li.expanded .chevron{transform:rotate(90deg);}

.offcanvas-submenu{
  max-height:0;overflow:hidden;background:var(--bg-soft);
  transition:max-height .25s ease;
}
.offcanvas-nav > li.expanded .offcanvas-submenu{max-height:600px;}
.offcanvas-submenu a{
  display:block;padding:11px 18px 11px 52px;font-size:13.5px;color:var(--text-mid);
  border-bottom:1px solid #e9edf3;
}
.offcanvas-submenu a:last-child{border-bottom:none;}

.offcanvas-footer{
  padding:16px 18px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;
}
.offcanvas-footer .hotline-box{
  display:flex;align-items:center;gap:10px;background:#fff3ea;
  border-radius:8px;padding:10px 12px;
}
.offcanvas-footer .hotline-box .ic{font-size:18px;}
.offcanvas-footer .hotline-box b{display:block;font-size:13.5px;color:var(--orange);}
.offcanvas-footer .hotline-box span{font-size:11px;color:var(--text-mid);}

body.offcanvas-active{overflow:hidden;}

/* ===================== STICKY BOTTOM NAV (mobile only) ===================== */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:55;
  background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.08);
  padding:6px 0 max(6px, env(safe-area-inset-bottom));
}
.bottom-nav-inner{display:flex;}
.bottom-nav-inner a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;color:var(--text-mid);padding:6px 0;position:relative;
}
.bottom-nav-inner a.active{color:var(--blue-deep);}
.bottom-nav-inner a .ic{font-size:19px;}
.bottom-nav-inner a .badge{
  position:absolute;top:0;right:18%;background:var(--orange);color:#fff;
  font-size:9px;font-weight:700;width:15px;height:15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   RESPONSIVE: TABLET (≤1024px)
   ============================================================ */
@media(max-width:1024px){
  .container{padding:0 14px;}

  /* Trang chủ */
  .hero-grid{grid-template-columns:1fr;}
  .hero-side{flex-direction:row;}
  .side-banner{min-height:110px;}
  .trust-grid{grid-template-columns:repeat(4,1fr);}
  .trust-item{padding:0 10px;}
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:12px;}
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .promo-banner{flex-direction:column;gap:18px;text-align:center;padding:28px 24px;}
  .promo-banner .countdown{flex-wrap:wrap;justify-content:center;}
  .newsletter{flex-direction:column;gap:16px;text-align:center;padding:26px;}
  .newsletter-form input{width:200px;}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:24px;}

  /* Danh mục sản phẩm */
  .cat-layout{grid-template-columns:220px 1fr;}
  .prod-grid{grid-template-columns:repeat(3,1fr);}

  /* Chi tiết sản phẩm */
  .product-main{grid-template-columns:1fr 1fr;}
  .product-buy{grid-column:1 / -1;}
  .desc-highlight{grid-template-columns:repeat(4,1fr);}

  /* Tin tức */
  .blog-layout{grid-template-columns:1fr 260px;}
  .featured-grid{grid-template-columns:1fr;}
  .post-grid{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   RESPONSIVE: MOBILE (≤768px)
   ============================================================ */
@media(max-width:768px){
  body{padding-bottom:62px;} /* chỗ cho bottom nav */

  /* Ẩn header desktop, hiện mobile topbar */
  .topbar{display:none;}
  .header{display:none;}
  .nav-wrap{display:none;}
  .mobile-topbar{display:flex;}

  .container{padding:0 12px;}

  /* Breadcrumb gọn lại */
  .breadcrumb{font-size:11.5px;padding:10px 0;overflow-x:auto;white-space:nowrap;}

  /* ---- Trang chủ ---- */
  .hero-section{padding:12px 0;}
  .hero-grid{grid-template-columns:1fr;gap:12px;}
  .hero-slide{min-height:240px;padding:24px;}
  .hero-slide h1{font-size:24px;}
  .hero-slide p{font-size:13px;}
  .hero-side{flex-direction:row;gap:10px;}
  .side-banner{padding:16px;min-height:90px;}
  .side-banner h3{font-size:15px;}

  .trust-strip{margin-top:12px;padding:6px 0;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .trust-item{border-right:none;border-bottom:1px solid var(--border);padding:12px 10px;}
  .trust-item:nth-child(2n){border-right:none;}
  .trust-item h4{font-size:12.5px;}
  .trust-item p{font-size:11px;}

  .section{padding:24px 0 4px;}
  .section-head h2{font-size:17px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .cat-card{padding:18px 10px;}
  .cat-card .cat-ic{width:50px;height:50px;font-size:22px;}

  .tab-bar{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;}
  .tab-bar button{padding:8px 12px;font-size:13px;}

  .prod-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .prod-img{height:120px;font-size:32px;}
  .prod-name{font-size:12.5px;min-height:34px;}
  .prod-price{font-size:14px;}

  .promo-banner{padding:22px 18px;margin:20px 0;}
  .promo-banner .left h2{font-size:19px;}
  .promo-banner .countdown .box{min-width:48px;padding:8px 10px;}
  .promo-cta{margin-left:0;margin-top:10px;width:100%;text-align:center;}

  .blog-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .blog-img{height:100px;font-size:24px;}
  .blog-info{padding:10px;}
  .blog-info h4{font-size:12.5px;}
  .blog-info p{display:none;}

  .newsletter{padding:20px 18px;}
  .newsletter-form{flex-direction:column;width:100%;}
  .newsletter-form input{width:100%;}
  .newsletter-form button{width:100%;}

  .footer{padding:30px 0 0;}
  .footer-grid{grid-template-columns:1fr;gap:22px;padding-bottom:20px;}

  /* ---- Danh mục sản phẩm ---- */
  .cat-hero{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px;}
  .cat-hero h1{font-size:19px;}
  .cat-layout{grid-template-columns:1fr;gap:14px;}

  /* sidebar filter -> thanh ngang mở bottom sheet (đơn giản hoá: hiển thị thu gọn) */
  .sidebar{order:2;}
  .filter-box{padding:14px;}
  .content{order:1;}

  .toolbar{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 14px;}
  .toolbar-right{width:100%;justify-content:space-between;}
  .sort-select{flex:1;}

  .prod-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .prod-card .prod-img{height:130px;font-size:36px;}
  .prod-name{font-size:12.5px;min-height:34px;}
  .prod-specs span{font-size:10px;padding:2px 6px;}
  .prod-actions{flex-direction:column;gap:6px;}
  .btn-compare{width:100%;height:32px;}

  /* ---- Chi tiết sản phẩm ---- */
  .product-main{grid-template-columns:1fr;padding:16px;gap:18px;}
  .gallery-main{height:240px;font-size:60px;}
  .gallery-thumbs{overflow-x:auto;}
  .product-info h1{font-size:17px;}
  .quick-specs .label{min-width:75px;font-size:12.5px;}
  .quick-specs .val{font-size:12.5px;}
  .price-now{font-size:22px;}
  .option-pills .pill{padding:7px 11px;font-size:12px;}

  .tab-nav{overflow-x:auto;white-space:nowrap;padding:0 12px;}
  .tab-nav button{padding:14px 14px;font-size:13px;}
  .tab-content{padding:18px;}
  .desc-highlight{grid-template-columns:repeat(2,1fr);gap:10px;}
  .spec-table td{padding:9px 12px;font-size:12.5px;}
  .spec-table td.spec-label{width:130px;}
  .spec-group-title{padding:10px 12px;font-size:12.5px;}

  .review-summary{flex-direction:column;gap:16px;text-align:center;}
  .review-bars{width:100%;}

  /* ---- Tin tức ---- */
  .blog-hero{padding:24px 18px;}
  .blog-hero h1{font-size:21px;}
  .blog-hero p{font-size:13px;}
  .topic-filter{margin:16px 0;}
  .topic-filter .pill{padding:8px 14px;font-size:12.5px;}

  .featured-grid{grid-template-columns:1fr;gap:12px;}
  .featured-main .img{height:200px;font-size:48px;}
  .featured-main h2{font-size:17px;}
  .featured-main .info{padding:16px;}
  .featured-side{flex-direction:row;}
  .mini-post{flex-direction:column;padding:10px;}
  .mini-post .img{width:100%;height:80px;}

  .blog-layout{grid-template-columns:1fr;}
  .post-grid{grid-template-columns:1fr;gap:12px;}
  .post-card .img{height:150px;}
  .side-box{margin-bottom:12px;}

  /* Bottom nav xuất hiện */
  .bottom-nav{display:block;}
}

/* ============================================================
   RESPONSIVE: SMALL MOBILE (≤400px)
   ============================================================ */
@media(max-width:400px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .prod-grid{grid-template-columns:1fr 1fr;}
  .hero-side{flex-direction:column;}
  .blog-grid{grid-template-columns:1fr;}
}