@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* ===== Phúc Anh brand colors — lấy mẫu trực tiếp từ file logo chính thức ===== */
  --pa-red:#EB1F28;
  --pa-red-dark:#C0161E;
  --pa-red-tint:#FDEAEA;
  --pa-blue:#2842B3;
  --pa-blue-dark:#17337F;
  --pa-blue-light:#EAF0FF;

  /* aliases nội bộ (giữ tương thích code cũ) */
  --signal:var(--pa-blue);
  --signal-dark:var(--pa-blue-dark);
  --signal-tint:var(--pa-blue-light);
  --ember:var(--pa-red);
  --ember-tint:var(--pa-red-tint);

  /* neutrals theo brand guideline */
  --ink:#222222;
  --ink-70:#222222b3;
  --paper:#F5F6F8;
  --panel:#ffffff;
  --line:#E5E7EB;
  --line-strong:#C6CBD3;
  --muted:#666666;
  --success:#187a4e;
  --success-tint:#e7f5ee;
  --amber:#c98a12;
  --amber-tint:#fbf1de;
  --radius:10px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(23,51,127,.05), 0 8px 24px rgba(23,51,127,.08);
  --font-display:'Be Vietnam Pro', sans-serif;
  --font-body:'Be Vietnam Pro', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
svg.icon{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:middle;}
svg.icon.ic-sm{width:15px; height:15px; stroke-width:2;}
svg.icon.ic-lg{width:28px; height:28px;}
svg.icon.star-ic{width:13px; height:13px; color:var(--amber); stroke-width:1.4;}
html{overflow-x:hidden;}
body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em;}
.mono{font-family:var(--font-mono);}
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--signal); display:inline-flex; align-items:center; gap:6px; margin-bottom:8px;
}
.eyebrow::before{content:'['; color:var(--line-strong);}
.eyebrow::after{content:']'; color:var(--line-strong);}

