/* Kim Hoàn Charm Studio - Modern Luxury Boutique UI */
:root{
  --bg:#FFF6F8; --surface:#FFFFFF; --stage:#FFF0F4; --fg:#361F26; --muted:#8E727A; --line:#F5D9E2;
  --accent:#E26D8C; --accent-hover:#CC5474; --soft:#FDF2F5; --scrim:rgba(30,16,22,.48);
  --danger:#D9344A; --on-danger:#FFFFFF; --toast-act:#FFB5C5; --shine:rgba(255,255,255,.75);
  --hl:#FFE2E9; --on-hl:#361F26;
  --new:#E85D75; --on-new:#FFFFFF;
  --on-accent:#FFFFFF; --chip:rgba(255,255,255,.96); --chip-line:#F5D6E0; --chip-shadow:0 6px 20px rgba(226,109,140,.12);
  --font:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --fast:120ms; --med:200ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.4,0,1,1);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1A1114; --surface:#24191E; --stage:#2F1E25; --fg:#FDF2F5; --muted:#AB9BA1; --line:#462E37;
  --accent:#F28CA4; --accent-hover:#FF9BB1; --soft:#2D1E24; --scrim:rgba(0,0,0,.65);
  --danger:#F87171; --on-danger:#2B0B08; --toast-act:#F28CA4; --shine:rgba(255,255,255,.08);
  --hl:#532938; --on-hl:#FDF2F5;
  --on-accent:#1A1114; --chip:rgba(44,30,36,.96); --chip-line:#563B46; --chip-shadow:0 6px 18px rgba(0,0,0,.4); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#1A1114; --surface:#24191E; --stage:#2F1E25; --fg:#FDF2F5; --muted:#AB9BA1; --line:#462E37;
  --accent:#F28CA4; --accent-hover:#FF9BB1; --soft:#2D1E24; --scrim:rgba(0,0,0,.65);
  --danger:#F87171; --on-danger:#2B0B08; --toast-act:#F28CA4; --shine:rgba(255,255,255,.08);
  --hl:#532938; --on-hl:#FDF2F5;
  --on-accent:#1A1114; --chip:rgba(44,30,36,.96); --chip-line:#563B46; --chip-shadow:0 6px 18px rgba(0,0,0,.4); color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%; overflow:hidden; overscroll-behavior:none}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
*{touch-action:manipulation}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:14px; line-height:1.45; -webkit-tap-highlight-color:transparent; overscroll-behavior:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; position:relative}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.vh{position:absolute!important; top:0; left:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}

