:root{--bg:#080d18;--panel:#111827;--panel2:#172033;--line:#26334c;--text:#edf3ff;--muted:#9caccc;--gold:#f2c94c;--gold2:#d59b27;--blue:#58c7ff;--red:#fb7185;--green:#34d399}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 15% 0,#25200f55,transparent 34%),radial-gradient(circle at 90% 80%,#08324b66,transparent 35%),var(--bg);color:var(--text);font:15px/1.6 Inter,system-ui,sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}img{max-width:100%}.container{width:min(1180px,calc(100% - 32px));margin:auto}.header{position:sticky;top:0;z-index:20;background:#080d18dd;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{height:68px;display:flex;align-items:center;gap:26px}.brand{font:800 22px Georgia;color:var(--gold);margin-right:auto}.navlinks{display:flex;gap:22px}.actions{display:flex;align-items:center;gap:12px}.cart-icon{position:relative}.count{position:absolute;top:-10px;right:-12px;background:var(--gold);color:#111;border-radius:20px;min-width:19px;text-align:center;font-size:11px;font-weight:800}.main{min-height:70vh}.hero{padding:90px 0 55px;text-align:center}.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:800}.hero h1{font:800 clamp(38px,7vw,72px)/1.08 Georgia;margin:14px auto;max-width:900px}.gradient{background:linear-gradient(120deg,#fff2ae,var(--gold2));background-clip:text;color:transparent}.lead{color:var(--muted);font-size:18px;max-width:700px;margin:0 auto 28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--panel2);color:white;padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer;font:inherit}.btn:hover{border-color:#6e7b96;transform:translateY(-1px)}.btn.primary{background:linear-gradient(130deg,var(--gold),var(--gold2));color:#111;border:0}.btn.danger{color:#ffc1cb;border-color:#813745;background:#351923}.btn.small{padding:6px 10px;font-size:13px}.section{padding:42px 0}.section h1,.section h2{font-family:Georgia;margin-top:0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.grid.four{grid-template-columns:repeat(4,1fr)}.card{background:linear-gradient(145deg,#151d2eeb,#0f1625e8);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 25px 60px -45px #000}.card:hover{border-color:#485978}.product-image{height:100px;display:grid;place-items:center;background:#0b1220;border-radius:12px;margin-bottom:16px;font-size:42px;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover}.product-card h3{font-size:16px;line-height:1.35;margin:8px 0;min-height:43px}.price{font-size:21px;color:var(--gold);font-weight:800}.badge{display:inline-flex;padding:3px 9px;border-radius:99px;background:#22304a;color:#cbd9f4;font-size:12px}.badge.pending{color:#ffe29a;background:#493b18}.badge.paid,.badge.available,.success{color:#9df4d2;background:#123b31}.badge.cancelled,.badge.sold,.error{color:#ffc0ca;background:#481d27}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:18px}.stat strong{display:block;font-size:25px;color:var(--gold)}.flash{margin-top:18px;padding:12px 16px;border:1px solid;border-radius:10px}.flash.success{border-color:#247a63}.flash.error{border-color:#924153}.form{max-width:700px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-weight:700;font-size:13px}.input,select,textarea{width:100%;background:#0c1423;border:1px solid #35425c;border-radius:10px;color:white;padding:11px 12px;font:inherit}.input:focus,select:focus,textarea:focus{outline:2px solid #f2c94c55;border-color:var(--gold)}textarea{min-height:110px;resize:vertical}.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:20px}.toolbar .field{margin:0;min-width:150px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;background:#101827}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:12px;text-transform:uppercase;color:var(--muted)}td.wrap{white-space:normal}.split{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}.sidebar-layout{display:grid;grid-template-columns:220px 1fr;gap:24px}.sidebar{height:max-content;padding:10px}.sidebar a{display:block;padding:10px 12px;border-radius:8px;color:var(--muted)}.sidebar a:hover,.sidebar a.active{background:#25314b;color:white}.empty{text-align:center;padding:55px 20px;color:var(--muted)}.key{font:600 13px ui-monospace,monospace;color:#b7edff;background:#07111f;border:1px dashed #31536e;padding:8px 10px;border-radius:7px;display:inline-block}.pagination{display:flex;justify-content:center;gap:6px;margin-top:24px}.pagination a{padding:7px 11px;border:1px solid var(--line);border-radius:7px}.pagination a.active{background:var(--gold);color:#111}.footer{border-top:1px solid var(--line);margin-top:70px;padding:35px 0;color:var(--muted)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:25px}.qr{background:white;border-radius:14px;padding:10px;max-width:340px}.notice{border-left:3px solid var(--blue);background:#102338;padding:12px 15px;border-radius:7px}.inline{display:inline}.right{text-align:right}@media(max-width:850px){.navlinks{display:none}.grid,.grid.four{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.split,.sidebar-layout{grid-template-columns:1fr}.sidebar{display:flex;overflow:auto}.sidebar a{white-space:nowrap}.footer-grid{grid-template-columns:1fr}}@media(max-width:540px){.container{width:min(100% - 22px,1180px)}.grid,.grid.four,.stats{grid-template-columns:1fr}.hero{padding-top:55px}.actions .hide-sm{display:none}.section-head{align-items:start;flex-direction:column}.card{padding:15px}}
.badge.sub{background:#3b2a5e;color:#dcc9ff}.pc-body .badge.sub{background:#2e2050d9;color:#e6d8ff}.delivered{margin-top:8px;line-height:2}
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--red);color:#2a0710;font-size:12px;font-weight:800;vertical-align:middle}
.chat-widget{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:14px}
.chat-fab{position:relative;width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;background:linear-gradient(140deg,#ffd76a,#f2a71b 55%,#e07d10);color:#1a1204;box-shadow:0 14px 34px -10px #f2a71b80,0 8px 22px -8px #000;display:grid;place-items:center;transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .25s}
.chat-fab:hover{transform:scale(1.07)}
.chat-fab:active{transform:scale(.96)}
.chat-fab svg{position:absolute;width:27px;height:27px;transition:opacity .22s ease,transform .32s cubic-bezier(.34,1.4,.64,1)}
.chat-fab-x{opacity:0;transform:rotate(-70deg) scale(.5)}
.chat-widget.is-open .chat-fab-icon{opacity:0;transform:rotate(70deg) scale(.5)}
.chat-widget.is-open .chat-fab-x{opacity:1;transform:none}
.chat-widget.is-open .chat-fab{background:linear-gradient(140deg,#2c3a55,#1b2438);color:#e9f0ff;box-shadow:0 12px 30px -12px #000}
.chat-fab-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #f2c94c;opacity:.75;animation:chat-pulse 2.6s ease-out infinite}
.chat-widget.is-open .chat-fab-ring{display:none}
@keyframes chat-pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
.chat-fab-dot{position:absolute;right:4px;bottom:4px;width:13px;height:13px;border-radius:50%;background:var(--green);border:2.5px solid #0b1120}
.chat-widget.is-open .chat-fab-dot{display:none}
.chat-fab-badge{position:absolute;top:-3px;right:-3px}
.chat-teaser{position:relative;max-width:250px;background:linear-gradient(160deg,#1b2436,#121a29);border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:13px 30px 13px 15px;line-height:1.5;box-shadow:0 18px 40px -20px #000;animation:chat-rise .4s ease both}
.chat-teaser strong{display:block;color:var(--gold);margin-bottom:2px}
.chat-teaser span{color:var(--muted);font-size:13px}
.chat-teaser-close{position:absolute;top:5px;right:7px;background:none;border:0;color:var(--muted);font-size:19px;line-height:1;cursor:pointer}
.chat-teaser-close:hover{color:var(--text)}
@keyframes chat-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chat-fab-ring{animation:none;opacity:.35}.chat-teaser{animation:none}.chat-fab,.chat-fab svg{transition:none}}
.chat-panel{width:min(378px,calc(100vw - 32px));height:min(560px,calc(100vh - 130px));background:linear-gradient(160deg,#141c2c,#0e1524);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px -30px #000;animation:chat-rise .28s ease both}
.chat-head{display:flex;align-items:center;gap:11px;padding:14px 15px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#182136,#131b2c)}
.chat-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#ffd76a,#e07d10);font-size:18px;flex:none}
.chat-head-text{flex:1;min-width:0;line-height:1.35}
.chat-status{display:block;font-size:12px;color:var(--muted)}
.chat-status::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:middle}
.chat-body{flex:1;display:flex;flex-direction:column;min-height:0}
.chat-intro{padding:18px 16px;overflow-y:auto}
.chat-intro-lead{margin:0 0 16px;color:var(--muted);line-height:1.6}
.chat-intro .field{margin-bottom:12px}
.chat-intro .field label{font-size:12.5px}
.chat-intro .req{color:var(--gold)}
.chat-intro .btn{width:100%;margin-top:4px}
.chat-clip{flex:none;width:38px;height:42px;display:grid;place-items:center;border-radius:10px;color:var(--muted);cursor:pointer}
.chat-clip:hover{color:var(--gold);background:#1a2438}
.chat-clip svg{width:19px;height:19px}
.chat-send{flex:none;width:42px;height:42px;padding:0;display:grid;place-items:center}
.chat-send svg{width:19px;height:19px}
.chat-attach{display:flex;align-items:center;gap:8px;background:#1a2438;border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:12.5px;color:var(--muted)}
.chat-attach span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-attach-x{background:none;border:0;color:var(--muted);font-size:17px;line-height:1;cursor:pointer}
.chat-attach-x:hover{color:var(--red)}
.chat-file{display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px 10px;border-radius:9px;background:#0e1728;border:1px solid var(--line);color:var(--blue);font-size:12.5px;text-decoration:none}
.chat-msg.mine .chat-file{background:#00000024;border-color:#00000030;color:#3a2c05}
.chat-shot{display:block;margin-top:6px;max-width:210px;border-radius:10px;border:1px solid var(--line)}
.chat-close{background:none;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.chat-close:hover{color:var(--text)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.chat-empty{color:var(--muted);text-align:center;padding:22px 12px;line-height:1.6}
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:84%}
.chat-msg.mine{align-self:flex-end;align-items:flex-end}
.chat-msg .bubble{background:#1e2942;border:1px solid #2f3d5c;border-radius:14px 14px 14px 4px;padding:9px 13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.chat-msg.mine .bubble{background:linear-gradient(130deg,#f2c94c,#d59b27);color:#141414;border:0;border-radius:14px 14px 4px 14px;font-weight:600}
.chat-msg time{font-size:11px;color:var(--muted)}
.chat-form{border-top:1px solid var(--line);padding:12px;background:#111a2a;display:flex;flex-direction:column;gap:8px}
.chat-name{padding:8px 11px}
.chat-row{display:flex;gap:8px;align-items:flex-end}
.chat-row textarea{min-height:42px;max-height:120px;resize:none;padding:10px 12px}
.chat-error{margin:0;color:#ffc0ca;font-size:13px}
.card .chat-log{height:400px;border:1px solid var(--line);border-radius:12px;background:#0d1422}
@media(max-width:540px){.chat-widget{right:12px;bottom:12px}.chat-toggle-text{display:none}.chat-toggle{padding:14px}.chat-panel{height:min(70vh,480px)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.product-card{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;isolation:isolate}
.pc-blur{position:absolute;top:50%;left:50%;width:116%;height:116%;transform:translate(-50%,-50%);object-fit:cover;filter:blur(30px) saturate(1.5) brightness(.5);z-index:0}
.pc-photo{position:relative;z-index:1;display:block;width:100%;aspect-ratio:2/1;object-fit:contain;transition:transform .4s ease}
.pc-empty{display:grid;place-items:center;font-size:54px;background:#0b1220}
.pc-frost{position:absolute;left:0;right:0;bottom:0;height:58%;z-index:2;-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);mask-image:linear-gradient(180deg,transparent 0,#000 38%)}
.pc-scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(8,13,24,.22) 0,rgba(8,13,24,0) 26%,rgba(8,13,24,.3) 52%,rgba(8,13,24,.66) 78%,rgba(8,13,24,.76) 100%)}
.pc-hit{position:absolute;inset:0;z-index:4}
.pc-body{position:relative;z-index:5;margin-top:auto;padding:14px 18px 18px;pointer-events:none;text-shadow:0 1px 5px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.5)}
.pc-body form,.pc-body .btn,.pc-body a{pointer-events:auto}
.pc-body .badge{background:#0e1930d9;color:#e2ebff}
.pc-body .muted{color:#c6d3ec;margin:0 0 12px}
.pc-body .section-head{margin:0;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.product-card h3{margin:10px 0 6px;min-height:0;text-wrap:balance}
.product-card:hover .pc-photo{transform:scale(1.04)}
.product-card:hover{border-color:#5a6d92}
.product-hero{position:relative;overflow:hidden;padding:0;height:330px;isolation:isolate}
.ph-photo{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:16px}
.ph-empty{display:grid;place-items:center;height:100%;font-size:64px;background:#0b1220}
@media(max-width:540px){.pc-body{padding:12px 15px 15px}.product-hero{height:240px}}
.image-picker{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start}.image-preview{aspect-ratio:2/1;background:#0b1220;border:1px dashed #35425c;border-radius:12px;display:grid;place-items:center;overflow:hidden}.image-preview img{width:100%;height:100%;object-fit:cover}input[type=file]{width:100%;background:#0c1423;border:1px solid #35425c;border-radius:10px;color:var(--text);padding:9px 12px;font:inherit}input[type=file]::file-selector-button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 12px;margin-right:10px;font:inherit;font-weight:700;cursor:pointer}@media(max-width:640px){.image-picker{grid-template-columns:1fr}}
[hidden]{display:none!important}input[type=checkbox]{accent-color:var(--gold)}.check{width:17px;height:17px;cursor:pointer;vertical-align:middle}.pick{width:44px;text-align:center}.bulk-bar{position:sticky;top:76px;z-index:6}.btn[disabled]{opacity:.45;cursor:not-allowed}.btn[disabled]:hover{border-color:var(--line);transform:none}tr[data-bulk-row]:has([data-bulk-item]:checked){background:#1b2740}@media(max-width:850px){.bulk-bar{position:static}}

/* Category marquee — hàng chạy phải→trái + kéo qua lại được */
.cat-marquee{position:relative;overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cat-marquee::-webkit-scrollbar{display:none}
.cat-marquee.dragging{cursor:grabbing}
.cat-marquee.dragging .cat-item{pointer-events:none}
.cat-track{display:flex;flex-wrap:nowrap;width:max-content;gap:18px}
.cat-item{flex:0 0 260px;width:260px;user-select:none;-webkit-user-drag:none}
@media(max-width:540px){.cat-item{flex-basis:220px;width:220px}}
@media(prefers-reduced-motion:reduce){.cat-item[aria-hidden="true"]{display:none}}

/* Catalog — bố cục sidebar trái */
.cat-sidebar{position:sticky;top:84px;display:block;padding:16px}
.cat-sidebar .field{margin-bottom:14px}
.cat-nav-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800;margin:6px 4px 8px}
.cat-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.cat-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:9px;color:var(--muted);font-weight:600}
.cat-nav a:hover{background:#1b2740;color:#fff}
.cat-nav a.active{background:linear-gradient(130deg,var(--gold),var(--gold2));color:#111}
.cat-count{font-size:12px;font-weight:800;background:#0b1220;color:#cbd9f4;border-radius:99px;padding:1px 9px;min-width:26px;text-align:center}
.cat-nav a.active .cat-count{background:#00000026;color:#3a2c05}
.cat-sort{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.cat-main .grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.cat-main .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.cat-sidebar{position:static;padding:12px}.cat-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px}.cat-nav a{white-space:nowrap}.cat-count{display:none}.cat-sort{border-top:0;padding-top:0}}
@media(max-width:540px){.cat-main .grid{grid-template-columns:1fr}}