/* ============ TOP BAR ============ */
.topbar{background:var(--pa-blue-dark); color:#fff; font-size:12.5px;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:36px;}
.topbar-links{display:flex; gap:22px;}
.topbar-links a{opacity:.82;}
.topbar-links a:hover{opacity:1; color:#fff;}
.topbar-right{display:flex; gap:18px; opacity:.9;}

/* ============ HEADER ============ */
header.site{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60;}
.header-main{display:flex; align-items:center; gap:24px; padding:14px 0; min-height:76px;}
.logo{display:flex; align-items:center; white-space:nowrap;}
.logo-img{height:34px; width:auto; display:block;}
@media (max-width:720px){ .logo-img{height:28px;} }
.search-box{flex:1; position:relative; max-width:640px;}
.search-input-wrap{
  display:flex; align-items:center; gap:10px; border:1.5px solid var(--pa-blue); border-radius:999px;
  height:46px; padding:0 8px 0 18px; background:#fff; box-sizing:border-box;
}
.search-input-wrap:focus-within{border-color:var(--pa-blue); box-shadow:0 0 0 3px var(--pa-blue-light);}
.search-prompt{font-family:var(--font-mono); color:var(--pa-blue); font-size:14px; flex-shrink:0;}
.search-input-wrap input{
  flex:1; border:0; outline:0; font-size:14.5px; font-family:var(--font-body); background:transparent; height:100%; min-width:0;
}
.search-clear{
  display:none; width:22px; height:22px; border-radius:50%; background:var(--line); color:var(--muted); flex-shrink:0;
  align-items:center; justify-content:center; border:0; padding:0;
}
.search-clear.show{display:flex;}
.search-btn{
  background:var(--pa-blue); color:#fff; border:0; border-radius:999px; padding:0 20px; height:36px; flex-shrink:0;
  font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:6px;
}
.search-btn:hover{background:var(--pa-blue-dark);}
.search-suggest{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:10px; display:none; z-index:50;
}
.search-suggest.open{display:block;}
.search-suggest .sg-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:6px 10px 2px; display:flex; align-items:center; gap:6px;}
.search-suggest .sg-row{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:8px;}
.search-suggest .sg-row:hover{background:var(--paper);}
.search-suggest .sg-thumb{width:34px; height:34px; border-radius:6px; background:var(--pa-blue-light); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.search-suggest .sg-thumb img{width:100%; height:100%; object-fit:contain;}
.search-suggest .sg-name{font-size:13.5px; font-weight:500; line-height:1.35;}
.search-suggest .sg-meta{font-size:12px; color:var(--muted);}
.search-ai-hint{font-size:11.5px; color:var(--pa-blue); background:var(--pa-blue-light); border-radius:8px; padding:8px 10px; margin-bottom:6px; display:flex; align-items:center; gap:6px;}

.header-ai-btn{
  display:flex; align-items:center; gap:7px; height:46px; padding:0 16px; border-radius:999px; flex-shrink:0;
  background:var(--pa-blue-dark); color:#fff; font-size:13.5px; font-weight:600; border:0;
}
.header-ai-btn:hover{background:#0f2359;}

.header-actions{display:flex; align-items:center; gap:4px; white-space:nowrap; height:46px;}
.header-actions .ha-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10.5px; color:var(--muted);
  gap:2px; position:relative; width:58px; height:46px; border-radius:10px; transition:background .12s, color .12s;
}
.header-actions .ha-item:hover{background:var(--pa-blue-light); color:var(--pa-blue);}
.header-actions .ha-item:focus-visible{outline:2px solid var(--pa-blue); outline-offset:2px;}
.header-actions .ha-icon{display:flex; align-items:center; justify-content:center; height:22px; position:relative;}
.badge-count{
  position:absolute; top:-5px; right:-8px; background:var(--ember); color:#fff; font-size:9.5px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px;
  line-height:1; border:1.5px solid #fff;
}

/* ============ MEGA MENU ============ */
.megabar{background:var(--pa-blue); position:relative;}
.megabar .wrap{display:flex; gap:2px; align-items:center;}
.mega-trigger{flex-shrink:0;}
.mega-trigger{position:relative;}
.mega-trigger>span, .mega-trigger>a{
  display:flex; align-items:center; gap:6px; height:44px; padding:0 16px; color:#fff; font-size:13.5px; font-weight:500; cursor:pointer;
  text-decoration:none;
}
.mega-trigger:hover>span, .mega-trigger.active>span, .mega-trigger:hover>a, .mega-trigger.active>a{background:rgba(255,255,255,.1); color:#fff;}
.mega-trigger.promo{margin-left:auto;}
.mega-trigger.promo>span, .mega-trigger.promo>a{background:var(--pa-red); border-radius:6px; margin:6px 4px; font-weight:700;}
.mega-trigger.promo:hover>span, .mega-trigger.promo:hover>a{background:var(--pa-red-dark);}
.mega-panel{
  display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--line);
  border-top:none; box-shadow:var(--shadow); min-width:640px; padding:22px 26px; z-index:70;
  grid-template-columns:repeat(3,1fr); gap:22px;
}
.mega-trigger:hover .mega-panel, .mega-trigger:focus-within .mega-panel{display:grid;}
.mega-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px; font-family:var(--font-mono); font-weight:500;}
.mega-col a{display:block; font-size:13.5px; padding:6px 0; color:var(--ink); border-bottom:1px solid transparent;}
.mega-col a:hover{color:var(--signal);}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px;
  font-weight:600; font-size:14px; padding:12px 24px; border:1.5px solid transparent; transition:transform .12s;
}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.45; cursor:not-allowed; pointer-events:none;}
.btn-primary, .btn-red{background:var(--pa-red); color:#fff;}
.btn-primary:hover, .btn-red:hover{background:var(--pa-red-dark);}
.btn-blue, .btn-signal{background:var(--pa-blue); color:#fff;}
.btn-blue:hover, .btn-signal:hover{background:var(--pa-blue-dark);}
.btn-primary:hover{background:#000;}
.btn-signal{background:var(--signal); color:#fff;}
.btn-signal:hover{background:var(--signal-dark);}
.btn-outline{background:#fff; border-color:var(--pa-blue); color:var(--pa-blue);}
.btn-outline:hover{background:var(--pa-blue); color:#fff;}
.btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn-block{width:100%;}

/* ============ SECTION ============ */
.section{padding:52px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; gap:16px;}
.section-head .see-all{font-size:13px; font-weight:600; color:var(--signal); font-family:var(--font-mono);}

/* ============ PRODUCT CARD ============ */
.grid-cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; position:relative; transition:border-color .15s, transform .15s;
}
.card:hover{border-color:var(--line-strong); transform:translateY(-2px);}
.card-media{
  aspect-ratio:1/1; background:var(--pa-blue-light); display:flex; align-items:center;
  justify-content:center; position:relative; color:var(--pa-blue); font-family:var(--font-mono); font-size:12px; overflow:hidden;
}
.card-media img{width:100%; height:100%; object-fit:contain; background:#fff; padding:10px;}
.card-media.no-image{background:linear-gradient(135deg,var(--pa-blue-light),#dfe6fb);}
.media-fallback-label{font-family:var(--font-mono); font-size:12px; color:var(--pa-blue); font-weight:600;}
.media-fallback-fill{
  width:100%; height:100%; min-height:80px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; background:var(--pa-blue-light); color:var(--pa-blue); border-radius:inherit; padding:12px; box-sizing:border-box;
}
.media-fallback-fill span{font-family:var(--font-mono); font-size:12px; font-weight:600; text-align:center;}
.hero-slide-media .media-fallback-fill, .promo-hub-media .media-fallback-fill{background:rgba(255,255,255,.08); color:#fff;}
.hero-slide-media .media-fallback-fill span, .promo-hub-media .media-fallback-fill span{color:#fff;}
.card-tag{
  position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  padding:4px 8px; border-radius:6px; letter-spacing:.03em; text-transform:uppercase;
}
.tag-sale{background:var(--ember); color:#fff;}
.tag-new{background:var(--signal); color:#fff;}
.tag-hot{background:var(--pa-red-dark); color:#fff;}
.tag-stock-low{background:var(--amber-tint); color:var(--amber); left:auto; right:10px; top:46px;}
.demo-flag{margin-left:6px; font-size:9.5px; background:var(--line); color:var(--muted); padding:1px 5px; border-radius:4px; text-transform:uppercase; letter-spacing:.03em;}
.card-fav{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:#fff;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px;
}
.card-body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-brand{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-mono);}
.card-name{font-size:14px; font-weight:600; line-height:1.35; min-height:38px;}
.card-specs{font-size:11.5px; color:var(--muted); font-family:var(--font-mono);}
.card-rating{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted);}
.stars{display:inline-flex; align-items:center; gap:1px;}
.card-price-row{display:flex; align-items:baseline; gap:8px; margin-top:2px;}
.price-now{font-family:var(--font-mono); font-weight:700; font-size:16.5px; color:var(--pa-red);}
.price-old{font-family:var(--font-mono); font-size:12px; color:var(--muted); text-decoration:line-through;}
.price-off{font-family:var(--font-mono); font-size:11px; color:var(--ember); font-weight:700;}
.card-install{font-size:11px; color:var(--muted);}
.card-actions{display:flex; gap:8px; margin-top:8px;}
.icon-btn{
  width:38px; height:38px; border-radius:8px; border:1px solid var(--line-strong); background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
.icon-btn.active{background:var(--signal-tint); border-color:var(--signal); color:var(--signal);}

/* ============ QUICK CATEGORY (Danh mục sản phẩm) — dùng lại pattern card của Shop-by-Need cũ ============ */
.quick-cat-row{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
.quick-cat-item{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 10px; text-align:center;
  background:#fff; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink);
}
.quick-cat-item:hover{border-color:var(--pa-blue); background:var(--pa-blue-light);}
.quick-cat-icon{color:var(--pa-blue); display:flex;}
.quick-cat-name{font-size:12.5px; font-weight:600;}
.quick-cat-count{font-size:10.5px; color:var(--muted);}

/* ============ QUICK FINDER (Xem nhanh — chọn đúng máy) ============ */
.quick-finder-pills{display:flex; flex-wrap:wrap; gap:8px;}
.quick-finder-pill{
  display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-size:13px; font-weight:500; color:var(--ink); cursor:pointer;
}
.quick-finder-pill:hover{border-color:var(--pa-blue);}
.quick-finder-pill.active{background:var(--pa-blue); border-color:var(--pa-blue); color:#fff;}
.quick-finder-pill-ai{background:var(--pa-blue-light); border-color:var(--pa-blue-light); color:var(--pa-blue); font-weight:600;}

/* ============ GỢI Ý CHO BẠN (AI Recommendation) ============ */
/* 1 hàng 5 cột: Pana Pick (1.3fr) + 4 product card (1fr mỗi card) — featured chỉ lớn hơn vừa phải,
   không còn chiếm ~35% hàng như bản cũ (1.1fr / tổng 3.1fr). align-items:start để card không bị grid
   kéo giãn theo hàng cao nhất, tránh khoảng trắng thừa / thông tin bị dồn xuống dưới. */
.recommend-layout{display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:16px; align-items:start;}
.recommend-featured{position:relative;}
.recommend-featured-badge{
  position:absolute; top:10px; left:10px; z-index:2; background:var(--pa-blue-dark); color:#fff; font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:999px; display:flex; align-items:center; gap:5px;
}
/* Featured tái sử dụng .card-tag (badge giảm giá) — đẩy sang phải để không đè lên badge Pana Pick bên trái */
.recommend-featured .card-tag.tag-sale{left:auto; right:10px; top:10px;}
.recommend-featured-note{font-size:12px; color:var(--muted); line-height:1.4; margin:2px 0 4px;}
@media (max-width:1080px){
  /* Tablet: featured trải hết hàng đầu (ảnh nằm ngang bên trái, tránh ảnh vuông full-width quá to),
     4 card còn lại xếp lưới 2x2 bên dưới. */
  .recommend-layout{grid-template-columns:repeat(2,1fr);}
  .recommend-featured{grid-column:1 / -1; display:flex; flex-direction:row;}
  .recommend-featured .card-media{width:180px; flex-shrink:0;}
  .recommend-featured .card-body{flex:1;}
}
@media (max-width:600px){
  .recommend-featured .card-media{width:120px;}
}

/* ============ 4 BANNER (ảnh thật local, tỷ lệ portrait — 4 cột desktop, 2x2 mobile) ============ */
.quad-banner-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.quad-banner{display:block; border-radius:var(--radius-lg); overflow:hidden; line-height:0; transition:transform .25s, box-shadow .25s;}
.quad-banner:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.quad-banner img{width:100%; height:auto; display:block;}
@media (max-width:900px){ .quad-banner-row{grid-template-columns:repeat(2,1fr);} }

/* ============ STORE MAP LAYOUT (Google Map thật + danh sách showroom) ============ */
.store-map-layout{display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:start;}
.store-map-embed{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); min-height:420px;}
.store-map-embed iframe{width:100%; height:100%; min-height:420px; border:0; display:block;}
.store-grid.store-grid-side{display:flex; flex-direction:column; gap:12px; max-height:420px; overflow-y:auto; padding-right:4px;}
.store-grid-side .store-card{flex-shrink:0;}
.store-grid-side .store-card-map{display:none;}
@media (max-width:1024px){
  .store-map-layout{grid-template-columns:1fr;}
  .store-grid-side{max-height:none;}
}


/* ============ HERO ============ */
.hero{padding:36px 0 0;}

/* ============ HERO BANNER (ảnh khuyến mãi thật, thay cho carousel text cũ) ============ */
.hero-banner-link{
  display:block; position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--pa-blue-light);
  line-height:0;
}
.hero-banner-img{width:100%; height:auto; display:block; object-fit:contain;}
.hero-banner-fallback{
  display:none; align-items:center; justify-content:center; gap:10px; flex-direction:column;
  aspect-ratio:16/6; background:var(--pa-blue-light); color:var(--pa-blue); font-family:var(--font-mono); font-size:13px; padding:20px; text-align:center;
}
.hero-banner-link.img-failed .hero-banner-img{display:none;}
.hero-banner-link.img-failed .hero-banner-fallback{display:flex;}
@media (max-width:720px){ .hero-banner-fallback{aspect-ratio:4/3;} }

/* ============ BANNER NGANG (dùng lại pattern hero-banner, tỷ lệ landscape rộng) ============ */
.wide-banner-link{display:block; border-radius:var(--radius-lg); overflow:hidden; line-height:0; transition:transform .25s, box-shadow .25s;}
.wide-banner-link:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.wide-banner-link img{width:100%; height:auto; display:block;}

/* ============ 5 BANNER NHỎ ============ */
.mini-banner-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:12px;
}
.mini-banner{
  display:block; position:relative; border-radius:12px; overflow:hidden; aspect-ratio:230/100; background:var(--pa-blue-light);
  cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; line-height:0;
}
.mini-banner:hover{transform:translateY(-2px) scale(1.015); box-shadow:var(--shadow);}
.mini-banner img{width:100%; height:100%; object-fit:cover; display:block;}
.mini-banner-fallback{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center; color:var(--pa-blue); background:var(--pa-blue-light);
}
.mini-banner.img-failed img{display:none;}
.mini-banner.img-failed .mini-banner-fallback{display:flex;}
@media (max-width:900px){
  .mini-banner-row{grid-auto-flow:column; grid-auto-columns:minmax(160px,1fr); grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px;}
  .mini-banner{scroll-snap-align:start;}
  .quick-cat-row{grid-auto-flow:column; grid-auto-columns:minmax(110px,1fr); grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px;}
  .quick-cat-item{scroll-snap-align:start;}
}

/* ============ AI STRIP dưới hero (không che banner) ============ */
.hero-ai-strip{
  display:flex; align-items:center; gap:12px; margin-top:16px; padding:14px 18px; border-radius:12px;
  background:var(--pa-blue-light); color:var(--pa-blue-dark); font-size:13.5px; text-decoration:none; transition:background .15s;
}
.hero-ai-strip:hover{background:#dde6fc;}
.hero-ai-strip-icon{
  width:32px; height:32px; border-radius:50%; background:var(--pa-blue); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.hero-ai-strip b{color:var(--pa-blue-dark);}
@media (max-width:600px){ .hero-ai-strip span:not(.hero-ai-strip-icon){font-size:12.5px;} }

.hero-grid{display:grid; grid-template-columns:2fr 1fr; gap:16px;}
.hero-main{
  background:linear-gradient(120deg, var(--pa-blue-dark) 55%, var(--pa-blue)); color:#fff; border-radius:var(--radius-lg); padding:40px; position:relative;
  overflow:hidden; min-height:280px; display:flex; flex-direction:column; justify-content:center;
}
.hero-main::after{
  content:''; position:absolute; right:-40px; top:-40px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(235,31,40,.28), transparent 70%);
}
.hero-main .eyebrow{color:#c3d0ff;}
.hero-main h1{font-size:34px; color:#fff; max-width:460px; position:relative;}
.hero-main p{color:#dbe3fb; margin-top:10px; max-width:420px; position:relative;}
.hero-main .btn{margin-top:20px; width:fit-content; position:relative;}
.hero-side{display:flex; flex-direction:column; gap:16px;}
.hero-side-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; background:#fff; flex:1;
  display:flex; flex-direction:column; justify-content:space-between;
}
.hero-side-card h3{font-size:16px;}
.hero-side-card p{font-size:12.5px; color:var(--muted); margin:6px 0 12px;}

/* ============ AI ASSISTANT BLOCK (Blue/White container theo brand — CTA chính màu đỏ) ============ */
.ai-block{
  background:var(--pa-blue-dark); border-radius:var(--radius-lg); padding:32px 36px; display:grid;
  grid-template-columns:1fr 1fr; gap:32px; color:#fff; align-items:center;
}
.ai-block .eyebrow{color:#c3d0ff;}
.ai-block h2{color:#fff; font-size:26px; margin-bottom:10px;}
.ai-block p{color:#dbe3fb; font-size:14px; margin-bottom:18px;}
.ai-chat-demo{background:var(--pa-blue); border-radius:12px; padding:16px; font-size:13px;}
.ai-msg{display:flex; gap:10px; margin-bottom:12px;}
.ai-msg .who{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0; font-family:var(--font-mono);
}
.ai-msg.user .who{background:rgba(255,255,255,.18); color:#fff;}
.ai-msg.bot .who{background:var(--pa-red); color:#fff;}
.ai-msg .bubble{background:rgba(255,255,255,.1); border-radius:10px; padding:9px 12px; color:#fff; line-height:1.5;}
.ai-msg.user .bubble{background:rgba(255,255,255,.16);}
.ai-input-row{display:flex; gap:8px; margin-top:6px;}
.ai-input-row input{flex:1; border-radius:8px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; padding:9px 12px; font-size:13px;}
.ai-input-row input::placeholder{color:#c3d0ff;}
.ai-input-row button{background:var(--pa-red); border:0; color:#fff; border-radius:8px; padding:0 16px; font-weight:600; font-size:13px;}
.ai-input-row button:hover{background:var(--pa-red-dark);}
.ai-chip{display:inline-block; background:rgba(255,255,255,.12); color:#fff; font-size:11.5px; padding:6px 10px; border-radius:999px; margin:2px 4px 2px 0; font-family:var(--font-mono); cursor:pointer;}

/* ============ PAMI FLOATING CHAT — bubble góc phải dưới + panel (không phải modal full-screen) ============ */
.pami-bubble{
  position:fixed; right:24px; bottom:24px; z-index:280; background:var(--pa-blue-dark); color:#fff; border:0;
  border-radius:999px; padding:12px 18px 12px 14px; display:flex; align-items:center; gap:9px; cursor:pointer;
  box-shadow:0 8px 24px rgba(23,51,127,.35); transition:bottom .2s ease;
}
/* PDP sticky purchase bar hiện ở cùng vị trí góc dưới — nâng bubble Pami lên tránh đè lên nút Mua ngay. */
body.pdp-sticky-active .pami-bubble{ bottom:88px; }
.pami-bubble:hover{background:var(--pa-blue);}
.pami-bubble-text{display:flex; flex-direction:column; align-items:flex-start; line-height:1.25;}
.pami-bubble-text b{font-size:13px;}
.pami-bubble-text small{font-size:10.5px; color:#c3d0ff; font-weight:400;}
.pami-panel{
  position:fixed; right:24px; bottom:24px; z-index:290; width:400px; height:620px; max-height:calc(100vh - 48px);
  background:var(--pa-blue-dark); border-radius:16px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 16px 48px rgba(15,23,60,.35); transform:translateY(16px) scale(.98); opacity:0; pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
}
.pami-panel.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}
.pami-panel-head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.15); flex-shrink:0;}
.pami-panel-title{display:flex; align-items:center; gap:9px; color:#fff;}
.pami-panel-title span{display:flex; flex-direction:column; line-height:1.25;}
.pami-panel-title b{font-size:14px;}
.pami-panel-title small{font-size:11px; color:#c3d0ff; font-weight:400;}
.pami-panel-head button{background:none; border:0; color:#c3d0ff; display:flex;}
.pami-panel-body{flex:1; overflow-y:auto; padding:16px; font-size:13px;}
.pami-panel-foot{padding:12px 16px; border-top:1px solid rgba(255,255,255,.15); flex-shrink:0;}
.pami-quick-actions{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.pami-quick-actions button{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:10px; padding:10px 12px; font-size:12.5px; text-align:left; cursor:pointer;
}
.pami-quick-actions button:hover{background:rgba(255,255,255,.16);}
.pami-suggest-label{font-size:11px; color:#9fb0e0; text-transform:uppercase; letter-spacing:.04em; margin:16px 0 8px; font-family:var(--font-mono);}
.pami-suggest-chips{display:flex; flex-wrap:wrap; gap:6px;}
@media (max-width:720px){
  .pami-bubble{right:16px; bottom:calc(70px + 16px);}
  body.pdp-sticky-active .pami-bubble{ bottom:calc(70px + 16px + 64px); }
  .pami-panel{right:12px; left:12px; bottom:calc(70px + 12px); width:auto; height:min(70vh, 650px); max-height:calc(100vh - 70px - 24px);}
}
.ai-chip:hover{background:rgba(255,255,255,.22);}

/* ============ STORE LOCATOR ============ */
.store-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.store-card{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; display:flex; flex-direction:column;}
.store-card-map{
  height:90px; background:var(--pa-blue-light); color:var(--pa-blue); display:flex; align-items:center; justify-content:center;
  font-size:26px;
}
.store-card-body{padding:16px;}
.store-card-body h4{font-size:14.5px; margin-bottom:6px;}
.store-card-body p{font-size:12.5px; color:var(--muted); margin:0 0 6px; line-height:1.5;}
.store-card-body .sc-meta a{color:var(--pa-blue); font-weight:600;}
.sc-actions{display:flex; gap:8px; margin-top:10px;}
.sc-actions .btn{flex:1; padding:8px 10px; font-size:12.5px;}
@media (max-width:1080px){ .store-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:720px){ .store-grid{grid-template-columns:1fr;} }

/* ============ TRUST STRIP ============ */
.trust-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; text-align:center;}
.trust-item{padding:18px 10px; border-right:1px solid var(--line);}
.trust-item:last-child{border-right:0;}
.trust-item .ti-icon{font-size:22px; margin-bottom:8px;}
.trust-item .ti-title{font-size:13px; font-weight:600;}
.trust-item .ti-sub{font-size:11.5px; color:var(--muted); margin-top:2px;}

/* ============ FOOTER ============ */
footer.site{background:var(--pa-blue); color:#dbe3fb; margin-top:60px;}
.footer-logo{height:30px; margin-bottom:14px; filter:brightness(0) invert(1);}
.footer-grid{display:grid; grid-template-columns:1.5fr 1.3fr 1fr 1fr 1.1fr; gap:24px; padding:44px 0 24px;}
.footer-grid h5{color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; font-family:var(--font-mono); font-weight:500;}
.footer-grid a{display:block; font-size:13px; padding:5px 0; color:#c3d0ff;}
.footer-grid a:hover{color:#fff;}
.footer-store{border-top:1px solid rgba(255,255,255,.15); padding:10px 0; font-size:12.5px;}
.footer-store:first-of-type{border-top:0; padding-top:0;}
.footer-store .fs-name{color:#fff; font-weight:600; display:block; margin-bottom:2px;}
.footer-store .fs-line{color:#c3d0ff; display:block; line-height:1.6;}
.footer-store .fs-line a{display:inline; padding:0; color:#c3d0ff;}
.footer-store .fs-line a:hover{color:#fff; text-decoration:underline;}
.footer-newsletter-row{display:flex; gap:8px; margin-top:10px;}
.footer-newsletter-row input{flex:1; border-radius:8px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; padding:10px 12px; font-size:13px;}
.footer-newsletter-row input::placeholder{color:#c3d0ff;}
.footer-newsletter-row button{background:var(--pa-red); color:#fff; border:0; border-radius:8px; padding:0 16px; font-weight:700; font-size:12px; white-space:nowrap;}
.footer-newsletter-row button:hover{background:var(--pa-red-dark);}
.footer-legal{font-size:11.5px; color:#9fb0e0; margin-top:14px; line-height:1.6; max-width:320px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15); padding:16px 0; font-size:12px; display:flex; justify-content:space-between; color:#c3d0ff; flex-wrap:wrap; gap:8px;}
.footer-bottom a{display:inline; padding:0; color:#fff; font-weight:600;}

/* ============ FOOTER — bổ sung: social button, hotline grid, payment badges, secondary row ============ */
.footer-social-btn{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center;
  justify-content:center; padding:0; transition:background .15s;
}
.footer-social-btn:hover{background:rgba(255,255,255,.24);}
.footer-hotline-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 10px;}
.footer-hotline-item .fh-label{color:#fff; font-size:12px; font-weight:600; margin-bottom:2px;}
.footer-hotline-item .fh-number{font-family:var(--font-mono); font-size:15px; font-weight:700; color:#fff; padding:0; display:block;}
.footer-hotline-item .fh-hours{font-size:10.5px; color:#9fb0e0; margin-top:2px;}
.footer-secondary-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;
  padding:20px 0; border-top:1px solid rgba(255,255,255,.15);
}
.footer-secondary-row h5{color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; font-family:var(--font-mono); font-weight:500;}
.footer-payment-badges{display:flex; gap:8px; flex-wrap:wrap;}
.pay-badge{
  background:#fff; color:var(--pa-blue-dark); font-size:10.5px; font-weight:700; font-family:var(--font-mono);
  padding:6px 10px; border-radius:6px; letter-spacing:.02em;
}
.footer-newsletter{min-width:280px;}
.footer-newsletter p{font-size:12px; color:#c3d0ff; margin:0 0 8px;}

/* mobile footer accordion */
.footer-accordion{display:none;}
@media (max-width:900px){
  .footer-grid{display:none;}
  .footer-secondary-row{display:none;}
  .footer-accordion{display:block;}
  .footer-accordion details{border-top:1px solid rgba(255,255,255,.15); padding:12px 0;}
  .footer-accordion summary{color:#fff; font-weight:600; font-size:13.5px; list-style:none; display:flex; justify-content:space-between; cursor:pointer;}
  .footer-accordion summary::-webkit-details-marker{display:none;}
  .footer-accordion summary::after{content:'+';}
  .footer-accordion details[open] summary::after{content:'–';}
  .footer-accordion .fa-body{padding-top:10px;}
  .footer-call-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; background:var(--pa-red); color:#fff;
    font-weight:700; padding:13px; border-radius:10px; margin:16px 0 4px; font-size:14px;
  }
}

/* ============ BREADCRUMB ============ */
.breadcrumb{font-size:12.5px; color:var(--muted); padding:16px 0 6px; display:flex; gap:6px; flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--signal);}
.breadcrumb span{color:var(--line-strong);}

/* ============ CATEGORY LAYOUT ============ */
.cat-header{padding:6px 0 20px;}
.cat-header h1{font-size:28px;}
.cat-header p{color:var(--muted); font-size:14px; max-width:760px; margin-top:8px;}
.subcat-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.subcat-chip{
  border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:13px; font-weight:500; background:#fff;
  display:inline-flex; align-items:center; gap:6px;
}
.subcat-chip.active{background:var(--pa-blue); color:#fff; border-color:var(--pa-blue);}
.subcat-chip:hover{border-color:var(--pa-blue);}

.cat-layout{display:grid; grid-template-columns:260px 1fr; gap:26px; align-items:flex-start;}
.cat-layout.no-filter{grid-template-columns:1fr;}
.filter-panel{border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; position:sticky; top:150px; background:#fff;}
.filter-group{border-bottom:1px solid var(--line); padding:14px 0;}
.filter-group:first-child{padding-top:0;}
.filter-group:last-child{border-bottom:0;}
.filter-group summary{font-size:13.5px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.filter-group summary::-webkit-details-marker{display:none;}
.filter-group summary::after{content:'+'; color:var(--muted); font-weight:400;}
.filter-group[open] summary::after{content:'–';}
.filter-opt{display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 0; color:var(--ink);}
.filter-opt input{accent-color:var(--signal);}
.price-range{display:flex; gap:8px; margin-top:8px;}
.price-range input{width:100%; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:12.5px; font-family:var(--font-mono);}

.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:16px; flex-wrap:wrap;}
.result-count{font-size:13px; color:var(--muted);}
.sort-select{border:1px solid var(--line); border-radius:8px; padding:9px 14px; font-size:13px; background:#fff;}
.grid-cards.cat{grid-template-columns:repeat(3, 1fr);}

.compare-bar{
  position:fixed; left:0; right:0; bottom:0; background:var(--pa-blue-dark); color:#fff; padding:14px 0; transform:translateY(110%);
  transition:transform .25s; z-index:80;
}
.compare-bar.open{transform:translateY(0);}
.compare-bar .wrap{display:flex; align-items:center; gap:16px;}
.compare-slots{display:flex; gap:10px; flex:1;}
.compare-slot{width:52px; height:52px; border:1px dashed rgba(255,255,255,.35); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:10px; color:rgba(255,255,255,.6); position:relative;}
.compare-slot.filled{border-style:solid; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; font-size:9px; text-align:center; padding:2px;}

/* ============ SO SÁNH SẢN PHẨM — bảng so sánh chi tiết (modal), tái dùng .btn/.icon-btn ============ */
.compare-overlay{
  position:fixed; inset:0; background:rgba(23,51,127,.45); z-index:410; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s; padding:20px;
}
.compare-overlay.open{opacity:1; pointer-events:auto;}
.compare-panel{
  width:100%; max-width:960px; max-height:88vh; background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; transform:translateY(12px); transition:transform .2s;
}
.compare-overlay.open .compare-panel{transform:translateY(0);}
.compare-head{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.compare-head-title{display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px;}
.compare-diff-toggle{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); cursor:pointer; margin-left:auto;}
.compare-head button[aria-label]{background:none; border:0; color:var(--muted); display:flex;}
.compare-body{padding:16px 20px 20px; overflow:auto; flex:1;}
.compare-table-wrap{overflow-x:auto;}
.compare-table{width:100%; border-collapse:collapse; font-size:13px; min-width:520px;}
.compare-table th, .compare-table td{padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
.compare-table thead th{position:sticky; top:0; background:#fff; z-index:2; border-bottom:2px solid var(--line-strong); vertical-align:top;}
.compare-table .compare-attr-col{
  position:sticky; left:0; background:#fafbfe; z-index:1; font-weight:600; font-size:12px; color:var(--muted);
  white-space:nowrap; min-width:120px;
}
.compare-table thead .compare-attr-col{z-index:3;}
.compare-table td.diff{background:var(--amber-tint);}
.compare-col-media{width:80px; height:80px; margin:0 auto 8px; background:var(--pa-blue-light); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.compare-col-name{display:block; font-size:12.5px; font-weight:600; line-height:1.35; color:var(--ink); max-width:160px;}
.compare-remove-x{float:right; width:26px; height:26px;}
.compare-cta-col{display:flex; flex-direction:column; gap:6px; min-width:140px;}
.compare-note{font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:14px; display:flex; align-items:flex-start; gap:6px;}
@media (max-width:600px){
  .compare-overlay{padding:0; align-items:flex-end;}
  .compare-panel{max-width:100%; max-height:94vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
  .compare-diff-toggle{margin-left:0;}
}

/* ============ PDP ============ */
.pdp-grid{display:grid; grid-template-columns:46fr 54fr; gap:44px;}
.pdp-gallery-main{aspect-ratio:1/1; background:linear-gradient(135deg,#f1f0eb,#e7e5de); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:var(--line-strong); font-family:var(--font-mono); border:1px solid var(--line);}
.pdp-thumbs{display:flex; gap:10px; margin-top:12px;}
.pdp-thumb{width:64px; height:64px; border-radius:8px; border:1.5px solid var(--line); background:#f1f0eb; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.pdp-thumb.active{border-color:var(--signal);}
.pdp-brand{font-family:var(--font-mono); font-size:12px; color:var(--muted); text-transform:uppercase;}
.pdp-title{font-size:24px; margin:6px 0 10px; line-height:1.3;}
.pdp-rating-row{display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); margin-bottom:16px;}
.pdp-rating-row a{color:var(--signal);}
/* ============ PDP PURCHASE PANEL — 1 khối liền mạch, thay cho nhiều card rời rạc trước đây ============ */
.pdp-purchase-panel{border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden;}
.pdp-purchase-seg{padding:14px 18px; border-top:1px solid var(--line);}
.pdp-purchase-seg:first-child{border-top:0;}
.pdp-price-seg{padding-top:16px;}
.pdp-seg-label{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:10px; text-transform:uppercase; letter-spacing:.02em;}
.pdp-seg-label .see-all{margin-left:auto; font-size:12px; font-weight:600; text-transform:none; letter-spacing:0;}
.pdp-promo-seg .pdp-promo-grid{grid-template-columns:1fr; gap:8px;}
.pdp-promo-seg .pdp-promo-card{padding:10px 12px; border:1px solid var(--line); border-radius:8px;}
.pdp-promo-seg .pdp-promo-icon{width:32px; height:32px;}
.pdp-promo-seg .pdp-promo-body h4{font-size:13px;}
.pdp-promo-seg .pdp-promo-body p{font-size:12px;}
.pdp-stock-strip{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:#1e7a3e; background:#e9f7ee;
  border-radius:8px; padding:9px 12px; margin:0;
}
.pdp-stock-strip b{color:#1e7a3e;}
.pdp-stock-strip-more{margin-left:auto; color:var(--pa-blue); font-weight:600;}
.pdp-cta-seg{padding-top:16px; padding-bottom:16px;}
.pdp-cta-row{display:flex; gap:8px;}
.pdp-cta-row .btn{display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap;}
.pdp-cta-installment{flex:0.8;}
.pdp-cta-primary{flex:1.6;}
.pdp-cta-tertiary{flex:1;}
.btn-outline-red{background:#fff; border:1.5px solid var(--pa-red); color:var(--pa-red);}
.btn-outline-red:hover{background:var(--pa-red); color:#fff;}
.pdp-promo-seg .pdp-promo-card{flex-wrap:wrap;}
.pdp-promo-seg .pdp-promo-card > .btn{margin-top:8px;}
@media (max-width:600px){
  .pdp-cta-row{flex-wrap:wrap;}
  .pdp-cta-primary{flex:1 1 100%; order:-1;}
  .pdp-cta-installment,.pdp-cta-tertiary{flex:1 1 calc(50% - 4px);}
  .pdp-stock-strip{flex-direction:column; align-items:flex-start; gap:4px;}
  .pdp-stock-strip-more{margin-left:0;}
}
.pdp-price-label{font-family:var(--font-body); font-size:11px; color:var(--pa-blue); font-weight:700; letter-spacing:.04em; margin-bottom:6px; text-transform:uppercase;}
.pdp-price-now{font-family:var(--font-display); font-size:32px; font-weight:800; color:var(--pa-red); letter-spacing:-.01em;}
.pdp-price-old{font-family:var(--font-body); font-size:14px; color:var(--muted); text-decoration:line-through; margin-right:8px;}
.pdp-price-off{background:var(--ember-tint); color:var(--ember); font-family:var(--font-mono); font-size:12px; font-weight:700; padding:3px 8px; border-radius:6px; margin-left:8px;}
.pdp-price-save{font-size:12.5px; color:#1e7a3e; font-weight:600; margin-top:6px; display:flex; align-items:center; gap:8px;}
.pdp-install{font-size:12.5px; color:var(--muted); margin-top:8px;}
.pdp-price-row{display:flex; align-items:center; flex-wrap:wrap;}
.pdp-install-row{display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
.pdp-install-divider{font-size:12px; color:var(--muted);}
.pdp-install-row .pdp-install{margin-top:0; font-weight:600; color:var(--pa-blue); font-size:13px;}
.variant-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.variant-chip{border:1.5px solid var(--line); border-radius:8px; padding:8px 14px; font-size:12.5px; font-family:var(--font-mono); background:#fff;}
.variant-chip.active{border-color:var(--pa-blue); background:var(--pa-blue); color:#fff;}
.pdp-info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px;}
.pdp-info-item{border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:12.5px;}

/* ============ PDP VIDEO THUMB (thiếu hoàn toàn — badge trước đây bay lệch lên đầu trang) ============ */
.pdp-video-thumb{
  position:relative; display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; cursor:pointer; background:#fff;
}
.pdp-video-thumb:hover{border-color:var(--pa-blue);}
.pdp-video-thumb .video-demo-badge{position:static;}
.pdp-video-thumb .video-play-btn{
  width:32px; height:32px; border-radius:50%; background:var(--pa-blue-light); color:var(--pa-blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pdp-video-label{font-size:13px; font-weight:600; color:var(--ink);}

/* ============ PHƯƠNG THỨC GIAO HÀNG (delivery) — trước đây thiếu hoàn toàn CSS, render thô ============ */
.pdp-delivery-box{border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:16px; background:#fff;}
.pdp-delivery-title{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; margin-bottom:10px; color:var(--ink);}
.delivery-opt-list{display:flex; flex-direction:column;}
.delivery-opt{display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-top:1px solid var(--line);}
.delivery-opt:first-child{border-top:0; padding-top:0;}
.delivery-opt-icon{
  width:28px; height:28px; border-radius:8px; background:var(--pa-blue-light); color:var(--pa-blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.delivery-opt-title{font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.delivery-opt-desc{font-size:12px; color:var(--muted); margin-top:2px;}
.delivery-opt-tag{
  font-size:10px; font-weight:700; color:var(--pa-red); background:var(--pa-red-tint);
  padding:2px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.02em;
}
.pdp-info-item b{display:block; font-size:13px; margin-bottom:2px;}
.ask-ai-strip{
  display:flex; align-items:center; justify-content:space-between; background:var(--signal-tint); border:1px dashed var(--signal);
  border-radius:12px; padding:14px 16px; margin-top:16px; gap:10px;
}
.ask-ai-strip span{font-size:13px; color:var(--signal-dark); font-weight:500;}

.pdp-tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin:48px 0 0;}
.pdp-tab{padding:12px 18px; font-size:14px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;}
.pdp-tab.active{color:var(--pa-blue); border-color:var(--pa-blue);}
.pdp-tabpanel{padding:26px 0; display:none;}
.pdp-tabpanel.active{display:block;}
.spec-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:11px 8px;}
.spec-table td:first-child{color:var(--muted); width:220px; font-family:var(--font-mono); font-size:12.5px;}

/* ============ PDP — bổ sung theo "Phúc Anh Product Experience" ============ */
.pdp-quicklinks{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px;}
.pdp-quicklink{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted); background:none; border:0; cursor:pointer;}
.pdp-quicklink:hover{color:var(--pa-blue);}
.pdp-quicklink.active{color:var(--pa-red);}
.pdp-quicklink#pdp-wish-btn.active svg{fill:var(--pa-red); color:var(--pa-red);}

.pdp-keyspecs{border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:16px; background:#fff;}
.pdp-keyspecs-title{font-size:13.5px; font-weight:700; margin-bottom:10px;}
.pdp-keyspecs-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 16px;}
.pdp-keyspec-item{display:flex; align-items:center; gap:8px; font-size:12.5px; border-bottom:1px dashed var(--line); padding-bottom:6px;}
.pdp-keyspec-item svg{color:var(--pa-blue); flex-shrink:0;}
.pdp-keyspec-item span{color:var(--muted); flex:1;}
.pdp-keyspecs-more{display:inline-block; margin-top:10px; font-size:12px; font-weight:600; color:var(--pa-blue);}

.pdp-promo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.pdp-promo-card{
  display:flex; align-items:flex-start; gap:14px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:#fff;
}
.pdp-promo-icon{
  width:42px; height:42px; border-radius:10px; background:var(--pa-blue-light); color:var(--pa-blue); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.pdp-promo-body{flex:1; min-width:0;}
.pdp-promo-body h4{font-size:14px; margin-bottom:4px;}
.pdp-promo-body p{font-size:12.5px; color:var(--muted); line-height:1.55;}
.pdp-promo-value{font-family:var(--font-mono); font-weight:700; color:var(--pa-red); font-size:13px; margin-top:6px;}
.pdp-promo-card > .btn{flex-shrink:0; align-self:center;}

.pdp-delivery-showroom-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;}
.pdp-showroom-box{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff;}
.pdp-showroom-list{display:flex; flex-direction:column; gap:10px;}
.pdp-showroom-item{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--line);}
.pdp-showroom-item:first-child{border-top:0; padding-top:0;}
.pdp-showroom-item b{display:block; font-size:13px;}
.pdp-showroom-item span{display:block; font-size:11.5px; color:var(--muted); margin-top:2px;}
.pdp-showroom-stock{color:#1e7a3e !important; display:flex; align-items:center; gap:4px;}
.pdp-showroom-actions{display:flex; gap:6px; flex-shrink:0;}

.pami-advisor-box{border:1px solid var(--pa-blue-light); border-radius:var(--radius-lg); padding:20px; background:linear-gradient(135deg,#fff,var(--pa-blue-light) 180%);}
.pami-advisor-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.pami-advisor-badge{background:var(--pa-blue-dark); color:#fff; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; display:flex; align-items:center; gap:5px;}
.pami-advisor-fit{font-size:12.5px; color:var(--pa-blue); font-weight:600;}
.pami-advisor-scores{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; margin-bottom:14px;}
.pami-score-item{display:grid; grid-template-columns:80px 1fr 36px; align-items:center; gap:8px;}
.pami-score-label{font-size:12px; color:var(--muted);}
.pami-score-track{background:var(--line); height:6px; border-radius:999px; overflow:hidden;}
.pami-score-fill{background:var(--pa-blue); height:100%; border-radius:999px;}
.pami-score-val{font-family:var(--font-mono); font-size:11.5px; text-align:right;}
.pami-advisor-conclusion{font-size:13.5px; line-height:1.7; margin-bottom:14px;}
.pami-advisor-cta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.pami-advisor-disclaimer{font-size:11px; color:var(--muted);}

.spec-group{border:1px solid var(--line); border-radius:10px; margin-bottom:10px; overflow:hidden;}
.spec-group summary{padding:12px 14px; font-weight:600; font-size:13.5px; cursor:pointer; background:var(--paper);}
.spec-group .spec-table{padding:0 14px;}
.pdp-spec-note{font-size:11.5px; color:var(--muted); margin-top:8px;}

.pdp-qna-ai{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--pa-blue); margin-top:14px;}

.pdp-bundle-box{border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; background:#fff;}
.pdp-bundle-list{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.pdp-bundle-item{display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); cursor:pointer;}
.pdp-bundle-item:last-child{border-bottom:0;}
.pdp-bundle-thumb{width:48px; height:48px; flex-shrink:0; background:var(--pa-blue-light); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pdp-bundle-info{flex:1; min-width:0;}
.pdp-bundle-name{font-size:13px; font-weight:600; line-height:1.35;}
.pdp-bundle-price{display:flex; align-items:center; gap:8px; font-size:12.5px; margin-top:3px;}
.pdp-bundle-price b{font-family:var(--font-mono); color:var(--pa-red);}
.pdp-bundle-price span{color:var(--muted); text-decoration:line-through;}
.pdp-bundle-price em{color:#1e7a3e; font-style:normal; font-size:11px;}
.pdp-bundle-total{display:flex; justify-content:space-between; align-items:center; gap:14px; padding-top:14px; border-top:1px solid var(--line);}
.pdp-bundle-total div{display:flex; flex-direction:column;}
.pdp-bundle-total span{font-size:12px; color:var(--muted);}
.pdp-bundle-total b{font-family:var(--font-mono); font-size:19px; color:var(--pa-red);}
@media (max-width:900px){
  .pdp-promo-grid{grid-template-columns:1fr;}
  .pdp-delivery-showroom-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .pdp-keyspecs-grid{grid-template-columns:1fr;}
  .pami-advisor-scores{grid-template-columns:1fr;}
  .pdp-bundle-total{flex-direction:column; align-items:stretch;}
}

.review-summary{display:flex; gap:32px; align-items:center; margin-bottom:22px;}
.review-score{font-family:var(--font-mono); font-size:44px; font-weight:700;}
.review-bar-row{display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:4px;}
.review-bar{width:160px; height:6px; background:var(--line); border-radius:4px; overflow:hidden;}
.review-bar span{display:block; height:100%; background:var(--amber);}
.review-item{border-top:1px solid var(--line); padding:16px 0;}
.review-item .rv-head{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px;}
.review-item .rv-name{font-weight:600;}
.review-item .rv-date{color:var(--muted);}

/* ============ PROMOTION ============ */
.promo-hero{
  background:linear-gradient(120deg, var(--pa-blue-dark) 55%, var(--pa-blue)); border-radius:var(--radius-lg); padding:48px 40px;
  color:#fff; text-align:center; margin-bottom:32px;
}
.promo-hero h1{font-size:38px; color:#fff;}
.promo-hero p{color:#dbe3fb; margin-top:10px;}
.countdown{display:flex; justify-content:center; gap:12px; margin-top:22px;}
.cd-box{background:rgba(255,255,255,.1); border-radius:10px; padding:12px 16px; min-width:64px; text-align:center;}
.cd-box .cd-num{font-family:var(--font-mono); font-size:24px; font-weight:700; color:var(--pa-red); background:#fff; border-radius:6px; padding:2px 4px; display:inline-block;}
.cd-box .cd-label{font-size:10px; color:#c3d0ff; text-transform:uppercase; letter-spacing:.05em; margin-top:4px;}
.promo-cat-row{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
.promo-cat-chip{border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:13px; font-weight:500; background:#fff;}
.promo-cat-chip.active{background:var(--ember); border-color:var(--ember); color:#fff;}
.deal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.deal-card{border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; background:#fff;}
.deal-card .di-icon{font-size:24px; margin-bottom:10px;}
.deal-card h4{font-size:15px; margin-bottom:6px;}
.deal-card p{font-size:12.5px; color:var(--muted);}
.urgency-tag{font-family:var(--font-mono); font-size:10.5px; color:var(--ember); margin-top:8px; display:block;}

/* ============ BLOG ============ */
.blog-hero-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:20px; margin-bottom:36px;}
.blog-feat{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:#fff;}
.blog-feat-media{aspect-ratio:16/9; background:linear-gradient(135deg,#f1f0eb,#e7e5de);}
.blog-feat-body{padding:22px;}
.blog-feat-body h2{font-size:22px; line-height:1.3; margin:8px 0 10px;}
.blog-cat-tag{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; color:var(--signal); background:var(--signal-tint); padding:4px 8px; border-radius:6px;}
.blog-meta{font-size:12px; color:var(--muted); margin-top:10px;}
.blog-side-list{display:flex; flex-direction:column; gap:14px;}
.blog-side-item{display:flex; gap:12px; border:1px solid var(--line); border-radius:12px; padding:12px; background:#fff;}
.blog-side-media{width:76px; height:76px; border-radius:8px; background:#eceae3; flex-shrink:0;}
.blog-side-item h4{font-size:13.5px; line-height:1.4;}
.blog-topics{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
.blog-topic-chip{border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:13px; background:#fff;}
.blog-topic-chip.active{background:var(--pa-blue); color:#fff; border-color:var(--pa-blue);}
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.article-card{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff;}
.article-media{aspect-ratio:16/10; background:linear-gradient(135deg,#f1f0eb,#e7e5de);}
.article-body{padding:16px;}
.article-body h3{font-size:15px; line-height:1.4; margin:8px 0 8px;}
.article-body p{font-size:12.5px; color:var(--muted); margin-bottom:10px;}
.article-foot{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted);}

.in-article-product{
  border:1.5px solid var(--pa-blue); border-radius:var(--radius-lg); padding:18px; display:flex; gap:18px;
  align-items:center; margin:22px 0; background:var(--paper);
}
.in-article-product .ia-media{width:96px; height:96px; border-radius:10px; background:#eceae3; flex-shrink:0;}
.in-article-product .ia-body{flex:1;}
.in-article-product h4{font-size:15px; margin-bottom:4px;}
.article-prose{max-width:760px; margin:0 auto; font-size:15px; line-height:1.8; color:#2b2b28;}
.article-prose h2{font-size:19px; margin:28px 0 10px;}
.article-prose p{margin:0 0 16px;}
.ask-ai-article{
  border:1px dashed var(--signal); background:var(--signal-tint); border-radius:12px; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center; margin:24px 0; max-width:760px; margin-left:auto; margin-right:auto;
}

/* ============ EMPTY STATE ============ */
.empty-state{
  grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 20px; text-align:center; color:var(--muted); gap:12px; border:1px dashed var(--line); border-radius:var(--radius-lg); background:#fff;
}
.empty-state p{font-size:13.5px; max-width:340px; margin:0;}

/* ============ DRAWER (Cart/Wishlist/Compare/Account) ============ */
.pa-drawer-overlay{
  position:fixed; inset:0; background:rgba(23,51,127,.45); z-index:400; display:flex; justify-content:flex-end;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.pa-drawer-overlay.open{opacity:1; pointer-events:auto;}
.pa-drawer-panel{
  width:100%; max-width:400px; height:100%; background:#fff; display:flex; flex-direction:column;
  transform:translateX(20px); transition:transform .2s;
}
.pa-drawer-overlay.open .pa-drawer-panel{transform:translateX(0);}
.pa-drawer-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line);}
.pa-drawer-head h3{font-size:16px;}
.pa-drawer-head button{background:none; border:0; color:var(--muted); display:flex;}
.pa-drawer-body{padding:20px; overflow-y:auto; flex:1;}
@media (max-width:480px){ .pa-drawer-panel{max-width:100%;} }

/* ============ BUILD PC (Tự Build PC theo ngân sách) — modal wizard, tái dùng .btn/.card design system ============ */
.buildpc-overlay{
  position:fixed; inset:0; background:rgba(23,51,127,.45); z-index:400; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s; padding:20px;
}
.buildpc-overlay.open{opacity:1; pointer-events:auto;}
.buildpc-panel{
  width:100%; max-width:720px; max-height:88vh; background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; transform:translateY(12px); transition:transform .2s;
}
.buildpc-overlay.open .buildpc-panel{transform:translateY(0);}
.buildpc-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line);}
.buildpc-head-title{display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px;}
.buildpc-head button{background:none; border:0; color:var(--muted); display:flex;}
.buildpc-progress{display:flex; gap:4px; padding:14px 20px; border-bottom:1px solid var(--line); overflow-x:auto;}
.buildpc-progress-step{display:flex; align-items:center; gap:6px; flex-shrink:0; padding:6px 10px; border-radius:999px; background:var(--panel-alt,#f5f6fa); color:var(--muted); font-size:12px; font-weight:600;}
.buildpc-progress-step .buildpc-progress-num{font-family:var(--font-mono); font-size:10.5px;}
.buildpc-progress-step.active{background:var(--pa-blue); color:#fff;}
.buildpc-progress-step.done{background:var(--pa-blue-light); color:var(--pa-blue);}
.buildpc-body{padding:20px; overflow-y:auto; flex:1;}
.buildpc-step-title{font-size:16px; margin-bottom:4px;}
.buildpc-step-sub{font-size:13px; color:var(--muted); margin-bottom:16px;}
.buildpc-pill-row{display:flex; flex-wrap:wrap; gap:8px;}
.buildpc-pill{
  display:flex; align-items:center; gap:6px; padding:10px 18px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer;
}
.buildpc-pill:hover{border-color:var(--pa-blue);}
.buildpc-pill.active{background:var(--pa-blue); border-color:var(--pa-blue); color:#fff;}
.buildpc-custom-budget{margin-top:16px; display:flex; flex-direction:column; gap:6px; max-width:280px;}
.buildpc-custom-budget label{font-size:12px; color:var(--muted);}
.buildpc-custom-budget input{padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:var(--font-mono);}
.buildpc-note{font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:16px; display:flex; align-items:flex-start; gap:6px;}
.buildpc-note-icon{flex-shrink:0; display:flex; margin-top:2px;}
.buildpc-fallback-note{font-size:13px; color:var(--ink); line-height:1.6; background:var(--amber-tint); border:1px solid var(--amber); border-radius:10px; padding:12px 14px;}
.buildpc-result-total{display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px;}
.buildpc-budget-msg{font-size:13px; border-radius:10px; padding:10px 14px; margin-bottom:14px; display:flex; align-items:flex-start; gap:6px; line-height:1.55;}
.buildpc-budget-msg-icon{flex-shrink:0; display:flex; margin-top:1px;}
.buildpc-budget-msg.over{background:#fdecec; color:var(--pa-red-dark);}
.buildpc-budget-msg.under{background:#e9f7ee; color:#1e7a3e;}
.buildpc-parts-list{display:flex; flex-direction:column; gap:8px;}
.buildpc-part-row{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:10px; padding:10px 12px;}
.buildpc-part-row.removed{opacity:.6; background:#fafafa;}
.buildpc-part-thumb{width:44px; height:44px; flex-shrink:0; background:var(--pa-blue-light); border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.buildpc-part-info{flex:1; min-width:0;}
.buildpc-part-type{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-mono); display:flex; align-items:center; gap:6px;}
.buildpc-part-name{font-size:13px; font-weight:600; line-height:1.3; margin-top:2px;}
.buildpc-part-price{font-family:var(--font-mono); font-weight:700; font-size:13.5px; color:var(--pa-red); white-space:nowrap;}
.buildpc-part-required{font-size:10.5px; color:var(--muted); flex-shrink:0;}
.buildpc-part-remove{width:30px; height:30px; flex-shrink:0;}
.buildpc-checks{margin-top:16px; border-top:1px solid var(--line); padding-top:14px;}
.buildpc-checks-title{font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:8px;}
.buildpc-check{font-size:12.5px; display:flex; align-items:flex-start; gap:6px; padding:4px 0; color:var(--muted);}
.buildpc-check-icon{flex-shrink:0; display:flex; margin-top:1px;}
.buildpc-check.ok{color:#1e7a3e;}
.buildpc-check.fail{color:var(--pa-red-dark);}
.buildpc-disclaimer{font-size:11px; color:var(--muted); margin-top:14px; line-height:1.6;}
.buildpc-done{text-align:center; padding:24px 12px; display:flex; flex-direction:column; align-items:center; gap:8px;}
.buildpc-done-icon{width:52px; height:52px; border-radius:50%; background:#e9f7ee; color:#1e7a3e; display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.buildpc-done h4{font-size:16px;}
.buildpc-done p{font-size:13px; color:var(--muted); max-width:360px;}
.buildpc-done-actions{display:flex; gap:10px; margin-top:8px;}
.buildpc-foot{padding:14px 20px; border-top:1px solid var(--line);}
.buildpc-foot-row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
@media (max-width:600px){
  .buildpc-overlay{padding:0; align-items:flex-end;}
  .buildpc-panel{max-width:100%; max-height:94vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
  .buildpc-part-row{flex-wrap:wrap;}
  .buildpc-part-price{order:3; width:100%; text-align:right;}
  .buildpc-done-actions{flex-direction:column; width:100%;}
}

/* ============ BUILD PC — TRANG RIÊNG (/build-pc.html), tái dùng toàn bộ .buildpc-* ở trên ============ */
.buildpc-page-head{padding:24px 0 4px; max-width:640px;}
.buildpc-page-head h1{font-size:26px; margin:6px 0 8px;}
.buildpc-page-head p{color:var(--muted); font-size:14px;}
.buildpc-page-panel{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; margin:20px 0 40px;
  display:flex; flex-direction:column; max-width:820px;
}
.buildpc-page-panel .buildpc-body{max-height:none; padding:24px;}
.buildpc-page-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line);}
@media (max-width:600px){
  .buildpc-page-actions{flex-direction:column;}
  .buildpc-page-actions .btn{width:100%;}
}

/* ============ AUTH (Login/Register) — dùng chung khung .buildpc-panel ============ */
.auth-field{margin-bottom:14px; display:flex; flex-direction:column; gap:5px;}
.auth-field label{font-size:12.5px; font-weight:600; color:var(--ink);}
.auth-field input{padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13.5px;}
.auth-field input:disabled{background:#fafbfe; color:var(--muted);}
.auth-field-error{font-size:11.5px; color:var(--pa-red-dark); min-height:14px;}
.auth-checkbox-row{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:4px;}
.auth-checkbox-row input{margin-top:3px;}
.auth-checkbox-row a{color:var(--pa-blue); font-weight:600;}
.auth-switch-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:14px; font-size:12.5px;}
.auth-switch-row a{color:var(--pa-blue); font-weight:600;}

/* ============ ACCOUNT DASHBOARD — dùng chung khung .compare-panel, thêm layout 2 cột ============ */
.account-panel{max-width:880px;}
.account-layout{display:grid; grid-template-columns:200px 1fr; min-height:0; overflow:hidden; flex:1;}
.account-nav{display:flex; flex-direction:column; gap:2px; padding:16px 10px; border-right:1px solid var(--line); overflow-y:auto;}
.account-nav-item{display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; border:0; background:none; text-align:left; font-size:13px; color:var(--ink); cursor:pointer;}
.account-nav-item:hover{background:var(--pa-blue-light);}
.account-nav-item.active{background:var(--pa-blue); color:#fff;}
.account-nav-logout{color:var(--pa-red-dark); margin-top:8px; border-top:1px solid var(--line); padding-top:12px; border-radius:0;}
.account-content{padding:20px; overflow-y:auto;}
.account-overview-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0;}
.account-stat-card{border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center;}
.account-stat-num{font-family:var(--font-mono); font-weight:700; font-size:20px; color:var(--pa-blue);}
.account-stat-label{font-size:11.5px; color:var(--muted); margin-top:4px;}
@media (max-width:700px){
  .account-layout{grid-template-columns:1fr; overflow-y:auto;}
  .account-nav{flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line);}
  .account-nav-logout{border-top:0; margin-top:0;}
  .account-overview-grid{grid-template-columns:repeat(2,1fr);}
}

/* ============ LOYALTY ============ */
.loyalty-card{border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; background:linear-gradient(135deg,var(--pa-blue-dark),var(--pa-blue)); color:#fff;}
.loyalty-tier-badge{display:inline-block; background:rgba(255,255,255,.18); padding:4px 12px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.04em;}
.loyalty-points{font-family:var(--font-mono); font-size:26px; font-weight:700; margin-top:10px;}
.loyalty-progress-track{background:rgba(255,255,255,.25); height:8px; border-radius:999px; margin-top:14px; overflow:hidden;}
.loyalty-progress-fill{background:#fff; height:100%; border-radius:999px;}
.loyalty-progress-label{font-size:12px; color:#dbe3fb; margin-top:8px;}
.loyalty-tier-row{display:flex; align-items:center; gap:8px; margin-top:16px; font-size:11px; flex-wrap:wrap;}
.loyalty-tier-chip{background:rgba(255,255,255,.12); padding:3px 10px; border-radius:999px; color:#c3d0ff;}
.loyalty-tier-chip.done{background:#fff; color:var(--pa-blue-dark); font-weight:700;}
.loyalty-history{display:flex; flex-direction:column; gap:8px;}
.loyalty-history-row{display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:10px; padding:10px 14px;}
.loyalty-history-label{font-size:13px; font-weight:600;}
.loyalty-history-date{font-size:11px; color:var(--muted); margin-top:2px;}
.loyalty-history-delta{font-family:var(--font-mono); font-weight:700; font-size:13.5px;}
.loyalty-history-delta.plus{color:#1e7a3e;}
.loyalty-history-delta.minus{color:var(--pa-red-dark);}

/* ============ CONVERSION BANNER ============ */
.conv-banner{border-radius:var(--radius-lg); overflow:hidden; margin:8px 0; cursor:default;}
.conv-banner-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 32px; flex-wrap:wrap;}
.conv-banner-inner h3{color:#fff; font-size:18px;}
.conv-banner-inner p{color:#dbe3fb; font-size:13px; margin-top:4px;}

/* ============ VIDEO COMMERCE ============ */
.video-row{gap:14px;}
.video-card{
  min-width:180px; max-width:180px; scroll-snap-align:start; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); background:#fff; cursor:pointer;
}
.video-card-media{
  aspect-ratio:9/16; background:linear-gradient(160deg, var(--pa-blue-dark), var(--pa-blue)); position:relative;
  display:flex; align-items:center; justify-content:center;
}
.video-demo-badge{
  position:absolute; top:8px; left:8px; background:rgba(0,0,0,.55); color:#fff; font-family:var(--font-mono);
  font-size:9px; padding:3px 7px; border-radius:5px; letter-spacing:.03em; z-index:2;
}
.video-play-btn{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.6);
  color:#fff; display:flex; align-items:center; justify-content:center; z-index:2;
}
.video-duration{position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.55); color:#fff; font-family:var(--font-mono); font-size:10px; padding:2px 6px; border-radius:4px;}
.video-card-product{position:absolute; bottom:8px; left:8px; width:30px; height:30px; background:#fff; border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.video-card-product img{width:100%; height:100%; object-fit:contain;}
.video-card-product .media-fallback-label{font-size:7px; line-height:1; text-align:center; padding:1px; word-break:break-all;}
.video-card-body{padding:10px;}
.video-card-title{font-size:12px; font-weight:600; line-height:1.35; min-height:34px;}
.video-card-price{font-family:var(--font-mono); font-weight:700; color:var(--pa-red); font-size:12.5px; margin-top:4px;}
.video-viewer-media{
  aspect-ratio:9/16; max-width:220px; margin:0 auto; border-radius:12px; background:linear-gradient(160deg, var(--pa-blue-dark), var(--pa-blue));
  display:flex; align-items:center; justify-content:center; position:relative;
}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--pa-blue-dark); color:#fff;
  padding:13px 22px; border-radius:999px; font-size:13.5px; font-weight:500; opacity:0; pointer-events:none; transition:all .25s; z-index:200;
  display:flex; align-items:center; gap:8px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============ TOP PROMO STRIP ============ */
.promo-strip{background:var(--pa-red); color:#fff; font-size:12.5px; overflow:hidden; position:relative; height:34px;}
.promo-strip .wrap{display:flex; align-items:center; height:100%; gap:8px;}
.promo-strip a{color:#fff; text-decoration:underline; font-weight:600;}

/* ============ HORIZONTAL SCROLL ROW (Flash sale / Best seller / New arrivals) ============ */
.hscroll{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; width:100%; max-width:100%;}
.hscroll::-webkit-scrollbar{height:6px;}
.hscroll::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:3px;}
.hscroll .card{min-width:230px; scroll-snap-align:start;}

/* ============ DEAL OF THE DAY ============ */
.deal-hero{
  display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff;
}
.deal-hero-media{background:var(--pa-blue-light); display:flex; align-items:center; justify-content:center; padding:30px; min-height:280px;}
.deal-hero-media img{max-height:260px; object-fit:contain;}
.deal-hero-body{padding:32px;}
.deal-hero-body .eyebrow{color:var(--pa-red);}
.deal-hero-body h3{font-size:22px; margin-bottom:10px; line-height:1.35;}
.deal-hero-progress{margin:16px 0;}
.deal-hero-progress-bar{height:8px; background:var(--line); border-radius:4px; overflow:hidden;}
.deal-hero-progress-bar span{display:block; height:100%; background:var(--pa-red);}
.deal-hero-progress-label{font-size:11.5px; color:var(--muted); margin-top:6px;}

/* ============ GAMING ZONE ============ */
.gaming-zone{
  background:linear-gradient(120deg, #0d0f14 55%, #1a1030); border-radius:var(--radius-lg); padding:34px; color:#fff;
}
.gaming-zone .eyebrow{color:#ff8a80;}
.gaming-zone h2{color:#fff; font-size:26px; margin-bottom:14px;}
.gaming-zone .grid-cards{margin-top:16px;}
.gaming-zone .card{background:#181b24; border-color:#2b2f3d;}
.gaming-zone .card-name, .gaming-zone .card-brand{color:#fff;}
.gaming-zone .card-specs{color:#9aa0b4;}
.gaming-zone .price-now{color:#ff5c5c;}

/* ============ LAPTOP ZONE TABS ============ */
.zone-tabs{display:flex; gap:8px; margin-bottom:16px;}
.zone-tab{padding:9px 18px; border-radius:999px; font-size:13px; font-weight:600; border:1px solid var(--line); background:#fff; cursor:pointer;}
.zone-tab.active{background:var(--pa-blue); border-color:var(--pa-blue); color:#fff;}

/* ============ COMPARE TEASER ============ */
.compare-teaser{border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; padding:28px;}
.compare-teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; position:relative;}
.compare-mini-card{border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; position:relative;}
.compare-mini-card:not(:last-child)::after{
  content:'VS'; position:absolute; right:-20px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%;
  background:#fff; border:1px solid var(--line); font-family:var(--font-mono); font-size:9px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.compare-mini-card img{height:90px; object-fit:contain; margin:0 auto 10px; display:block;}
.compare-mini-card .media-fallback-fill{height:90px; width:90px; margin:0 auto 10px;}
.ai-compare-summary{background:var(--pa-blue-light); border-radius:12px; padding:16px 18px; margin-top:16px;}
.ai-compare-summary p{font-size:13px; margin:0 0 8px; color:#1a2b5c;}

/* ============ PROMOTION HUB (home) ============ */
.promo-hub-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px;}
.promo-hub-card{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:#fff;}
.promo-hub-media{aspect-ratio:16/10; background:var(--pa-blue-light); display:flex; align-items:center; justify-content:center; padding:14px;}
.promo-hub-media img{max-height:100%; object-fit:contain;}
.promo-hub-body{padding:14px;}
.promo-hub-body h4{font-size:13.5px; line-height:1.4; margin-bottom:8px;}
.promo-hub-body a{font-size:12px; font-weight:700; color:var(--pa-red);}

/* ============ PC BUILDER TEASER ============ */
.builder-teaser{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; background:var(--pa-blue-light);
  border-radius:var(--radius-lg); padding:32px;
}
.builder-flow{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.builder-flow span{background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600; color:var(--pa-blue);}

@media (max-width:1080px){
  .hero-slide{grid-template-columns:1fr; padding:26px;}
  .hero-slide-media{height:180px; order:-1;}
  .deal-hero{grid-template-columns:1fr;}
  .compare-teaser-grid{grid-template-columns:1fr; gap:8px;}
  .compare-mini-card::after{display:none;}
  .promo-hub-grid{grid-template-columns:repeat(2,1fr);}
  .builder-teaser{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .promo-hub-grid{grid-template-columns:1fr;}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .grid-cards{grid-template-columns:repeat(2,1fr);}
  .grid-cards.cat{grid-template-columns:repeat(2,1fr);}
  .need-grid{grid-template-columns:repeat(3,1fr);}
  .hero-grid{grid-template-columns:1fr;}
  .cat-layout{grid-template-columns:1fr;}
  .filter-panel{position:static;}
  .pdp-grid{grid-template-columns:1fr;}
  .ai-block{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(3,1fr);}
  .deal-grid, .article-grid{grid-template-columns:repeat(2,1fr);}
  .blog-hero-grid{grid-template-columns:1fr;}
  .trust-strip{grid-template-columns:repeat(3,1fr);}
  .trust-item:nth-child(3){border-right:0;}
}
@media (max-width:720px){
  .topbar{display:none;}
  .header-main{flex-wrap:wrap; gap:12px;}
  .logo{order:1;}
  .header-ai-btn{display:none;}
  .header-actions{order:2; gap:8px;}
  .header-actions .ha-item.ha-desktop-only{display:none;}
  .search-box{order:3; width:100%;}
  .megabar{overflow-x:auto;}
  .mega-panel{position:fixed; left:12px; right:12px; min-width:0;}
  .grid-cards, .grid-cards.cat{grid-template-columns:repeat(2,1fr); gap:12px;}
  .need-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .deal-grid, .article-grid{grid-template-columns:1fr;}
  .trust-strip{grid-template-columns:repeat(2,1fr);}
  body{padding-bottom:64px;}
}

.bottom-nav{display:none;}
@media (max-width:720px){
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line);
    z-index:95; justify-content:space-around; padding:8px 0 10px;
  }
  .bottom-nav a{display:flex; flex-direction:column; align-items:center; font-size:10px; color:var(--muted); gap:3px;}
  body.has-bottom-nav{padding-bottom:70px;}
}

/* ============ PDP STICKY PURCHASE BAR — root cause fix: .pdp-cta-row từng bị display:none tại mobile
   breakpoint (do xung đột với bottom-nav thêm sau) khiến mobile KHÔNG có CTA mua hàng nào cố định.
   Thay bằng thanh riêng, gọn hơn, tự nâng lên trên bottom-nav trên mobile. ============ */
.pdp-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--line);
  padding:10px 20px; z-index:120; display:flex; align-items:center; gap:14px;
  transform:translateY(100%); transition:transform .2s ease; box-shadow:0 -4px 16px rgba(15,23,60,.08);
}
.pdp-sticky-bar.show{transform:translateY(0);}
.pdp-sticky-thumb{width:44px; height:44px; flex-shrink:0; background:var(--pa-blue-light); border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.pdp-sticky-info{flex:1; min-width:0; display:none;}
.pdp-sticky-info b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px;}
.pdp-sticky-info span{font-family:var(--font-mono); font-weight:700; color:var(--pa-red); font-size:14px;}
.pdp-sticky-actions{display:flex; gap:8px; flex:1;}
.pdp-sticky-actions .btn{flex:1;}
@media (min-width:900px){ .pdp-sticky-info{display:block;} .pdp-sticky-actions{flex:0 0 auto;} .pdp-sticky-bar{padding:10px 32px;} }
@media (max-width:720px){ .pdp-sticky-bar{bottom:70px;} }