/* ==========================================================================
   TLH · VIC FILM STUDIO — ระบบจำลองฟิล์ม
   UI ตามต้นแบบ anuphonghv.github.io/ux-ui_design_simuretor-film
   ทุก selector ขึ้นต้นด้วย .vic-studio เพื่อไม่ชนกับธีม Hello / Elementor kit
   ========================================================================== */

.vic-studio{
  --ink:#16161a; --ink-2:#55555f; --ink-3:#7c7c87;
  --line:#e4e4e8; --line-2:#f1f1f4;
  --surface:#fff; --bg:#f6f6f7;
  --red:#d81f26; --red-ink:#b81017; --red-tint:#fef4f4; --red-line:#eeadb0;
  --dark:#0e0e12; --dark-2:#1a1a21; --dark-line:#2c2c35; --dark-ink:#efeff2;
  --r-lg:16px; --r-md:11px; --r-sm:8px;
  --shadow-lg:0 24px 70px -20px rgba(12,12,20,.45);
  --font-display:'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-body:'IBM Plex Sans Thai', system-ui, sans-serif;
  width:100%; max-width:1180px; margin-inline:auto;
  color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-align:left;
}

/* ---------- reset (กันสไตล์ธีมรั่วเข้ามา) ------------------------------------ */
.vic-studio *,.vic-studio *::before,.vic-studio *::after{box-sizing:border-box}
.vic-studio p{margin:0}
.vic-studio h2,.vic-studio h3,.vic-studio h4{font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; margin:0; color:var(--ink); text-transform:none; line-height:1.3}
.vic-studio ul{margin:0; padding:0; list-style:none}
.vic-studio img{max-width:100%; display:block; border:0; border-radius:0; box-shadow:none}
.vic-studio button,.vic-studio input,.vic-studio select{font-family:inherit; font-size:inherit; letter-spacing:normal; text-transform:none; line-height:1.4; color:inherit; margin:0}
.vic-studio button,
.vic-studio button:hover,
.vic-studio button:focus{background-color:transparent; color:inherit; box-shadow:none; text-decoration:none; border:0; border-radius:0; padding:0; white-space:normal}
.vic-studio button:disabled{cursor:not-allowed; opacity:.6}
.vic-studio a{color:var(--red-ink)}
.vic-studio :focus-visible{outline:2px solid var(--red); outline-offset:2px; border-radius:4px}
.vic-studio .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}
.vic-studio .vs-fs{border:0; padding:0; margin:0; min-width:0}
.vic-studio .vs-fs legend{padding:0; float:none; width:auto; border:0}

/* ---------- hero ------------------------------------------------------- */
.vic-studio .vs-hero{padding:0 0 8px}
.vic-studio .vs-kicker{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px}
.vic-studio .vs-kicker::before{content:""; width:26px; height:3px; background:var(--red); border-radius:2px}
.vic-studio .vs-hero h2{font-size:clamp(28px,5vw,44px); line-height:1.18}
.vic-studio .vs-lede{color:var(--ink-2); max-width:56ch; margin:12px 0 0}
.vic-studio .vs-steps{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.vic-studio .vs-steps a{padding:7px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--ink-2); font-size:13.5px; line-height:1.4}
.vic-studio .vs-steps a:hover{background:var(--line-2); color:var(--ink)}

/* ---------- section shell --------------------------------------------- */
.vic-studio .step{padding:26px 0; scroll-margin-top:110px}
.vic-studio .panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px}
.vic-studio .step-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.vic-studio .step-head h3{font-size:clamp(19px,2.4vw,23px)}
.vic-studio .step-head .sub{color:var(--ink-3); font-size:13.5px}
.vic-studio .num{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff; font-family:var(--font-body); font-size:13px; font-weight:600; flex:none; transform:translateY(-2px); margin-right:4px}

