@media (max-width: 768px) {
  :root{
    --brand:#b60000;
    --brand-dark:#8f0000;
    --text:#202124;
    --muted:#6f7378;
    --line:#ececec;
    --surface:#ffffff;
    --page:#f5f6f7;
    --shadow:0 8px 28px rgba(0,0,0,.08);
  }

  *{
    -webkit-tap-highlight-color:transparent;
  }

  html,body{
    overflow-x:hidden;
    background:var(--page)!important;
  }

  body{
    padding-bottom:66px!important;
    color:var(--text);
  }

  .container{
    width:calc(100% - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Ẩn thanh thông tin dài, tránh chiếm nửa màn hình */
  .topline,
  .top,
  .top-info{
    display:none!important;
  }

  /* Header chuyên nghiệp */
  .brand,
  .head,
  .brand-header{
    position:sticky!important;
    top:0!important;
    z-index:120!important;
    background:#fff!important;
    box-shadow:0 2px 14px rgba(0,0,0,.08)!important;
  }

  .brandrow,
  .headrow,
  .brand-row{
    height:68px!important;
    min-height:68px!important;
    padding:8px 0!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 42px!important;
    gap:10px!important;
    align-items:center!important;
  }

  .brandlogo,
  .logo,
  .brand-logo{
    grid-column:2!important;
    min-width:0!important;
    max-width:210px!important;
    justify-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    text-decoration:none!important;
    overflow:hidden!important;
  }

  .brandlogo>b,
  .logo>b,
  .brand-monogram{
    font-size:38px!important;
    line-height:1!important;
    flex:0 0 auto!important;
  }

  .brandlogo span,
  .logo span,
  .brand-text{
    min-width:0!important;
  }

  .brandlogo strong,
  .logo strong,
  .brand-text strong{
    display:block!important;
    font-size:14px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .brandlogo small,
  .brandlogo em,
  .logo small,
  .logo em,
  .brand-text small,
  .brand-text em{
    display:block!important;
    font-size:7px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  .brand form,
  .head form,
  .main-search,
  .hotline,
  .hot,
  .header-hotline{
    display:none!important;
  }

  .cart,
  .header-cart{
    grid-column:3!important;
    justify-self:end!important;
    font-size:22px!important;
    color:var(--brand)!important;
  }

  /* Nút menu riêng */
  .toggle,
  .category-toggle{
    position:fixed!important;
    top:14px!important;
    left:12px!important;
    z-index:150!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    border:0!important;
    border-radius:10px!important;
    overflow:hidden!important;
    color:transparent!important;
    background:#fff!important;
    box-shadow:0 3px 14px rgba(0,0,0,.12)!important;
  }

  .toggle:before,
  .category-toggle:before{
    content:"☰";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--brand);
    font-size:23px;
    font-weight:700;
  }

  /* Thanh menu ngang gọn */
  .nav,
  .red-navigation{
    position:sticky!important;
    top:68px!important;
    z-index:110!important;
    background:#fff!important;
    border-top:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:none!important;
  }

  .navrow,
  .nav-layout{
    display:block!important;
    width:100%!important;
  }

  .menu,
  .horizontal-menu{
    display:flex!important;
    gap:2px!important;
    overflow-x:auto!important;
    padding:0 10px!important;
    scrollbar-width:none!important;
    background:#fff!important;
  }

  .menu::-webkit-scrollbar,
  .horizontal-menu::-webkit-scrollbar{
    display:none!important;
  }

  .menu a,
  .horizontal-menu a{
    flex:0 0 auto!important;
    padding:11px 10px!important;
    color:#333!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:700!important;
    text-decoration:none!important;
    border-radius:7px!important;
  }

  .menu a:first-child,
  .horizontal-menu a:first-child{
    color:var(--brand)!important;
  }

  /* Popup danh mục */
  .sidebar,
  .left-category-menu{
    display:none!important;
    position:fixed!important;
    inset:78px 12px auto 12px!important;
    max-height:74vh!important;
    overflow:auto!important;
    z-index:180!important;
    padding:12px!important;
    background:#fff!important;
    border-radius:16px!important;
    box-shadow:0 18px 55px rgba(0,0,0,.22)!important;
  }

  .sidebar.open,
  .left-category-menu.mobile-open{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }

  .sidebar a,
  .left-category-menu a{
    min-height:54px!important;
    padding:9px!important;
    border:1px solid #eee!important;
    border-radius:10px!important;
    font-size:11px!important;
    line-height:1.25!important;
    display:grid!important;
    grid-template-columns:28px 1fr!important;
    align-items:center!important;
    text-decoration:none!important;
    background:#fff!important;
  }

  .sidebar a span,
  .left-category-menu a span{
    font-size:19px!important;
    color:var(--brand)!important;
  }

  .sidebar a b,
  .left-category-menu a b{
    display:none!important;
  }

  /* Banner */
  .hero,
  .home-hero{
    padding:12px 0 0!important;
    background:var(--page)!important;
  }

  .hero-grid,
  .hero-layout{
    display:block!important;
  }

  .banner,
  .main-banner-area{
    border-radius:16px!important;
    overflow:hidden!important;
    box-shadow:var(--shadow)!important;
    background:#fff!important;
  }

  .slide,
  .banner-slide,
  .banner-slider{
    height:280px!important;
    min-height:280px!important;
  }

  .slide>img,
  .banner-slide>img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  .overlay,
  .banner-overlay{
    width:100%!important;
    padding:22px!important;
    justify-content:center!important;
    background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.76) 58%,rgba(255,255,255,.08) 100%)!important;
  }

  .overlay small,
  .banner-overlay small{
    font-size:12px!important;
    letter-spacing:.4px!important;
  }

  .overlay h1,
  .banner-overlay h1{
    max-width:70%!important;
    margin:6px 0 9px!important;
    font-size:25px!important;
    line-height:1.05!important;
  }

  .overlay p,
  .banner-overlay p{
    max-width:70%!important;
    margin:0 0 12px!important;
    font-size:11px!important;
    line-height:1.45!important;
  }

  .overlay a,
  .banner-overlay a{
    padding:9px 13px!important;
    font-size:10px!important;
    border-radius:20px!important;
  }

  .benefits,
  .hero-features{
    display:none!important;
  }

  /* Danh mục nhanh */
  .strip,
  .quick-category-strip{
    padding:12px 0 2px!important;
    background:transparent!important;
  }

  .strip .container,
  .quick-category-strip .container{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .strip a,
  .quick-category-strip a{
    min-height:72px!important;
    padding:9px 5px!important;
    border:1px solid #ececec!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 3px 12px rgba(0,0,0,.04)!important;
    color:#2c2c2c!important;
    font-size:10px!important;
    line-height:1.25!important;
    text-align:center!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
  }

  .strip a:before,
  .quick-category-strip a:before{
    content:"▣";
    color:var(--brand);
    font-size:22px;
    margin-bottom:5px;
  }

  .strip a span,
  .quick-category-strip a span{
    display:none!important;
  }

  /* Section */
  .section,
  .category-section,
  .three-col,
  .about{
    padding:22px 0!important;
  }

  .three-col{
    display:block!important;
  }

  .mini-col{
    margin:0 0 14px!important;
    padding:16px!important;
    background:#fff!important;
    border-radius:15px!important;
    box-shadow:0 5px 18px rgba(0,0,0,.05)!important;
  }

  .mini-col h2,
  .center-title,
  .sectitle h2,
  .section-title-red h2{
    margin:0!important;
    padding:0!important;
    background:none!important;
    color:var(--brand)!important;
    font-size:20px!important;
    line-height:1.25!important;
    text-align:center!important;
    font-weight:600!important;
  }

  .dotline,
  .center-dot{
    margin:10px 0 15px!important;
  }

  .mini-item{
    grid-template-columns:96px minmax(0,1fr)!important;
    gap:11px!important;
    margin-bottom:14px!important;
    padding-bottom:14px!important;
    border-bottom:1px solid #f0f0f0!important;
  }

  .mini-item:last-child{
    margin-bottom:0!important;
    border-bottom:0!important;
  }

  .mini-item img{
    width:96px!important;
    height:96px!important;
    border-radius:10px!important;
    object-fit:cover!important;
  }

  .mini-item h3{
    margin:0 0 6px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }

  .mini-item strong{
    display:inline-block!important;
    font-size:16px!important;
  }

  .mini-item del{
    display:inline-block!important;
    font-size:12px!important;
  }

  /* Tabs */
  .viewall{
    margin:8px 0 15px!important;
    font-size:13px!important;
  }

  .tabs{
    display:flex!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:7px!important;
    padding:0 0 8px!important;
    margin:14px 0!important;
    scrollbar-width:none!important;
  }

  .tabs::-webkit-scrollbar{
    display:none!important;
  }

  .tabs span{
    flex:0 0 auto!important;
    margin:0!important;
    padding:9px 13px!important;
    border:0!important;
    border-radius:20px!important;
    background:#f1dddd!important;
    font-size:12px!important;
  }

  .tabs span.active{
    background:var(--brand)!important;
    color:#fff!important;
  }

  /* Product cards */
  .grid,
  .product-grid-red,
  .large-grid,
  .search-grid,
  .related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .card,
  .product-card-red,
  .large-card,
  .search-card,
  .related-card{
    overflow:hidden!important;
    border:0!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 4px 16px rgba(0,0,0,.06)!important;
  }

  .photo,
  .product-photo,
  .large-card img,
  .search-card .photo,
  .related-card img{
    height:165px!important;
    object-fit:cover!important;
  }

  .card>div,
  .product-card-red>div,
  .large-card,
  .search-card>div,
  .related-card>div{
    padding:10px!important;
  }

  .card h3,
  .product-card-red h3,
  .large-card h3,
  .search-card h3,
  .related-card h3{
    min-height:38px!important;
    margin:4px 0 7px!important;
    font-size:13px!important;
    line-height:1.35!important;
    font-weight:600!important;
  }

  .card strong,
  .product-card-red strong,
  .large-card strong,
  .search-card strong,
  .related-card strong{
    font-size:15px!important;
  }

  .card del,
  .product-card-red del,
  .large-card del,
  .search-card del{
    display:block!important;
    margin:2px 0 0!important;
    font-size:11px!important;
  }

  /* Khối phụ */
  .double-banner,
  .about-grid,
  .partner-row,
  .press-row{
    grid-template-columns:1fr!important;
  }

  .fake-banner{
    min-height:210px!important;
    padding:20px!important;
    border-radius:15px!important;
    margin-bottom:12px!important;
  }

  .fake-banner h2{
    margin:0 0 5px!important;
    font-size:24px!important;
  }

  .about-grid>div{
    min-height:135px!important;
    padding:22px!important;
    border-radius:14px!important;
  }

  .partner-row div,
  .press-row div{
    padding:16px!important;
    border:1px solid #eee!important;
    border-radius:12px!important;
    background:#fff!important;
    font-size:18px!important;
  }

  /* Footer */
  footer{
    background:#ece8e4!important;
  }

  .footer4,
  .foot,
  .footer-columns,
  .footer-grid{
    display:block!important;
    padding:16px 0 76px!important;
  }

  .footer4 section,
  .foot>div,
  .footer-columns section,
  .footer-grid section{
    margin-bottom:8px!important;
    padding:0 14px!important;
    overflow:hidden!important;
    border:1px solid #e8e8e8!important;
    border-radius:12px!important;
    background:#fff!important;
  }

  .footer4 h3,
  .foot h3,
  .footer-columns h3,
  .footer-grid h3{
    position:relative!important;
    margin:0!important;
    padding:14px 24px 14px 0!important;
    color:var(--brand)!important;
    font-size:14px!important;
    font-weight:700!important;
  }

  .footer4 h3:after,
  .foot h3:after,
  .footer-columns h3:after,
  .footer-grid h3:after{
    content:"+";
    position:absolute;
    right:0;
    top:10px;
    font-size:21px;
  }

  .footer-mobile-collapsed>*:not(h3){
    display:none!important;
  }

  /* Ẩn nút cũ */
  .floating,
  .float,
  .floating-social,
  .consult,
  .floating-consult,
  .backtop{
    display:none!important;
  }

  /* Bottom bar nhỏ gọn */
  .mobile-bottom-bar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:250!important;
    height:60px!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    background:#fff!important;
    border-top:1px solid #eee!important;
    box-shadow:0 -4px 18px rgba(0,0,0,.1)!important;
  }

  .mobile-bottom-bar a{
    gap:2px!important;
    color:#4a4a4a!important;
    font-size:10px!important;
    text-decoration:none!important;
  }

  .mobile-bottom-bar a b{
    color:var(--brand)!important;
    font-size:19px!important;
  }

  .mobile-bottom-bar a.primary{
    margin:5px!important;
    border-radius:10px!important;
    background:var(--brand)!important;
    color:#fff!important;
  }

  .mobile-bottom-bar a.primary b{
    color:#fff!important;
  }
}