.shell{height:100%; display:flex; flex-direction:column; max-width:1200px; margin:0 auto;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
@supports (height:100dvh){ .shell{height:100dvh} }
.shell{overflow:hidden; --lift-ms:700ms; --lift-ease:cubic-bezier(.4,0,.2,1)}
.shell.lifted > .top{margin-top:calc(-1 * var(--lift,0px))}
.shell.lifted > .top,.shell.lifted > .work,.shell.lifted > .catalog{transform:translate3d(0,var(--ly,0px),0)}
.shell.lift-anim > .top,.shell.lift-anim > .work,.shell.lift-anim > .catalog{transition:transform var(--lift-ms) var(--lift-ease); will-change:transform}

/* Header */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px 8px; background:rgba(255,255,255,.9); backdrop-filter:blur(12px)}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-sparkle{color:var(--accent); display:inline-flex; align-items:center; flex-shrink:0; animation:sparkleFloat 3s ease-in-out infinite}
@keyframes sparkleFloat{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.15) rotate(8deg)}}
.brand-titles{display:flex; flex-direction:column; min-width:0}
.brand b{font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--fg); background:linear-gradient(135deg,var(--accent),#B83256); -webkit-background-clip:text; -webkit-text-fill-color:transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-sub{font-size:11px; font-weight:500; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top-actions{display:flex; align-items:center; gap:8px}
.pill-btn{height:36px; padding:0 16px; border-radius:999px; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex:none; transition:all var(--fast); background:linear-gradient(135deg,#E26D8C 0%,#D44D71 100%); color:#FFFFFF; border:none; box-shadow:0 3px 12px rgba(226,109,140,.32)}
.pill-btn:hover{background:linear-gradient(135deg,#D44D71 0%,#BF3A5E 100%); box-shadow:0 5px 16px rgba(226,109,140,.42); transform:translateY(-1px)}
.pill-btn:active{transform:translateY(1px); box-shadow:0 2px 6px rgba(226,109,140,.25)}
.admin-link-btn{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:5px 10px; border-radius:999px; text-decoration:none; transition:all 0.2s}
.admin-link-btn:hover{color:var(--accent); border-color:var(--accent); background:var(--soft)}
.zalo-top-btn{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#0068ff; background:#edf5ff; border:1px solid #c9e0ff; padding:5px 11px; border-radius:999px; text-decoration:none; transition:all 0.2s}
.zalo-top-btn:hover{background:#0068ff; color:#fff; border-color:#0068ff; box-shadow:0 2px 8px rgba(0,104,255,0.25)}

/* Policy Strip */
.store-policy-strip{display:flex; align-items:center; gap:8px; padding:7px 16px; background:#FFF5F7; border-bottom:1px solid var(--line); overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.store-policy-strip::-webkit-scrollbar{display:none}
.policy-pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:#7D5E67; background:#FFFFFF; border:1px solid #F6D6DF; padding:3px 10px; border-radius:999px; flex-shrink:0; box-shadow:0 1px 3px rgba(226,109,140,0.05)}
.policy-pill.highlight{background:#FFE8EE; border-color:#F8B4C4; color:#B9294D; font-weight:500}
.policy-pill.highlight .p-dot{width:6px; height:6px; border-radius:50%; background:#E26D8C}
.policy-pill.zalo{background:#EBF3FF; border-color:#BED8FF; color:#0068FF; text-decoration:none; font-weight:600}
.policy-pill.zalo:hover{background:#0068FF; color:#FFF; box-shadow:0 2px 8px rgba(0,104,255,0.25)}

/* Studio Work Area */
.work{padding:0 14px; flex:none}
.stage{position:relative; background:var(--stage); border-radius:22px; border:1.5px solid var(--line); box-shadow:0 8px 24px rgba(226,109,140,.06), inset 0 2px 10px rgba(226,109,140,.04)}
.canvas-wrap{position:relative; display:flex; justify-content:center; min-width:0}
#stage{display:block; touch-action:none; user-select:none; -webkit-user-select:none; border-radius:20px}
.stage-btn{position:absolute; top:8px; z-index:2; width:36px; height:36px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:background-color var(--fast), color var(--fast), border-color var(--fast); box-shadow:0 2px 6px rgba(226,109,140,.08)}
.stage-btn::after{content:""; position:absolute; inset:-5px}
.stage-btn:hover{color:var(--accent); border-color:var(--accent)}
.stage-btn:active{background:var(--soft)}
.stage-btn[aria-expanded="true"], .stage-btn[aria-pressed="true"]{background:linear-gradient(135deg,#E26D8C,#D44D71); color:#FFFFFF; border-color:#E26D8C}
.num-btn{left:8px}
.gold-btn{right:8px; width:auto; min-width:36px; padding:0 10px 0 8px; gap:5px; display:inline-flex; align-items:center; border-radius:999px; color:var(--fg); font-size:12px; font-weight:600; white-space:nowrap; z-index:4}
.gold-btn .gold-btn-icon{display:inline-flex; align-items:center; justify-content:center; color:#D49B1E; transition:transform 260ms var(--ease)}
.gold-btn:hover{color:#B8760C; border-color:#D49B1E}
.gold-btn:hover .gold-btn-icon{transform:scale(1.18) rotate(12deg)}
.gold-btn[aria-pressed="true"], .gold-btn.active{background:linear-gradient(135deg,#F3C642 0%,#D49B1E 60%,#B8760C 100%); color:#FFFFFF; border-color:#D49B1E; box-shadow:0 3px 12px rgba(212,155,30,.38)}
.gold-btn[aria-pressed="true"] .gold-btn-icon, .gold-btn.active .gold-btn-icon{color:#FFF6D6; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.zoom-btn{left:8px; top:50px; width:auto; min-width:36px; padding:0 10px 0 8px; gap:4px; display:inline-flex; align-items:center; border-radius:999px; color:var(--fg); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; transform-origin:18px 50%}
.zoom-btn svg{flex:none; color:var(--muted)}
.corner{position:absolute; top:8px; left:50%; transform:translateX(-50%); display:flex; align-items:center; z-index:4}
.seg{position:relative; display:inline-flex; padding:3px; gap:3px; border-radius:999px; background:rgba(255,255,255,.94); border:1px solid var(--line); box-shadow:0 3px 10px rgba(226,109,140,.08); backdrop-filter:blur(8px)}
.seg::before{content:""; position:absolute; top:3px; left:0; height:28px; width:var(--seg-w,0px); border-radius:999px; background:linear-gradient(135deg,#E26D8C,#D44D71); transform:translate3d(var(--seg-x,0px),0,0); pointer-events:none; box-shadow:0 2px 6px rgba(226,109,140,.28)}
.seg.ready::before{transition:transform 600ms cubic-bezier(.3,.7,.2,1), width 600ms cubic-bezier(.3,.7,.2,1)}
.seg button{z-index:1; height:28px; padding:0 11px; border-radius:999px; font-size:12px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:5px; transition:color 600ms var(--ease)}
.seg button::after{content:""; position:absolute; inset:-8px 0}
.seg button[aria-checked="true"]{color:#FFFFFF}
.seg{transition:opacity 260ms var(--ease), visibility 0s}
.corner.only-ring .seg{opacity:0; visibility:hidden; pointer-events:none; transition:opacity 200ms var(--ease), visibility 0s linear 200ms}
.seg:not(.ready) button[aria-checked="true"]{background:var(--accent); color:#FFFFFF}

.sel-pill{position:absolute; left:50%; bottom:0; transform:translateX(-50%); transform-origin:50% 100%; max-width:calc(100% - 16px); height:32px; display:flex; align-items:center; gap:6px; padding:0 14px; border-radius:16px 16px 0 0; background:var(--chip); border:1px solid var(--chip-line); border-bottom:0; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--fg); font-size:11.5px; white-space:nowrap; pointer-events:none; box-shadow:var(--chip-shadow)}
.sel-clip{position:absolute; left:0; right:0; bottom:0; height:56px; overflow:hidden; pointer-events:none; border-radius:0 0 22px 22px}
.sel-pill .sc-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; min-width:0}
.sel-pill .sc-v{flex:none; color:var(--muted)}
.sel-pill .sc-p{flex:none; font-weight:600; font-variant-numeric:tabular-nums; padding-left:7px; border-left:1px solid var(--chip-line)}
.sel-pill.sum-pill{overflow:hidden; color:var(--muted); gap:3px}
.sel-pill.sum-pill b{font-size:12px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums}
.sel-pill.sum-pill .sm-i{flex:none}
.sel-pill.sum-pill .sm-i:not(:first-child)::before{content:"•"; margin-right:3px}
.sel-pill.sum-pill .sc-p{margin-left:4px; color:var(--muted); font-weight:400}
.sel-pill.sum-pill .sc-p b{display:inline-block; font-size:12px; font-weight:700; color:var(--accent)}
.sel-pill.sum-pill.c1 .sc-p .sm-lb{display:none}

.pan-btn{position:absolute; top:0; width:36px; height:36px; margin-top:-18px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--fg); box-shadow:0 1px 4px rgba(0,0,0,.10); transition:opacity var(--med), background-color var(--fast)}
.pan-btn::after{content:""; position:absolute; inset:-5px}
.pan-btn.l{left:8px} .pan-btn.r{right:8px}
.pan-btn:disabled{opacity:0; visibility:hidden}
.pan-btn:active{background:var(--soft)}

/* Studio Tool Dock */
.toolbar{display:flex; justify-content:center; align-items:center; padding:6px 0 8px}
.tools{display:inline-flex; justify-content:center; gap:4px; padding:3px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--line); box-shadow:0 3px 12px rgba(226,109,140,.08)}
.slot{display:grid; justify-items:center; min-width:54px; transition:flex-basis 480ms cubic-bezier(.3,.7,.2,1), min-width 480ms cubic-bezier(.3,.7,.2,1)}
.tool{grid-area:1 / 1; width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap; transition:opacity 300ms var(--ease) 120ms, transform 420ms var(--ease-out) 120ms, visibility 0s}
.slot.s4 .tool{width:60px}
.tool .ic{width:36px; height:36px; border-radius:50%; background:var(--soft); border:1px solid var(--line); display:grid; place-items:center; color:var(--fg); transition:all var(--fast)}
.tool:hover:not(:disabled) .ic{background:var(--accent); color:#FFFFFF; border-color:var(--accent); transform:scale(1.05)}
.tool[data-tool="del"]:hover:not(:disabled) .ic{background:#E24B5E; border-color:#E24B5E; color:#FFFFFF}
.tool:active:not(:disabled) .ic{transform:scale(.92)}
.tool:disabled{opacity:.3}
.toolbar[data-mode="sel"] .tool[data-ctx="idle"], .toolbar[data-mode="idle"] .tool[data-ctx="sel"]{opacity:0; transform:scale(.7); visibility:hidden; pointer-events:none; transition:opacity 180ms var(--ease-in), transform 220ms var(--ease-in), visibility 0s linear 220ms}

/* Catalog Showcase with Horizontal Category Pills */
.catalog{flex:1; min-height:0; display:flex; flex-direction:column; background:var(--surface); border-top:1px solid var(--line); border-radius:24px 24px 0 0; overflow:hidden}
.cbar{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 14px; border-bottom:1px solid var(--line); --s-dur:380ms; --s-ease:cubic-bezier(.45,0,.2,1); --s-delay:0ms}
.ctabs{position:relative; display:flex; gap:20px; min-width:0; transition:transform var(--s-dur) var(--s-ease)}
.ctabs::after{content:""; position:absolute; left:0; bottom:-6px; width:100px; height:2.5px; border-radius:2px 2px 0 0; background:linear-gradient(90deg,#E26D8C,#F5A1B5); transform-origin:0 50%; transform:translate3d(var(--tab-x,0px),0,0) scaleX(var(--tab-k,0)); pointer-events:none}
.ctabs.ready::after{transition:transform 600ms cubic-bezier(.3,.7,.2,1)}
.ctabs.tb-now::after{transition:none}
.ctabs:not(.ready)::after{opacity:0}
.cbar.searching .ctabs{transform:translate3d(var(--tabs-out,-120%),0,0); pointer-events:none; transition:transform var(--s-dur) var(--s-ease) var(--s-delay)}
.cbar.s-gone .ctabs{visibility:hidden}
.ctab{min-height:36px; padding:4px 0; font-weight:600; font-size:13.5px; white-space:nowrap; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 300ms var(--ease)}
.ctab[aria-selected="true"]{color:var(--accent); font-weight:700}
.ctabs:not(.ready) .ctab[aria-selected="true"]{border-color:var(--accent)}

.sbtn{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--fg); background:var(--soft); z-index:1; transition:all var(--fast)}
.sbtn:hover{background:var(--line); color:var(--accent)}
.sbtn .s-ic-close{display:none}
.sbtn[aria-expanded="true"] .s-ic-search, .cbar.searching .sbtn .s-ic-search{display:none}
.sbtn[aria-expanded="true"] .s-ic-close, .cbar.searching .sbtn .s-ic-close{display:block}
.sbtn:active svg{transform:scale(.9)}
.csearch{position:absolute; left:12px; right:26px; top:3px; height:38px; overflow:hidden; visibility:hidden; pointer-events:none}
.cbar.searching .csearch{visibility:visible; pointer-events:auto}
.cfield{position:absolute; top:0; bottom:0; left:0; right:26px; border-radius:19px; background:var(--soft); overflow:hidden; transform:translate3d(calc(100% + 7px),0,0); transition:transform var(--s-dur) var(--s-ease)}
.cbar.searching .cfield{transform:translate3d(0,0,0); transition:transform var(--s-dur) var(--s-ease) var(--s-delay)}
.csearch input{width:calc(100% / .875); height:calc(100% / .875); transform:scale(.875); transform-origin:0 0; border:0; background:transparent; color:var(--fg); font:inherit; font-size:15px; padding:0 16px; outline:none; -webkit-appearance:none; border-radius:22px}
.cfield:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.xbtn{flex:none; width:38px; height:38px; border-radius:50%; display:none; place-items:center; color:var(--fg); background:var(--surface); z-index:1}
.cbar.has-x{--xd:44px}
.cbar.has-x .xbtn{display:grid}
.xbtn svg{transition:transform var(--lift-ms,700ms) var(--lift-ease,ease)}
.xbtn[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Horizontal Category Pills Carousel (replaces vertical cside) */
.cbody{flex:1; min-height:0; display:flex; flex-direction:column}
.cside{position:sticky; top:0; z-index:5; width:100%; display:flex; flex-direction:row; align-items:center; gap:8px; padding:8px 14px; background:var(--surface); border-bottom:1px solid var(--line); overflow-x:auto; white-space:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.cside::-webkit-scrollbar{display:none}
.cside button{flex:0 0 auto; width:auto; min-height:32px; padding:4px 12px; border-radius:999px; background:var(--soft); border:1px solid var(--line); color:var(--muted); font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; transition:all var(--fast)}
.cside button:active{transform:scale(.95)}
.cside button[aria-current="true"]{background:linear-gradient(135deg,#E26D8C,#D44D71); color:#FFFFFF; border-color:#E26D8C; box-shadow:0 3px 10px rgba(226,109,140,.28)}
.cside .lb{white-space:nowrap!important; display:inline-block}
.cside .lb br{display:none}
.cside::before,.cside::after,.cside button[aria-current="true"]::before{display:none!important}
.cside .ndot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--new); margin-left:3px}

/* Grid & Product Cards */
.cgrid-wrap{flex:1; min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:10px 14px calc(76px + env(safe-area-inset-bottom,0px))}
.cgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px}
.card{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px; border-radius:16px; background:var(--surface); border:1px solid var(--line); text-align:center; min-width:0; transition:all var(--fast); box-shadow:0 2px 6px rgba(0,0,0,.02)}
.card:active{transform:scale(.96)}
.card:hover{border-color:#F5C6D3; box-shadow:0 4px 14px rgba(226,109,140,.12)}
.card .ph{width:100%; aspect-ratio:1; border-radius:12px; background:var(--stage); border:1px solid #FBE8EE; display:grid; place-items:center; overflow:hidden; margin-bottom:2px}
.card .ph img{width:84%; height:auto; aspect-ratio:1; object-fit:contain; display:block; transition:opacity 220ms var(--ease)}
.card[data-strap] .ph img{width:100%; height:100%}
.card .ph.ld{background:var(--soft)}
.card .ph.ld img{opacity:0}
.card .nm{font-size:12px; font-weight:600; line-height:1.3; width:100%; padding:0 2px; color:var(--fg); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .tag{font-size:11px; color:var(--muted); background:var(--soft); border-radius:6px; padding:1px 6px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card .pr{font-size:12px; font-weight:700; color:var(--accent); margin-top:auto}
.card .pr.free{color:var(--accent)}
.card .new{position:absolute; top:6px; left:6px; height:20px; padding:0 8px; border-radius:999px; background:linear-gradient(135deg,#FF6B8B,#FF8EA3); color:var(--on-new); font-size:11px; font-weight:700; line-height:1; pointer-events:none; box-shadow:0 2px 6px rgba(255,107,139,.3)}
.card .used{position:absolute; top:6px; right:6px; font-size:11.5px; font-weight:700; background:linear-gradient(135deg,#E26D8C,#D44D71); color:#FFFFFF; border-radius:999px; min-width:22px; height:22px; padding:0 6px; display:grid; place-items:center; line-height:1; box-shadow:0 2px 6px rgba(226,109,140,.35)}
.card.on{border-color:var(--accent); background:#FFF8FA}
.card.on .ph{box-shadow:inset 0 0 0 2px var(--accent)}
.card.is-oos{opacity:0.65; filter:grayscale(0.3)}
.card.is-oos:hover{filter:grayscale(0); opacity:0.9}
.stk-badge{position:absolute; top:6px; right:6px; font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:999px; line-height:1.3; z-index:3; box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.stk-badge.oos{background:#fee2e2; color:#b91c1c; border:1px solid #f87171}
.stk-badge.left{background:#FFF0F4; color:#C94065; border:1px solid #F9C5D4}
.note{font-size:12px; color:var(--muted); padding:12px 4px 0; margin:0; text-align:center}

/* Floating Bottom Order Bar */
.bottom-order-bar{position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 -4px 16px rgba(226,109,140,.08); max-width:1200px; margin:0 auto}
.bob-info{display:flex; flex-direction:column; min-width:0}
.bob-badge{font-size:10px; font-weight:700; text-transform:uppercase; color:var(--accent); letter-spacing:.4px}
.bob-price{display:flex; align-items:baseline; gap:5px; white-space:nowrap}
.bob-price b{font-size:18px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums}
.bob-cnt{font-size:12px; color:var(--muted); font-weight:500}
.bob-actions{display:flex; align-items:center; gap:8px}
.bob-btn{height:40px; padding:0 14px; border-radius:999px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap; transition:all var(--fast); border:0; cursor:pointer}
.bob-btn:active{transform:scale(.96)}
.bob-btn.save-btn{background:linear-gradient(135deg,#E26D8C,#D44D71); color:#FFFFFF; box-shadow:0 3px 10px rgba(226,109,140,.3)}
.bob-btn.save-btn:hover{background:linear-gradient(135deg,#D44D71,#BF3A5E)}
.bob-btn.zalo-btn{background:#0068FF; color:#FFFFFF; box-shadow:0 3px 10px rgba(0,104,255,.25)}
.bob-btn.zalo-btn:hover{background:#0053cc}

/* Modals & Sheets */
.overlay{position:fixed; inset:0; background:var(--scrim); display:flex; align-items:flex-end; justify-content:center; z-index:50}
.sheet{background:var(--surface); width:100%; max-width:560px; border-radius:22px 22px 0 0; padding:6px 16px calc(18px + env(safe-area-inset-bottom,0px)); max-height:90%; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:14px}
.sheet.tall{height:92%}
.sh-top{display:flex; flex-direction:column; gap:8px; touch-action:none; margin:0 -16px; padding:0 16px}
.grab{align-self:center; width:40px; height:5px; border-radius:3px; background:var(--line); flex:none}
.sh-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.sh-head h3{margin:6px 0 0; font-size:18px; font-weight:700; letter-spacing:-.01em}
.x{width:38px; height:38px; border-radius:50%; background:var(--soft); display:grid; place-items:center; flex:none}
.sh-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; bottom:calc(-18px - env(safe-area-inset-bottom,0px)); background:var(--surface); padding:10px 0 calc(4px + env(safe-area-inset-bottom,0px)); margin-top:auto}
.sh-btns{display:flex; gap:10px; flex:1}
.btn{height:46px; padding:0 20px; border-radius:999px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--surface); transition:background-color var(--fast)}
.btn.primary{background:linear-gradient(135deg,#E26D8C,#D44D71); color:#FFFFFF; border-color:#E26D8C; box-shadow:0 3px 10px rgba(226,109,140,.25)}
.btn.primary:hover{background:linear-gradient(135deg,#D44D71,#BF3A5E)}
.btn.danger{background:var(--danger); color:var(--on-danger); border-color:var(--danger)}
.btn.zalo-action-btn{background:#0068FF; color:#FFF; border-color:#0068FF; display:inline-flex; align-items:center; gap:6px; box-shadow:0 3px 10px rgba(0,104,255,0.25)}
.btn.zalo-action-btn:hover{background:#0053cc}
.sum-box{border:1px solid var(--line); border-radius:14px; overflow:hidden}
.row{display:grid; grid-template-columns:26px 40px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 12px; border-top:1px solid var(--line); width:100%; text-align:left}
.row:first-child{border-top:0}
.row.nonum{grid-template-columns:40px minmax(0,1fr) auto}
.row img{width:40px; height:40px; object-fit:contain}
.row .t b{display:block; font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .t span{font-size:12px; color:var(--muted)}
.num{width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#E26D8C,#D44D71); color:#FFFFFF; font-size:12px; font-weight:700; display:grid; place-items:center}
.total{display:flex; justify-content:space-between; align-items:baseline; padding:4px 2px}
.total span{font-weight:600}
.total b{font-size:22px; font-variant-numeric:tabular-nums; color:var(--accent)}
.policy-sheet-box{background:#FFF5F8; border:1px solid #F7D4DF; border-radius:12px; padding:10px 14px; margin:10px 0; text-align:left}
.psb-title{font-size:13px; font-weight:700; color:#D44268; margin-bottom:4px}
.psb-desc{font-size:12px; color:#554448; line-height:1.5}
.toast{position:fixed; left:50%; bottom:calc(70px + env(safe-area-inset-bottom,0px)); transform:translate3d(-50%,120%,0); opacity:0; visibility:hidden; transition:all 280ms var(--ease-out); display:flex; align-items:center; gap:2px; min-height:42px; background:var(--fg); color:var(--bg); padding:0 16px; border-radius:22px; font-size:13px; font-weight:500; z-index:80; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.show{transform:translate3d(-50%,0,0); opacity:1; visibility:visible}
.toast button{pointer-events:auto; height:32px; padding:0 10px; margin-left:6px; border-radius:16px; font-weight:700; color:var(--toast-act)}
.toast button:active{background:rgba(255,255,255,.2)}
.sk{background:var(--soft); position:relative; overflow:hidden}

/* Chế độ Xi Vàng (Gold Plated) */
body.gold-mode .card[data-charm] .ph img,
body.gold-mode .card[data-stop] .ph img{filter:sepia(1) saturate(3.8) hue-rotate(-6deg) brightness(1.02) contrast(1.02); transition:filter 280ms ease}
.bob-badge.gold{background:linear-gradient(135deg,#F3C642,#D49B1E); color:#FFFFFF}
.gold-tag b{color:#D49B1E !important}

/* Desktop & Landscape Responsive */
@media (min-width:900px){
  .shell{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr); grid-template-rows:auto auto minmax(0,1fr); column-gap:24px; padding:0 24px 24px}
  .top{grid-column:1 / -1; padding:14px 0 8px; background:transparent}
  .store-policy-strip{grid-column:1 / -1; border-radius:12px; margin-bottom:12px}
  .work{grid-row:3; grid-column:1; padding:0; align-self:start}
  .catalog{grid-row:3; grid-column:2; border:1px solid var(--line); border-radius:22px; min-height:0}
  .bottom-order-bar{position:static; border-radius:16px; margin-top:12px; box-shadow:0 4px 16px rgba(226,109,140,.08); grid-column:1; border:1px solid var(--line)}
  .cgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .cgrid-wrap{padding-bottom:24px}
}
@media (max-width:360px){
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand b{font-size:14px}
  .bob-btn{padding:0 10px; font-size:12px}
}