/* ---------- choice cards (step 1) -------------------------------------- */
.vic-studio .need-grid{display:grid; gap:12px; grid-template-columns:repeat(5,minmax(0,1fr))}
.vic-studio .choice{position:relative; display:block; cursor:pointer; margin:0}
.vic-studio .choice input,
.vic-studio .pill input,
.vic-studio .swatch input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; -webkit-appearance:none; appearance:none; border:0; padding:0}
.vic-studio .choice-body{display:flex; flex-direction:column; height:100%; padding:16px 15px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); transition:border-color .16s, background .16s, box-shadow .16s}
.vic-studio .choice-body .ch-t{display:block; font-family:var(--font-display); font-weight:600; font-size:15.5px; line-height:1.35; margin-bottom:6px; color:var(--ink)}
.vic-studio .choice-body .ch-d{display:block; font-size:12.5px; line-height:1.5; color:var(--ink-3)}
.vic-studio .choice:hover .choice-body{border-color:#cfcfd6}
.vic-studio .choice input:checked + .choice-body{background:var(--red-tint); border-color:var(--red-line); box-shadow:inset 0 0 0 1px var(--red-line)}
.vic-studio .choice input:checked + .choice-body .ch-t{color:var(--red-ink)}
.vic-studio .choice input:checked + .choice-body .ch-d{color:#9a5257}
.vic-studio .choice input:focus-visible + .choice-body{outline:2px solid var(--red); outline-offset:2px}
.vic-studio .spark{display:block; width:18px; height:18px; margin-bottom:8px; color:var(--ink-3)}
.vic-studio .choice input:checked + .choice-body .spark{color:var(--red)}

/* ---------- recommendation band ---------------------------------------- */
.vic-studio .reco{margin-top:14px; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; border:1.5px solid var(--ink); border-radius:var(--r-md); padding:14px 16px; background:var(--surface)}
.vic-studio .reco-label{font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.25}
.vic-studio .reco-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.vic-studio .reco-card{border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; background:#fbfbfc}
.vic-studio .reco-card .k{display:block; font-size:12.5px; color:var(--ink-3)}
.vic-studio .reco-card .v{display:block; font-family:var(--font-display); font-weight:600; font-size:16px; margin-top:1px}
.vic-studio .reco-card .m{display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px}

/* ---------- buttons ---------------------------------------------------- */
.vic-studio .btn,
.vic-studio .btn:hover,
.vic-studio .btn:focus{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:var(--r-md); border:1px solid transparent; font-weight:600; font-size:14.5px; line-height:1.3; cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, color .15s}
.vic-studio .btn-primary,.vic-studio .btn-primary:focus{background-color:var(--red); color:#fff}
.vic-studio .btn-primary:hover{background-color:var(--red-ink); color:#fff}
.vic-studio .btn-ghost,.vic-studio .btn-ghost:focus{background-color:var(--surface); border-color:var(--line); color:var(--ink)}
.vic-studio .btn-ghost:hover{border-color:#c9c9d1; background-color:var(--line-2); color:var(--ink)}
.vic-studio .btn-block{width:100%}

/* ---------- segmented / pills ------------------------------------------ */
.vic-studio .field-label{display:block; font-size:12.5px; color:var(--ink-3); margin-bottom:7px; font-weight:400; line-height:1.4}
.vic-studio .seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px}
.vic-studio .pill{position:relative; display:block; cursor:pointer; margin:0}
.vic-studio .pill-body{display:grid; place-items:center; text-align:center; min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); font-size:14px; line-height:1.35; transition:border-color .16s, background .16s, color .16s}
.vic-studio .pill:hover .pill-body{border-color:#cfcfd6}
.vic-studio .pill input:checked + .pill-body{background:var(--red-tint); border-color:var(--red-line); color:var(--red-ink); font-weight:600}
.vic-studio .pill input:disabled + .pill-body{opacity:.42; cursor:not-allowed}
.vic-studio .pill input:focus-visible + .pill-body{outline:2px solid var(--red); outline-offset:2px}

.vic-studio select.field{width:100%; min-height:46px; height:auto; padding:0 38px 0 13px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355555f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 8l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 13px center;
  -webkit-appearance:none; appearance:none; cursor:pointer; font-size:15px; color:var(--ink); box-shadow:none}

.vic-studio .car-grid{display:grid; grid-template-columns:1.1fr 2fr .9fr; gap:16px}
.vic-studio .car-type{font-size:12.5px; color:var(--ink-3); margin-top:6px; min-height:1.4em}
.vic-studio .car-colors-label{margin:10px 0 7px}
.vic-studio .car-colors{display:flex; flex-wrap:wrap; gap:6px}
.vic-studio .color-btn,
.vic-studio .color-btn:hover,
.vic-studio .color-btn:focus{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0 12px 0 8px; border:1px solid var(--line); border-radius:99px; background-color:var(--surface); color:var(--ink); font-size:13px; cursor:pointer}
.vic-studio .color-btn:hover{border-color:#cfcfd6}
.vic-studio .color-btn .dot{width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.15); flex:none}
.vic-studio .color-btn[aria-pressed="true"]{border-color:var(--red-line); background-color:var(--red-tint); color:var(--red-ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--red-line)}

/* ---------- studio (step 3) -------------------------------------------- */
.vic-studio .studio{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; margin:26px 0; scroll-margin-top:110px}
.vic-studio .studio-kicker{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.vic-studio .studio-kicker::before{content:""; width:20px; height:2.5px; background:var(--red); border-radius:2px}
.vic-studio .studio > h3{font-size:clamp(22px,3vw,28px); margin-top:8px}
.vic-studio .studio .lede{color:var(--ink-3); font-size:13.5px; margin:4px 0 18px}
.vic-studio .studio-body{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; align-items:start}

/* stage */
.vic-studio .stage{position:relative; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:#f2f2f4}
.vic-studio .stage-media{position:relative; aspect-ratio:1000/558}
.vic-studio .stage-media img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain}
.vic-studio .stage-media img[hidden]{display:none}
.vic-studio .stage-missing{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:calc(100% - 40px); margin:0; padding:7px 13px; border-radius:9px; background:rgba(22,22,26,.8); color:#fff; font-size:12.5px; line-height:1.45; text-align:center; pointer-events:none; backdrop-filter:blur(4px)}
.vic-studio .stage-missing[hidden]{display:none}
.vic-studio .stage-top{position:absolute; inset:10px 10px auto 10px; display:flex; gap:8px; align-items:flex-start; pointer-events:none}
.vic-studio .ba-toggle{display:flex; gap:4px; padding:3px; background:rgba(255,255,255,.93); border:1px solid var(--line); border-radius:9px; pointer-events:auto; backdrop-filter:blur(6px)}
.vic-studio .ba-toggle .pill-body{min-height:32px; border:0; background:transparent; font-size:13px; padding:0 13px; border-radius:6px}
.vic-studio .ba-toggle input:checked + .pill-body{background:var(--red); color:#fff; font-weight:600}
.vic-studio .live-badges{margin-left:auto; display:flex; flex-direction:column; gap:5px; align-items:flex-end}
.vic-studio .live-badge{background:rgba(255,255,255,.93); border:1px solid var(--line); border-radius:7px; padding:4px 9px; font-size:11.5px; line-height:1.4; color:var(--ink-2); backdrop-filter:blur(6px); white-space:nowrap}
.vic-studio .live-badge b{color:var(--ink); font-weight:600}
.vic-studio .stage-bottom{position:absolute; inset:auto 10px 10px 10px; display:flex; justify-content:flex-end; gap:6px}
.vic-studio .angle-btn,
.vic-studio .angle-btn:hover,
.vic-studio .angle-btn:focus{min-height:34px; padding:0 13px; border-radius:8px; border:1px solid var(--line); background-color:rgba(255,255,255,.93); color:var(--ink); font-size:12.5px; cursor:pointer; backdrop-filter:blur(6px)}
.vic-studio .angle-btn[aria-pressed="true"]{background-color:var(--ink); color:#fff; border-color:var(--ink); font-weight:600}
.vic-studio .stage-note{padding:8px 12px; border-top:1px solid var(--line); background:#fbfbfc; font-size:12px; color:var(--ink-3)}

/* view tabs + spec cards */
.vic-studio .view-tabs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.vic-studio .view-tab,
.vic-studio .view-tab:hover,
.vic-studio .view-tab:focus{min-height:42px; border:1px solid var(--line); border-radius:var(--r-sm); background-color:var(--surface); color:var(--ink); font-size:13.5px; cursor:pointer; display:grid; place-items:center; text-align:center; padding:4px 8px}
.vic-studio .view-tab[aria-pressed="true"]{border-color:var(--ink); border-width:1.5px; font-weight:600}
.vic-studio .view-tab.is-pop[aria-pressed="true"]{border-color:var(--red); color:var(--red-ink)}
.vic-studio .spec-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.vic-studio .spec{border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; display:flex; gap:10px; justify-content:space-between; align-items:flex-start}
.vic-studio .spec.is-around{border-color:var(--red-line); background:var(--red-tint)}
.vic-studio .spec .t{font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.35; white-space:nowrap}
.vic-studio .spec .t small{display:block; font-family:var(--font-body); font-weight:400; font-size:11.5px; color:var(--ink-3)}
.vic-studio .spec ul{text-align:right; font-size:11.5px; color:var(--ink-2); line-height:1.65}
.vic-studio .spec li{margin:0}

/* film pickers */
.vic-studio .picker-col{display:grid; gap:14px}
.vic-studio .picker{border:1px solid var(--line); border-radius:var(--r-md); padding:14px; transition:opacity .16s}
.vic-studio .picker.is-off{opacity:.45}
.vic-studio .picker > h4{font-size:15px; margin-bottom:10px}
.vic-studio .picker > h4 small{display:block; font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--ink-3); margin-top:1px}
.vic-studio .swatches{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px}
.vic-studio .swatch{position:relative; display:block; cursor:pointer; margin:0}
.vic-studio .swatch-body{display:block; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); transition:border-color .16s, box-shadow .16s}
.vic-studio .swatch-chip{height:42px; display:grid; place-items:center; position:relative}
.vic-studio .swatch-chip .tick{width:17px; height:17px; border-radius:50%; background:#fff; display:none; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.35)}
.vic-studio .swatch-meta{display:block; padding:5px 4px 6px; text-align:center; border-top:1px solid var(--line-2)}
.vic-studio .swatch-meta .c{display:block; font-size:11px; font-weight:600; line-height:1.3; overflow-wrap:anywhere}
.vic-studio .swatch-meta .v{display:block; font-size:9.5px; color:var(--ink-3); line-height:1.3}
.vic-studio .swatch input:checked + .swatch-body{border-color:var(--ink); box-shadow:0 0 0 1.5px var(--ink)}
.vic-studio .swatch input:checked + .swatch-body .tick{display:grid}
.vic-studio .swatch input:disabled{cursor:not-allowed}
.vic-studio .swatch input:focus-visible + .swatch-body{outline:2px solid var(--red); outline-offset:2px}

.vic-studio .range-row{margin-top:12px}
.vic-studio .range-row input[type=range]{display:block; width:100%; height:26px; padding:0; border:0; background:transparent; box-shadow:none; accent-color:var(--red); -webkit-appearance:auto; appearance:auto}
.vic-studio .range-ends{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3)}
.vic-studio .picker-foot{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:12.5px; color:var(--ink-2); text-align:center}
.vic-studio .picker-foot b{font-family:var(--font-display)}

/* ---------- summary (step 4) ------------------------------------------- */
.vic-studio .summary{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; scroll-margin-top:110px}
.vic-studio .summary > h3{font-size:21px}
.vic-studio .sum-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0; padding-bottom:18px; border-bottom:1px solid var(--line)}
.vic-studio .sum-cell .k{font-size:13px; color:var(--ink-3)}
.vic-studio .sum-cell .row{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; margin-top:7px; color:var(--ink-2)}
.vic-studio .sum-cell .code{font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); margin-top:7px}
.vic-studio .sum-price .k{font-size:13px; color:var(--ink-3)}
.vic-studio .sum-price h4{font-size:26px; margin:4px 0 8px}
.vic-studio .sum-price > p:not(.k){margin:0 0 16px; font-size:13px; color:var(--ink-3); max-width:60ch}
.vic-studio .sum-actions{display:grid; gap:9px; max-width:420px}
.vic-studio .copy-note{font-size:12.5px; color:var(--ink-3); text-align:center; min-height:1.4em}

/* ---------- dialogs ----------------------------------------------------- */
.vic-studio dialog.vs-dialog{padding:0; margin:auto; border:0; background:transparent; max-width:none; max-height:none; color:inherit; overflow:visible}
.vic-studio dialog.vs-dialog:not([open]){display:none}
.vic-studio dialog.vs-dialog::backdrop{background:rgba(10,10,14,.55); backdrop-filter:blur(3px)}
.vic-studio .sheet{width:min(430px,calc(100vw - 28px)); max-height:min(760px,calc(100vh - 40px)); display:flex; flex-direction:column; background:var(--dark); color:var(--dark-ink); border:1px solid var(--dark-line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden}
.vic-studio .sheet-head{display:flex; align-items:center; gap:10px; padding:15px 16px; border-bottom:1px solid var(--dark-line)}
.vic-studio .sheet-head h3{font-size:15px; flex:1; display:flex; align-items:center; gap:8px; color:inherit; flex-wrap:wrap}
.vic-studio .sheet-head .for{font-family:var(--font-body); font-size:11.5px; font-weight:400; color:#9c9caa; border:1px solid var(--dark-line); border-radius:99px; padding:2px 9px}
.vic-studio .icon-btn,
.vic-studio .icon-btn:focus{width:34px; height:34px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--dark-line); background-color:var(--dark-2); color:var(--dark-ink); cursor:pointer; flex:none; padding:0}
.vic-studio .icon-btn:hover{background-color:#252530; color:var(--dark-ink); border:1px solid var(--dark-line); border-radius:8px}
.vic-studio .sheet-body{overflow:auto; padding:12px; display:grid; gap:9px; align-content:start; grid-auto-rows:min-content; -webkit-overflow-scrolling:touch}
.vic-studio .series{border:1px solid var(--dark-line); border-radius:var(--r-md); background:var(--dark-2); overflow:hidden}
.vic-studio .series-head,
.vic-studio .series-head:focus{width:100%; display:flex; align-items:center; gap:12px; padding:13px 14px; background-color:transparent; border:0; text-align:left; color:var(--dark-ink); cursor:pointer}
.vic-studio .series-head:hover{background-color:#21212a; color:var(--dark-ink); padding:13px 14px}
.vic-studio .series-head .sh-txt{display:block; flex:1; min-width:0}
.vic-studio .series-head .badge{display:block; font-size:9.5px; font-weight:700; letter-spacing:.09em; color:var(--red); margin-bottom:3px; background:none; padding:0}
.vic-studio .series-head .nm{display:block; font-family:var(--font-display); font-weight:600; font-size:14.5px}
.vic-studio .series-head .pr{display:block; font-size:11.5px; color:#9c9caa; margin-top:2px}
.vic-studio .series-head .chev{width:34px; height:34px; flex:none; border-radius:50%; border:1px solid #3a3a45; display:grid; place-items:center; transition:transform .2s, background .2s}
.vic-studio .series-head[aria-expanded="true"] .chev{transform:rotate(90deg); background:var(--red); border-color:var(--red)}
.vic-studio .series-models{padding:0 10px 10px; display:grid; gap:6px}
.vic-studio .series-models[hidden]{display:none}
.vic-studio .series-note{font-size:11.5px; color:#82828f; padding:0 4px 8px}
.vic-studio .series-empty{font-size:12px; color:#b4b4c0; padding:10px 11px; border:1px dashed var(--dark-line); border-radius:var(--r-sm)}
.vic-studio .model,
.vic-studio .model:focus{width:100%; display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm); border:1px solid var(--dark-line); background-color:#13131a; color:var(--dark-ink); cursor:pointer; text-align:left}
.vic-studio .model:hover{border:1px solid var(--red); border-radius:var(--r-sm); background-color:#1c1c25; color:var(--dark-ink); padding:9px 11px}
.vic-studio .model[aria-current="true"]{border-color:var(--red); background-color:#2a1417}
.vic-studio .model .sw{width:30px; height:30px; border-radius:6px; flex:none; border:1px solid rgba(255,255,255,.14)}
.vic-studio .model .md-txt{display:block; flex:1; min-width:0}
.vic-studio .model .mc{display:block; font-family:var(--font-display); font-weight:600; font-size:13.5px}
.vic-studio .model .mv{display:block; font-size:11px; color:#9c9caa}
.vic-studio .model .mt{flex:none; text-align:right; font-size:11px; color:#9c9caa}
.vic-studio .model .mt b{display:block; color:#e6e6ec; font-size:12.5px; font-weight:600}
.vic-studio .sheet-foot{padding:11px 16px; border-top:1px solid var(--dark-line); font-size:11.5px; color:#82828f}

/* interior dialog */
.vic-studio .sheet-light{width:min(880px,calc(100vw - 28px)); background:var(--surface); color:var(--ink); border-color:var(--line)}
.vic-studio .sheet-light .sheet-head{border-bottom-color:var(--line)}
.vic-studio .sheet-light .icon-btn,
.vic-studio .sheet-light .icon-btn:focus{background-color:var(--surface); border-color:var(--line); color:var(--ink)}
.vic-studio .sheet-light .icon-btn:hover{background-color:var(--line-2); border-color:var(--line); color:var(--ink)}
.vic-studio .sheet-light .sheet-body{padding:14px}
.vic-studio .sheet-light .sheet-foot{border-top-color:var(--line); color:var(--ink-3)}

.vic-studio .compare{position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; background:#0b0d12; touch-action:none}
.vic-studio .compare svg{position:absolute; inset:0; width:100%; height:100%}
.vic-studio .tint-film{mix-blend-mode:multiply}
.vic-studio .compare-line{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.3); pointer-events:none}
.vic-studio .compare-handle,
.vic-studio .compare-handle:hover,
.vic-studio .compare-handle:focus{position:absolute; top:50%; width:40px; height:40px; transform:translate(-50%,-50%); border-radius:50%; background-color:#fff; border:0; padding:0; display:grid; place-items:center; cursor:ew-resize; box-shadow:0 2px 10px rgba(0,0,0,.35); touch-action:none}
.vic-studio .compare-badges{position:absolute; inset:10px 10px auto 10px; display:flex; gap:8px; align-items:flex-start; pointer-events:none}
.vic-studio .compare-badges .col{display:flex; flex-direction:column; gap:5px}
.vic-studio .tag-code{margin-left:auto; background:var(--red); color:#fff; border-radius:6px; padding:3px 9px; font-size:11px; font-weight:600; letter-spacing:.04em}
.vic-studio .compare-foot{position:absolute; inset:auto 10px 10px auto; display:flex; gap:4px; padding:3px; background:rgba(255,255,255,.93); border-radius:9px; backdrop-filter:blur(6px)}
.vic-studio .compare-foot .pill-body{min-height:32px; border:0; background:transparent; font-size:12.5px; padding:0 12px; border-radius:6px}
.vic-studio .compare-foot input:checked + .pill-body{background:var(--ink); color:#fff; font-weight:600}
.vic-studio .compare-photo{position:absolute; inset:0}
.vic-studio .compare-photo[hidden],.vic-studio .compare-photo img[hidden],.vic-studio .compare-foot[hidden],.vic-studio .tod-pills[hidden]{display:none}
.vic-studio .compare-photo img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover}
.vic-studio .compare .stage-missing{top:auto; bottom:58px; transform:translateX(-50%); z-index:3}
.vic-studio .scene-pills,.vic-studio .tod-pills{display:flex; gap:4px}
.vic-studio .scene-pills:not(:empty) + .tod-pills:not([hidden]){border-left:1px solid var(--line); padding-left:4px; margin-left:2px}
.vic-studio .scene-btn,
.vic-studio .scene-btn:hover,
.vic-studio .scene-btn:focus{min-height:32px; padding:0 12px; border:0; border-radius:6px; background-color:transparent; color:var(--ink); font-size:12.5px; cursor:pointer}
.vic-studio .scene-btn:hover{background-color:var(--line-2)}
.vic-studio .scene-btn[aria-pressed="true"]{background-color:var(--ink); color:#fff; font-weight:600}
/* ชั้นสีฟิล์มบนภาพถ่าย (มาสก์ขนาดเท่าภาพ → cover ตรงกับ object-fit ของภาพ) */
.vic-studio .in-tint{position:absolute; inset:0; pointer-events:none; -webkit-mask-size:cover; mask-size:cover; -webkit-mask-position:center; mask-position:center; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; transition:background-color .35s ease}
.vic-studio .in-tint[hidden]{display:none}

/* แถวใต้ภาพ: คำกำกับซ้าย · ปุ่มความเข้ม · คำกำกับขวา */
.vic-studio .compare-cap{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px 16px; font-size:12px; color:var(--ink-3); margin-top:10px}
.vic-studio .compare-cap .cap-r{text-align:right}
.vic-studio .shade-bar{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px}
.vic-studio .shade-bar:empty{display:none}
.vic-studio .shade-grp{display:flex; align-items:center; gap:4px}
.vic-studio .shade-lbl{min-width:46px; margin-right:4px; font-size:12px; color:var(--ink-2); text-align:right; white-space:nowrap}
.vic-studio .shade-btn,
.vic-studio .shade-btn:hover,
.vic-studio .shade-btn:focus{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 11px 0 8px; border:1px solid var(--line); border-radius:8px; background-color:var(--surface); color:var(--ink); font-size:12.5px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; cursor:pointer; transition:background-color .16s, border-color .16s, color .16s}
.vic-studio .shade-btn:hover{border-color:#cfcfd6; background-color:var(--line-2)}
.vic-studio .shade-btn[aria-pressed="true"]{border-color:var(--ink); background-color:var(--ink); color:#fff; font-weight:600}
.vic-studio .shade-chip{flex:none; width:14px; height:14px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.vic-studio .shade-btn[aria-pressed="true"] .shade-chip{box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
@media (max-width:860px){
  .vic-studio .compare-cap{grid-template-columns:1fr 1fr}
  .vic-studio .shade-bar{grid-column:1 / -1; grid-row:2}
}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1040px){
  .vic-studio .studio-body{grid-template-columns:1fr}
  .vic-studio .picker-col{grid-template-columns:1fr 1fr}
  .vic-studio .need-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vic-studio .car-grid{grid-template-columns:1fr 1fr}
  .vic-studio .car-grid .car-pos{grid-column:1 / -1}
}
@media (max-width:820px){
  .vic-studio .reco{grid-template-columns:1fr}
  .vic-studio .reco-label{font-size:17px}
  .vic-studio .sum-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .vic-studio .vs-steps{display:none}
  .vic-studio .need-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vic-studio .reco-cards{grid-template-columns:1fr}
  .vic-studio .car-grid{grid-template-columns:1fr}
  .vic-studio .studio,.vic-studio .summary,.vic-studio .panel{padding:16px; border-radius:14px}
  .vic-studio .seg{grid-auto-flow:row; grid-template-columns:repeat(3,1fr)}
  .vic-studio .seg.sunroof{grid-template-columns:repeat(2,1fr)}
  .vic-studio .stage-top{inset:8px 8px auto 8px}
  .vic-studio .live-badge{font-size:10px; padding:3px 7px}
  .vic-studio .stage-missing{font-size:11px; padding:5px 10px}
  .vic-studio .ba-toggle .pill-body{font-size:12px; padding:0 10px; min-height:30px}
  .vic-studio .angle-btn,.vic-studio .angle-btn:hover,.vic-studio .angle-btn:focus{min-height:32px; padding:0 10px; font-size:11.5px}
  .vic-studio .spec ul{font-size:10.5px}
  .vic-studio .spec .t{font-size:13.5px}
  .vic-studio .picker-col{grid-template-columns:1fr 1fr; gap:10px}
  .vic-studio .picker{padding:11px}
  .vic-studio .swatch-meta .c{font-size:10px}
  .vic-studio .swatch-meta .v{font-size:9px}
  .vic-studio .swatches{gap:5px}
  .vic-studio .swatch-chip{height:34px}
  .vic-studio .compare-foot .pill-body{font-size:11.5px; padding:0 10px}
  .vic-studio .scene-btn,.vic-studio .scene-btn:hover,.vic-studio .scene-btn:focus{font-size:11.5px; padding:0 9px}
  .vic-studio .compare .stage-missing{bottom:52px}
}
@media (max-width:560px){
  .vic-studio .picker-col{grid-template-columns:1fr}
  .vic-studio .swatch-meta .c{font-size:11px}
  .vic-studio .swatch-meta .v{font-size:9.5px}
  .vic-studio .swatch-chip{height:40px}
}
@media (max-width:430px){
  .vic-studio .need-grid{grid-template-columns:1fr}
  .vic-studio .spec-row{grid-template-columns:1fr}
  .vic-studio .view-tabs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .vic-studio *{transition:none !important; animation:none !important} }