/* dienthoai.vn — main.css (base port 1:1 từ mock + component classes) */

html,body{margin:0;padding:0;background:#F0F1F4}
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;color:#17181D;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
a{color:#D6191F;text-decoration:none}:where(a:hover){color:#A50E13}
button{font-family:inherit}
input::placeholder{color:#83858F}
[data-scroll]{scrollbar-width:none}
[data-scroll]::-webkit-scrollbar{display:none}
[data-sticky-header="on"]{position:sticky;top:0;z-index:130}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #D6191F;outline-offset:2px}
[data-screen-label="Topbar"] a:focus-visible,[data-screen-label="Nav"] a:focus-visible,[data-screen-label="Flash sale"] button:focus-visible{outline-color:#FFFFFF}
button[data-edge="off"]{opacity:.35;pointer-events:none}
a[data-sale-badge]:hover{background:#FFFFFF !important;color:#C4141B !important;border-color:#FFFFFF !important}
[data-rsp="nav"]{scrollbar-width:none}
[data-rsp="nav"]::-webkit-scrollbar{display:none}
@media (max-width:1179px){
[data-rsp="grid5"]{grid-template-columns:repeat(4,1fr) !important}
[data-rsp="xakho"]{grid-template-columns:240px repeat(3,1fr) !important}
[data-rsp="car-item"]{flex-basis:calc((100% - 48px)/4) !important}
[data-rsp="flash-card"]{flex-basis:calc((100% - 48px)/5) !important}
[data-rsp="cats"]{grid-template-columns:repeat(5,1fr) !important}
[data-rsp="brands"]{grid-template-columns:repeat(3,1fr) !important}
[data-rsp="news"]{grid-template-columns:repeat(3,1fr) !important;grid-template-rows:auto !important}
[data-rsp="news"]>a{min-height:170px}
[data-rsp="news"]>a:first-child{grid-column:1/-1;grid-row:auto !important;min-height:290px}
}
@media (max-width:1023px){
[data-rsp="hotline"]{display:none !important}
[data-rsp="hero"]{grid-template-columns:1fr !important}
[data-rsp="hero-main"]{height:320px !important}
[data-rsp="hero-side"]{flex-direction:row !important}
[data-rsp="hero-side"]>div{height:130px !important;flex:1}
[data-rsp="grid5"]{grid-template-columns:repeat(3,1fr) !important}
[data-rsp="xakho"]{grid-template-columns:repeat(3,1fr) !important}
[data-rsp="xakho"]>div:first-child{display:none !important}
[data-rsp="car-item"]{flex-basis:calc((100% - 32px)/3) !important}
[data-rsp="flash-card"]{flex-basis:calc((100% - 36px)/4) !important}
[data-rsp="footer-grid"]{grid-template-columns:repeat(2,1fr) !important;gap:26px !important}
[data-rsp="footer-grid"]>div:first-child{grid-column:1/-1}
[data-rsp="camket"]{display:grid !important;grid-template-columns:repeat(2,1fr);gap:20px}
[data-rsp="thucu"]{aspect-ratio:auto !important}
[data-rsp="thucu-img"]{position:static !important;width:100% !important;height:auto !important;aspect-ratio:1334/402;display:block}
[data-rsp="thucu-body"]{position:static !important;width:100% !important;padding:20px !important}
}
@media (max-width:767px){
[data-rsp="topbar-left"]{display:none !important}
[data-rsp="header"]{flex-wrap:wrap !important;gap:14px !important;padding:12px 16px !important}
[data-rsp="search"]{order:3;flex-basis:100%;max-width:none !important}
[data-rsp="hero-wrap"]{padding:14px 16px 6px !important}
[data-screen-label]{padding-left:16px;padding-right:16px}
[data-screen-label="Topbar"],[data-screen-label="Header"],[data-screen-label="Nav"],[data-screen-label="Hero"],[data-screen-label="Footer"]{padding-left:0;padding-right:0}
[data-rsp="hero-main"]{height:230px !important}
[data-rsp="grid5"]{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}
[data-rsp="xakho"]{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}
[data-rsp="car-item"]{flex-basis:calc((100% - 16px)/2) !important}
[data-rsp="flash-card"]{flex-basis:calc((100% - 24px)/3) !important}
[data-rsp="cats"]{grid-template-columns:repeat(4,1fr) !important}
[data-rsp="brands"]{grid-template-columns:repeat(2,1fr) !important}
[data-rsp="news"]{grid-template-columns:repeat(2,1fr) !important}
[data-rsp="strips"]{grid-template-columns:1fr !important}
[data-rsp="thucu-steps"]{grid-template-columns:1fr !important;gap:18px !important}
[data-rsp="thucu-arrow"]{display:none !important}
[data-rsp="thucu-benefits"]{grid-template-columns:repeat(2,1fr) !important;row-gap:14px}
[data-rsp="thucu-benefits"]>div{border-left:0 !important;padding:2px 0 !important}
[data-rsp="thucu-benefits"] div{white-space:normal !important}
[data-rsp="flash-head"]{flex-wrap:wrap;gap:12px}
}
@media (max-width:559px){
[data-rsp="hero-main"]{height:180px !important}
[data-rsp="hero-side"]>div{height:100px !important}
[data-rsp="cats"]{grid-template-columns:repeat(3,1fr) !important}
[data-rsp="brands"]{grid-template-columns:1fr !important}
[data-rsp="news"]{grid-template-columns:1fr !important}
[data-rsp="news"]>a:first-child{min-height:220px}
[data-rsp="flash-card"]{flex-basis:calc((100% - 12px)/2) !important}
[data-rsp="viewed-chip"]{width:100% !important}
[data-rsp="footer-grid"]{grid-template-columns:1fr !important}
[data-rsp="footer-grid"]>div:first-child{grid-column:auto}
[data-rsp="camket"]{grid-template-columns:1fr}
[data-rsp="email-pill"]{flex:1 1 100% !important}
[data-rsp="email-pill"] input{width:100% !important;flex:1;min-width:0}
}

/* ---- Component: card sản phẩm (port từ ProductCard.dc.html) ---- */
[data-card]:hover{box-shadow:0 4px 12px rgba(23,24,29,.10) !important;transform:translateY(-1px) !important;border-color:#F1C7C9 !important}
[data-card] [data-qa]{opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
[data-card]:hover [data-qa],[data-card]:focus-within [data-qa]{opacity:1;transform:translateY(0)}

/* ---- Component: chip tab lọc (style string từ mock runtime) ---- */
.chip{height:36px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;border:1.5px solid #E6E7EC;background:#FFFFFF;color:#55575F}
.chip.on{border-color:#D6191F;background:#D6191F;color:#FFFFFF}

/* ---- Component: ảnh slot (thay image-slot runtime của mock) ---- */
.slot-img{width:100%;height:100%;display:block}
.slot-cover{object-fit:cover;background:rgba(0,0,0,.04)}
.slot-contain{object-fit:contain;background:rgba(0,0,0,.04)}
.slot-clear{background:transparent}
.slot-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;background:rgba(0,0,0,.04);border:1.5px dashed rgba(0,0,0,.25);border-radius:8px;color:rgba(0,0,0,.55);font:13px/1.3 system-ui,-apple-system,sans-serif}

/* ---- WP admin bar không đè sticky header ---- */
.admin-bar [data-sticky-header="on"]{top:32px}

/* ---- Trạng thái hover/focus/active sinh từ style-* của mock ---- */
.hv1:hover{color:#FFFFFF !important}
.hv2:hover{color:#FFD98E !important}
.fc1:focus{border-color:#D6191F !important;background:#FFFFFF !important}
.hv3:hover{background:#B4121B !important}
.ac1:active{background:#A50E13 !important}
.hv4:hover{color:#D6191F !important}
.hv5:hover{background:rgba(255,255,255,.26) !important;color:#FFFFFF !important}
.hv6:hover{background:rgba(255,255,255,.16) !important;color:#FFFFFF !important}
.hv7:hover{background:#FFFFFF !important}
.bf1::before{content:'';position:absolute;inset:-9px}
.hv8:hover{box-shadow:0 6px 16px rgba(23,24,29,.08) !important;border-color:#F1C7C9 !important}
.hv9:hover{background:#E0E1E6 !important}
.hv10:hover{background:rgba(255,255,255,.22) !important}
.hv11:hover{background:#D6191F !important;color:#FFFFFF !important}
.ac2:active{background:#B4121B !important;color:#FFFFFF !important}
.hv12:hover{transform:translateY(-1px) !important;box-shadow:0 4px 12px rgba(23,24,29,.32) !important;color:#FFFFFF !important}
.hv13:hover{transform:translateY(-1px) !important;box-shadow:0 4px 12px rgba(20,40,160,.38) !important;color:#FFFFFF !important}
.hv14:hover{transform:translateY(-1px) !important;box-shadow:0 4px 12px rgba(255,105,0,.38) !important;color:#FFFFFF !important}
.hv15:hover{transform:translateY(-1px) !important;box-shadow:0 4px 12px rgba(4,106,56,.38) !important;color:#FFFFFF !important}
.hv16:hover{transform:translateY(-1px) !important;box-shadow:0 4px 12px rgba(65,95,255,.38) !important;color:#FFFFFF !important}
.hv17:hover{transform:translateY(-1px) !important;box-shadow:0 4px 12px rgba(23,24,29,.10) !important;border-color:#F1C7C9 !important;color:#17181D !important}
.hv18:hover{border-color:#D6191F !important;color:#D6191F !important}
.hv19:hover{box-shadow:0 4px 12px rgba(23,24,29,.16) !important}
.hv20:hover{box-shadow:0 4px 12px rgba(23,24,29,.14) !important}
.hv21:hover{border-color:#D9DBE1 !important}
.hv22:hover{color:#D6191F !important;border-color:#F1C7C9 !important;background:#FDEDED !important}
.hv23:hover{color:#17181D !important;border-color:#B9BBC6 !important}
.hv24:hover{color:#B4121B !important}
.hv25:hover{background:#FDEDED !important}

/* ============ MOBILE ≤767px ============ */
.fcol-chev{display:none}
@media (max-width:767px){
  /* 0. Bỏ thanh nav đỏ (Danh mục/Điện thoại/...) + dải gradient — mobile dùng
     thanh ghim đáy + drawer Danh mục thay thế. */
  [data-screen-label="Nav"],[data-screen-label="Nav"]+div{display:none !important}

  /* 1. Sản phẩm đã xem -> 1 hàng vuốt ngang dạng slide */
  #viewed-list{flex-wrap:nowrap !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin:0 -2px}
  #viewed-list::-webkit-scrollbar{display:none}
  #viewed-list [data-rsp="viewed-chip"]{width:250px !important;flex:0 0 250px;scroll-snap-align:start}

  /* 2. Flash sale: ẩn mũi tên (mobile vuốt tay). scroll-padding-left khôi phục
     lề trái — mandatory snap tự cuộn nuốt padding khiến card sát viền hộp đỏ. */
  [data-car-btn="flash"]{display:none !important}
  [data-car="flash"]{scroll-padding-left:20px;padding-left:20px !important;padding-right:20px !important}

  /* 3. Chip lọc -> 1 hàng vuốt ngang thay vì xuống dòng */
  [data-rsp="chiprow"]{flex-wrap:nowrap !important;flex-basis:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  [data-rsp="chiprow"]::-webkit-scrollbar{display:none}
  [data-rsp="chiprow"] .chip{flex:0 0 auto}

  /* 4. Header section (Xả kho...) cho xuống hàng, không chen chữ */
  [data-rsp="sec-head"]{flex-wrap:wrap !important;gap:10px}

  /* 5. Ẩn Xu hướng tìm kiếm + Thu cũ đổi mới trên mobile */
  [data-screen-label="Xu hướng tìm kiếm"],[data-screen-label="Thu cũ đổi mới"]{display:none !important}

  /* 6. Tin công nghệ -> vuốt ngang; đồng bộ tin lớn = tin nhỏ */
  [data-rsp="news"]{display:flex !important;grid-template-columns:none !important;grid-template-rows:none !important;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;scrollbar-width:none}
  [data-rsp="news"]::-webkit-scrollbar{display:none}
  [data-rsp="news"]>a{flex:0 0 280px !important;grid-row:auto !important;grid-column:auto !important;min-height:180px !important;scroll-snap-align:start}
  [data-rsp="news"]>a:first-child>div:nth-child(2){height:68% !important}
  [data-rsp="news"]>a:first-child>div:last-child{padding:11px 13px !important}
  [data-rsp="news"]>a:first-child>div:last-child>div{font-size:13px !important;font-weight:700 !important;line-height:1.45 !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important}

  /* 8. Thương hiệu nổi bật -> vuốt ngang dạng slide */
  [data-rsp="brands"]{display:flex !important;grid-template-columns:none !important;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;scrollbar-width:none}
  [data-rsp="brands"]::-webkit-scrollbar{display:none}
  [data-rsp="brands"]>a{flex:0 0 240px !important;scroll-snap-align:start}

  /* 7. Footer: cột link -> accordion bấm mở/đóng */
  .fcol-chev{display:block}
  [data-fcol]{border-top:1px solid #ECEDF1}
  [data-fcol] .fcol-head{display:flex !important;align-items:center;justify-content:space-between;margin-bottom:0 !important;cursor:pointer;padding:15px 2px;user-select:none}
  [data-fcol] .fcol-chev{color:#6B6E78;flex:none;transition:transform .25s}
  [data-fcol]>a{display:none !important}
  [data-fcol].open>a{display:block !important}
  [data-fcol].open .fcol-head{margin-bottom:6px !important}
  [data-fcol].open .fcol-chev{transform:rotate(180deg)}
}

/* ============ MOBILE BOTTOM NAV + DRAWER DANH MỤC ============ */
.mobile-botnav{display:none}
.cat-drawer{display:none}
@media (min-width:768px){ .mobile-botnav,.cat-drawer{display:none !important} }
@media (max-width:767px){
  body{padding-bottom:58px}

  /* Thanh ghim đáy 5 mục */
  .mobile-botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;background:#FFFFFF;border-top:1px solid #ECEDF1;box-shadow:0 -2px 14px rgba(23,24,29,.07);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .botnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;cursor:pointer;padding:4px 2px;color:#6B6E78;font-family:inherit}
  .botnav-item svg{width:23px;height:23px}
  .botnav-item span{font-size:10.5px;font-weight:600;letter-spacing:.1px}
  .botnav-item.active{color:#D6191F}

  /* Drawer Danh mục */
  .cat-drawer.open{display:flex;position:fixed;inset:0;z-index:300;background:#E5E7EB;flex-direction:column}
  .cat-drawer-top{flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,#C4141B 0%,#E8471F 100%)}
  .cat-drawer-logo{display:inline-flex;align-items:center}
  .cat-drawer-logo img{height:22px;width:auto;display:block}
  .cat-drawer-close{width:34px;height:34px;border:0;background:rgba(255,255,255,.18);border-radius:999px;color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .cat-drawer-body{flex:1;display:flex;min-height:0}
  .cat-drawer-side{flex:none;width:92px;background:#FFFFFF;overflow-y:auto;border-right:1px solid #ECEDF1;scrollbar-width:none}
  .cat-drawer-side::-webkit-scrollbar{display:none}
  .cd-tab{width:100%;display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 4px;border:0;border-left:3px solid transparent;background:none;cursor:pointer;color:#55575F;font-family:inherit}
  .cd-tab-ico{display:flex}.cd-tab-ico svg{width:24px;height:24px}
  .cd-tab-label{font-size:11px;font-weight:600;text-align:center;line-height:1.25}
  .cd-tab.active{background:#FDEDED;color:#D6191F;border-left-color:#D6191F}
  .cat-drawer-content{flex:1;overflow-y:auto;padding:14px 14px 30px}
  .cd-panel{display:none}
  .cd-panel.active{display:block}
  .cd-block{background:#FFFFFF;border-radius:12px;padding:12px 14px;margin-bottom:10px}
  .cd-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
  .cd-panel-title{font-size:16px;font-weight:800;color:#17181D}
  .cd-panel-all{font-size:13px;font-weight:700;color:#D6191F;display:inline-flex;align-items:center;gap:3px}
  .cd-section-label{font-size:13px;font-weight:800;color:#17181D;margin:0 0 10px}
  .cd-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
  .cd-brand{position:relative;border:1px solid #E6E7EC;border-radius:8px;height:46px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#3A3C44;background:#FFFFFF;text-align:center;padding:0 4px;line-height:1.2}
  .cd-brand.hot::after{content:"HOT";position:absolute;top:-7px;left:5px;background:#D6191F;color:#FFFFFF;font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:5px;letter-spacing:.3px}
  .cd-brand-logo{max-width:82%;max-height:26px;object-fit:contain;display:block}
  .cd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .dw-card{background:#FFFFFF;border:1px solid #EEEFF2;border-radius:10px;padding:7px;display:flex;flex-direction:column;gap:5px}
  .dw-card-img{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:#F6F6F8}
  .dw-card-name{font-size:11.5px;font-weight:600;line-height:1.35;color:#17181D;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px}
  .dw-card-price{font-size:12.5px;font-weight:800;color:#D6191F}
  .cd-empty{font-size:13px;color:#6B6E78;padding:22px 2px}
}