:root{--brand:#1e4fb8;--accent:#f26a21;--price:#d70018;--ink:#222;--mute:#6b7280;--line:#e5e7eb;--bg:#f3f4f6}
body{background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,Arial,sans-serif;padding-top:0}
a:hover{text-decoration:none}

/* Thanh khuyen mai */
.promo{background:var(--accent);color:#fff;text-align:center;font-size:13px;padding:6px 10px}

/* Header */
.hd{background:var(--brand);position:sticky;top:0;z-index:1030}
.hd-row{display:flex;align-items:center;gap:16px;padding:10px 0}
.hd-logo{color:#fff;font-size:24px;font-weight:800;white-space:nowrap}
.hd-logo:hover,.hd-logo:focus{color:#fff}
.hd-logo b{color:#ffd24d}
.hd-cat{position:relative}
.hd-cat>button{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-weight:600;white-space:nowrap}
.mega{display:none;position:absolute;top:calc(100% + 8px);left:0;width:460px;max-width:90vw;background:#fff;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:16px}
.hd-cat.open .mega{display:flex;gap:24px}
.mega>div{flex:1}
.mega h5{margin:0 0 8px;font-size:13px;color:var(--mute);font-weight:700}
.mega a{display:block;padding:6px 0;color:var(--ink)}
.mega a:hover{color:var(--brand)}

/* O tim kiem */
.hd-search{position:relative;flex:1;max-width:560px}
.hd-search input{display:block;width:100%;max-width:none;height:40px;border:0;border-radius:8px;padding:0 48px 0 14px;font-size:14px;outline:none}
.hd-search input:focus{box-shadow:0 0 0 3px rgba(255,210,77,.7)}
.hd-search button{position:absolute;right:0;top:0;height:40px;width:44px;border:0;background:none;color:var(--brand);font-size:16px}
.sugg{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.22);overflow:hidden}
.sg{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--ink)}
.sg:hover{background:var(--bg);color:var(--ink)}
.sg img{width:40px;height:40px;object-fit:contain}
.sg-n{flex:1;font-size:14px}
.sg-p{color:var(--price);font-weight:700;font-size:13px;white-space:nowrap}
.sg-all{justify-content:center;color:var(--brand);font-weight:600;border-top:1px solid var(--line)}

.hd-right{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:13px}
.hd-right a{color:#fff;white-space:nowrap}
.hd-right a:hover{color:#ffd24d}

/* Hang san xuat */
.chips{background:#fff;border-bottom:1px solid var(--line)}
.chips .container{display:flex;gap:6px;overflow-x:auto;padding-top:8px;padding-bottom:8px}
.chips a{white-space:nowrap;padding:6px 14px;border-radius:999px;background:var(--bg);color:var(--ink);font-size:13px}
.chips a:hover{background:var(--brand);color:#fff}

/* San pham */
.sec-title{font-size:20px;font-weight:700;margin:20px 0 14px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 14px}
.toolbar .sec-title{margin:0;flex:1 1 240px}
.toolbar small{display:block;font-size:13px;font-weight:400;color:var(--mute)}
.toolbar select{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff}
.pgrid{display:flex;flex-wrap:wrap}
.pgrid:before,.pgrid:after{display:none}
.pgrid>[class*="col-"]{margin-bottom:16px;display:flex}
.pcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;width:100%;display:flex;flex-direction:column;transition:box-shadow .15s}
.pcard:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}
.pcard-img{height:170px;display:flex;align-items:center;justify-content:center;position:relative}
.pcard-img img{max-height:100%;max-width:100%;object-fit:contain}
.out{position:absolute;top:0;left:0;background:var(--mute);color:#fff;font-size:11px;padding:2px 8px;border-radius:4px}
.pcard-name{font-size:14px;font-weight:600;line-height:1.35;height:38px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:8px 0 6px}
.pcard-name a{color:var(--ink)}
.pcard-name a:hover{color:var(--brand)}
.specs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;min-height:22px}
.specs span{background:var(--bg);border-radius:4px;padding:1px 6px;font-size:11px;color:var(--mute)}
.pcard-price{margin-top:auto;color:var(--price);font-weight:800;font-size:17px}
.pcard-actions{display:flex;gap:6px;margin-top:8px}
.pcard-actions .btn{flex:1}
.btn-buy{background:var(--price);border-color:var(--price);color:#fff}
.btn-buy:hover{background:#b80014;border-color:#b80014;color:#fff}
footer.ft{margin-top:30px;padding:20px 0;background:#fff;border-top:1px solid var(--line);color:var(--mute);text-align:center}

@media (max-width:767px){
  .hd-row{flex-wrap:wrap;gap:10px}
  .hd-search{order:3;flex-basis:100%;max-width:none}
  .hd-right{margin-left:auto}
}