/* Tịnh Agarwood v1.16 — isolated homepage featured rail + mobile/tablet header reset.
   This file intentionally loads AFTER all legacy/dynamic theme CSS. */

/* ---------- Header mode separation ---------- */
.tinh-header-desktop{display:block}
.tinh-header-mobile{display:none}
.tinh-header-mobile .tinh-mobile-head-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tinh-mobile-head-actions{display:flex;align-items:center;gap:8px}
.hamburger-lines{width:20px;height:16px;display:flex;flex-direction:column;justify-content:space-between}
.hamburger-lines i{display:block;width:100%;height:2px;border-radius:99px;background:var(--tinh-primary,#113a4b)}
.mobile-nav-topline{display:none}
.mobile-nav-close{border:0;background:transparent;color:var(--tinh-primary,#113a4b);font-size:30px;line-height:1;padding:0;width:38px;height:38px;cursor:pointer}

/* ---------- Featured products — completely independent of Woo loop CSS ---------- */
.featured .tinh-featured-carousel{position:relative;padding:0 38px!important;max-width:100%;overflow:hidden}
.featured .tinh-featured-track{overflow:hidden!important;width:100%;max-width:100%}
.featured .tinh-featured-list{
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:calc((100% - 60px)/6)!important;
  grid-template-columns:none!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  padding:4px 2px 12px!important;
  margin:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.featured .tinh-featured-list::-webkit-scrollbar{display:none}
.featured .tinh-featured-card{
  scroll-snap-align:start;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  display:flex!important;
  flex-direction:column!important;
  background:#fff;
  border:1px solid #e9e0d4;
  border-radius:14px;
  box-shadow:0 5px 16px rgba(17,58,75,.045);
}
.featured .tinh-featured-media{position:relative;display:block;overflow:hidden;background:#f3efe7;aspect-ratio:4/3}
.featured .tinh-featured-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  margin:0!important;
  padding:0!important;
  transform:none;
  transition:transform .28s ease;
}
.featured .tinh-featured-card:hover .tinh-featured-media img{transform:scale(1.025)}
.featured .tinh-sale-badge{position:absolute;right:8px;top:8px;z-index:2;background:var(--tinh-red,#cf2d24);color:#fff;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:800;line-height:1}
.featured .tinh-featured-card-body{display:flex;flex:1;flex-direction:column;padding:10px 11px 11px;min-width:0}
.featured .tinh-featured-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:34px;color:var(--tinh-primary,#113a4b);font-size:12px;line-height:1.38;font-weight:700}
.featured .tinh-featured-price{margin-top:7px;color:var(--tinh-price,#e63b2e);font-size:14px;line-height:1.2;font-weight:800;white-space:normal}
.featured .tinh-featured-price del{color:#9aa3a5;font-size:10px;font-weight:600;margin-right:3px}
.featured .tinh-featured-price ins{text-decoration:none}
.featured .tinh-featured-link{margin-top:auto;padding-top:9px;border-top:1px solid #eee7dd;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--tinh-primary,#113a4b);font-size:10px;font-weight:700}
.featured .tinh-featured-link span{transition:transform .2s ease}
.featured .tinh-featured-card:hover .tinh-featured-link span{transform:translateX(3px)}
.featured .tinh-featured-nav{display:grid!important}

@media (min-width:1181px){
  /* Defensive reset: only the dedicated desktop header exists visually on desktop. */
  .tinh-header-desktop{display:block!important}
  .tinh-header-mobile,.mobile-nav{display:none!important}
}

@media (max-width:1180px){
  /* Physically hide every desktop header element; do not rely on hiding only <nav>. */
  .tinh-header-desktop{display:none!important}
  .tinh-header-mobile{display:block!important}
  .tinh-header{height:auto!important;min-height:var(--tinh-tablet-header-height,82px)!important;overflow:visible!important;background:#fffdf9!important}
  .tinh-header-mobile,.tinh-mobile-head-row{height:var(--tinh-tablet-header-height,82px)!important;min-height:var(--tinh-tablet-header-height,82px)!important}
  .tinh-mobile-head-row{width:calc(100% - (var(--tinh-tablet-side-padding,24px) * 2))!important;max-width:100%!important;padding:0!important}
  .tinh-header-mobile .brand{display:flex!important;align-items:center!important;min-width:0!important;max-width:55%!important}
  .tinh-header-mobile .brand .tinh-logo-img{display:block!important;width:var(--tinh-tablet-logo-width,116px)!important;height:auto!important;max-height:58px!important;object-fit:contain!important;object-position:left center!important}
  .tinh-mobile-head-actions{margin-left:auto!important;flex:0 0 auto!important}
  .tinh-header-mobile .mobile-cart{display:grid!important;width:40px!important;height:40px!important}
  .tinh-header-mobile .mobile-toggle{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;padding:0!important;border:1px solid rgba(17,58,75,.16)!important;border-radius:50%!important;background:#fff!important;color:var(--tinh-primary,#113a4b)!important;font-size:0!important;line-height:1!important;z-index:3!important}

  .mobile-nav{
    position:absolute!important;
    left:0!important;right:0!important;top:100%!important;
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--tinh-tablet-header-height,82px))!important;
    margin:0!important;
    padding:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    background:#fffdf9!important;
    border-top:1px solid #ece3d7!important;
    box-shadow:0 24px 48px rgba(12,39,50,.16)!important;
    z-index:9999!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-nav:not(.open){display:none!important}
  .mobile-nav.open{display:block!important}
  .mobile-nav-inner{display:block!important;width:min(100% - 36px,720px)!important;max-width:720px!important;margin:0 auto!important;padding:13px 0 24px!important}
  .mobile-nav-topline{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 0 8px!important;border-bottom:1px solid #eee7dd!important;font-size:11px!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#789!important}
  .mobile-menu{display:block!important;list-style:none!important;margin:0!important;padding:0!important;width:100%!important}
  .mobile-menu>li{display:block!important;width:100%!important;margin:0!important;padding:0!important;border-bottom:1px solid #eee7dd!important;position:relative!important}
  .mobile-menu>li>a{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:58px!important;padding:15px 2px!important;font-size:16px!important;line-height:1.35!important;font-weight:700!important;color:var(--tinh-primary,#113a4b)!important;white-space:normal!important}
  .mobile-menu .menu-caret{display:none!important}
  .mobile-menu .mobile-mega-toggle{display:grid!important;place-items:center!important;position:absolute!important;right:0!important;top:8px!important;width:42px!important;height:42px!important;border:0!important;background:transparent!important;color:var(--tinh-primary,#113a4b)!important;font-size:18px!important;cursor:pointer!important}
  .mobile-menu .has-mega>a{padding-right:48px!important}
  .mobile-menu .product-mega{display:none!important;position:static!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0 0 14px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  .mobile-menu .has-mega.submenu-open>.product-mega{display:block!important}
  .mobile-menu .product-mega__grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 14px!important;padding:0!important}
  .mobile-menu .mega-group{min-width:0!important;padding:0!important}
  .mobile-menu .mega-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:10px 0!important;font-family:var(--serif)!important;font-size:15px!important;line-height:1.25!important;border-bottom:1px solid #eee7dd!important;color:var(--tinh-primary,#113a4b)!important}
  .mobile-menu .mega-links{display:none!important}
  .mobile-menu .mega-all{display:flex!important;align-items:center!important;gap:8px!important;margin-top:10px!important;padding:12px 0 0!important;font-weight:800!important;font-size:13px!important;color:var(--tinh-primary,#113a4b)!important}
  .mobile-search{margin:18px 0 10px!important;width:100%!important;max-width:none!important}
  .mobile-nav-actions{width:100%!important;margin-top:10px!important}

  .featured .tinh-featured-list{grid-auto-columns:calc((100% - 36px)/4)!important;gap:12px!important}
}

@media (max-width:782px){
  .tinh-header{min-height:var(--tinh-mobile-header-height,74px)!important}
  .tinh-header-mobile,.tinh-mobile-head-row{height:var(--tinh-mobile-header-height,74px)!important;min-height:var(--tinh-mobile-header-height,74px)!important}
  .tinh-mobile-head-row{width:calc(100% - (var(--tinh-mobile-side-padding,16px) * 2))!important}
  .tinh-header-mobile .brand{max-width:60%!important}
  .tinh-header-mobile .brand .tinh-logo-img{width:var(--tinh-mobile-logo-width,104px)!important;max-height:54px!important}
  .tinh-header-mobile .mobile-cart{width:38px!important;height:38px!important}
  .tinh-header-mobile .mobile-toggle{width:40px!important;height:40px!important}
  .mobile-nav{max-height:calc(100dvh - var(--tinh-mobile-header-height,74px))!important}
  .mobile-nav-inner{width:calc(100% - 32px)!important;padding-bottom:max(22px,env(safe-area-inset-bottom))!important}
  .mobile-menu>li>a{min-height:54px!important;font-size:15px!important}
  .mobile-menu .product-mega__grid{grid-template-columns:1fr 1fr!important}

  /* Home hero begins cleanly below the compact mobile header. */
  body.home .hero-grid{grid-template-columns:1fr!important}
  body.home .hero-copy{padding-top:32px!important}

  .featured{overflow:hidden!important}
  .featured .section-head{display:block!important;padding-left:0!important;padding-right:0!important}
  .featured .section-head>p{margin-top:8px!important}
  .featured .section-head>a{display:inline-flex!important;margin-top:6px!important}
  .featured .tinh-featured-carousel{padding:0 24px!important}
  .featured .tinh-featured-list{grid-auto-columns:calc((100% - 10px)/2)!important;gap:10px!important}
  .featured .tinh-featured-card-body{padding:9px 9px 10px!important}
  .featured .tinh-featured-title{font-size:11.5px!important;min-height:32px!important}
  .featured .tinh-featured-price{font-size:13px!important}
  .featured .tinh-featured-link{font-size:9.5px!important}
  .featured .tinh-featured-nav{width:28px!important;height:28px!important;font-size:18px!important}
}

@media (max-width:420px){
  .tinh-top .tinh-shell{width:calc(100% - 24px)!important}
  .tinh-header-mobile .brand .tinh-logo-img{width:min(var(--tinh-mobile-logo-width,104px),98px)!important}
  .tinh-mobile-head-actions{gap:5px!important}
  .mobile-menu .product-mega__grid{grid-template-columns:1fr!important}
  .featured .tinh-featured-carousel{padding:0 20px!important}
  .featured .tinh-featured-list{grid-auto-columns:68%!important}
}

@media (max-width:360px){
  .tinh-header-mobile .mobile-cart{display:none!important}
  .tinh-header-mobile .brand{max-width:72%!important}
  .featured .tinh-featured-list{grid-auto-columns:78%!important}
}