@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --bg: var(--tuetran-secondary, #0E0E0D);
  --bg-2: var(--tuetran-bg-2, #1A1A18);
  --fg: var(--tuetran-fg, #EFEDE7);
  --fg-2: var(--tuetran-fg-2, #A8A59D);          
  --line: var(--tuetran-line, #34332F);
  --btn: var(--tuetran-primary, #EFEDE7);
  --on-btn: var(--tuetran-on-btn, #0E0E0D);
  --btn-hover: var(--tuetran-btn-hover, #FFFFFF);
  --lit: var(--tuetran-lit, #E8E5DD);           
  --on-lit: var(--tuetran-on-lit, #0E0E0D);
  --lit-2: var(--tuetran-lit-2, #4F4D47);         
  --lit-line: var(--tuetran-lit-line, #C4C0B5);
  --mat: var(--tuetran-mat, #F6F4EE);           
  --edge: rgba(255, 255, 255, .08);
  --shadow: rgba(0, 0, 0, .55);
  --shadow-soft: rgba(0, 0, 0, .18);
  --scrim: rgba(0, 0, 0, .6);
  --focus: var(--fg);
  
  --room-1: var(--tuetran-room-1, #0F3029);        
  --room-2: var(--tuetran-room-2, #3A1822);        
  --room-3: var(--tuetran-room-3, #2A2C14);        
  --room-4: var(--tuetran-room-4, #1D2523);        
  --room-5: var(--tuetran-room-5, #272036);        
  --room-6: var(--tuetran-room-6, #2D2116);        
  --font-text: var(--tuetran-font-family, "Archivo"), Arial, sans-serif;
  
  --fs-h3: var(--tuetran-h3-size, 26px);
  --fs-h4: var(--tuetran-h4-size, 18px);
  --fs-b: var(--tuetran-body-size, 16px);
  --gut: 48px;
  --d1: var(--tuetran-h1-size, 104px);
  --d2: var(--tuetran-h2-size, 72px);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: var(--tuetran-bg-light, #E7E5E0);            
  --bg-2: var(--tuetran-bg-2-light, #DAD7D0);
  --fg: var(--tuetran-fg-light, #151513);
  --fg-2: var(--tuetran-fg-2-light, #514F49);          
  --line: var(--tuetran-line-light, #C3C0B8);
  --btn: var(--tuetran-btn-light, #151513);
  --on-btn: var(--tuetran-on-btn-light, #F4F2EE);
  --btn-hover: var(--tuetran-btn-hover-light, #000000);
  --lit: var(--tuetran-lit-light, #161615);           
  --on-lit: var(--tuetran-on-lit-light, #EFEDE7);
  --lit-2: var(--tuetran-lit-2-light, #A8A59D);
  --lit-line: var(--tuetran-lit-line-light, #3A3935);
  --mat: var(--tuetran-mat-light, #FBFAF7);
  --edge: rgba(0, 0, 0, .1);
  --shadow: rgba(38, 33, 24, .26);
  --shadow-soft: rgba(38, 33, 24, .14);
  --scrim: rgba(21, 21, 19, .5);
  --focus: var(--fg);
  --room-1: var(--tuetran-room-1-light, #D3E3DC);
  --room-2: var(--tuetran-room-2-light, #E9D8D9);
  --room-3: var(--tuetran-room-3-light, #E2E0C6);
  --room-4: var(--tuetran-room-4-light, #D6DCDA);
  --room-5: var(--tuetran-room-5-light, #DDD7E7);
  --room-6: var(--tuetran-room-6-light, #E8DFD0);
  color-scheme: light;
}
@media (max-width: 1439px) { :root { --d1: clamp(calc(var(--tuetran-h1-size, 104px) * 72 / 104), 7.2vw, var(--tuetran-h1-size, 104px)); --d2: clamp(calc(var(--tuetran-h2-size, 72px) * 56 / 72), 5vw, var(--tuetran-h2-size, 72px)); } }
@media (max-width: 1099px) { :root { --gut: 32px; --d1: clamp(calc(var(--tuetran-h1-size, 104px) * 52 / 104), 8.4vw, calc(var(--tuetran-h1-size, 104px) * 70 / 104)); --d2: clamp(calc(var(--tuetran-h2-size, 72px) * 40 / 72), 6.2vw, calc(var(--tuetran-h2-size, 72px) * 52 / 72)); } }
@media (max-width: 699px)  { :root { --gut: 16px; --d1: clamp(calc(var(--tuetran-h1-size, 104px) * 32 / 104), 10.2vw, calc(var(--tuetran-h1-size, 104px) * 40 / 104)); --d2: clamp(calc(var(--tuetran-h2-size, 72px) * 28 / 72), 8.2vw, calc(var(--tuetran-h2-size, 72px) * 32 / 72)); } }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-text); font-size: var(--fs-b); line-height: 1.6; font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
.page { overflow-x: clip; min-height: 100vh; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; }
main > section { padding-inline: var(--gut); }
.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; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--fg); color: var(--bg); text-decoration: none; font-size: calc(var(--fs-b) * 14 / 16); }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }


.disp { font-stretch: 116%; font-weight: 300; line-height: 1.12; letter-spacing: -.025em; }
.d1 { font-size: var(--d1); }
.d2 { font-size: var(--d2); }
@media (max-width: 699px) { .disp { font-weight: 400; letter-spacing: -.02em; line-height: 1.14; } }
.lead { font-size: calc(var(--fs-b) * 17 / 16); line-height: 1.6; color: var(--fg-2); }
.kind { font-size: calc(var(--fs-b) * 13 / 16); color: var(--fg-2); }
.wall { font-size: calc(var(--fs-b) * 13 / 16); color: var(--fg-2); }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-underline-offset: 4px; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 699px) { .lead { font-size: calc(var(--fs-b) * 15 / 16); } }


.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-16 { width: 16px; height: 16px; }


.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  font-size: calc(var(--fs-b) * 15 / 16); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.btn-light { background: var(--btn); color: var(--on-btn); }
.btn-ghost { box-shadow: inset 0 0 0 1px var(--fg-2); color: var(--fg); }
.btn-dark { background: var(--on-lit); color: var(--lit); }
.btn-ghost-dark { box-shadow: inset 0 0 0 1px var(--on-lit); color: var(--on-lit); }
@media (hover: hover) {
  .btn-light:hover { background: var(--btn-hover); box-shadow: 0 0 0 4px var(--line); }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--fg); background: var(--bg-2); }
  .btn-dark:hover { box-shadow: 0 0 0 4px var(--lit-line); }
  .btn-ghost-dark:hover { box-shadow: inset 0 0 0 2px var(--on-lit); }
}


.hd {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 24px;
  min-height: 72px; padding: 12px var(--gut);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font-size: calc(var(--fs-b) * 15 / 16); font-weight: 600; font-stretch: 112%; white-space: nowrap; }
.brand picture { flex: none; line-height: 0; }
.brand img { height: 44px; width: auto; }

.mk-light { display: none; }
:root[data-theme="light"] .mk-light { display: block; }
:root[data-theme="light"] .mk-dark { display: none; }
.brand span span { font-weight: 300; color: var(--fg-2); }
.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; font-size: calc(var(--fs-b) * 14 / 16); }
.nav > a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; text-decoration: none; color: var(--fg-2); transition: color .2s; }
.nav > a:hover { color: var(--fg); }

@media (min-width: 1100px) { .nav > a { text-transform: uppercase; letter-spacing: .04em; font-size: calc(var(--fs-b) * 13 / 16); white-space: nowrap; } }

@media (min-width: 1100px) and (max-width: 1279px) { .hd { gap: 16px; } .nav { gap: 20px; } .hd-act { gap: 8px; } }
.lang { position: relative; display: inline-flex; align-items: center; border-radius: 999px; }
.lang::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; border-radius: 999px; font-size: calc(var(--fs-b) * 13 / 16); font-weight: 600; color: var(--fg-2); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--bg-2); color: var(--fg); }
.hd-act { display: flex; align-items: center; gap: 12px; }
.hd .btn { min-height: 44px; padding: 10px 20px; font-size: calc(var(--fs-b) * 14 / 16); }
.theme-t { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.theme-t .ic-sun, [data-theme="light"] .theme-t .ic-moon { display: none; }
[data-theme="light"] .theme-t .ic-sun { display: block; }
.nav-t { display: none; }
@media (max-width: 1099px) {
  .hd { flex-wrap: wrap; }
  .hd-act { margin-left: auto; }
  .nav-t { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; font-size: calc(var(--fs-b) * 14 / 16); }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gut) 24px; background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .nav-open .nav { display: flex; }
  .nav > a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: calc(var(--fs-b) * 17 / 16); color: var(--fg); }
  .nav .lang { align-self: flex-start; margin-top: 16px; }
  .nav-t .ic-x, .nav-open .nav-t .ic-m { display: none; }
  .nav-open .nav-t .ic-x { display: block; }
}
@media (max-width: 699px) {
  .hd { min-height: 64px; gap: 8px; padding-block: 10px; }
  .brand { gap: 10px; }
  .hd-act { gap: 4px; }
  .hd .btn { padding-inline: 12px; }
  .hd .btn .ic { display: none; }
  .brand img { height: 40px; }
  .nav-t span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 399px) { .hd .btn { padding-inline: 8px; } }  


.qc { display: none; }
.hd-c { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); }
@media (max-width: 699px) {
  .qc { display: flex; gap: 4px; }
  .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand { min-width: 44px; justify-content: center; }
}


:root { --tb: 63px; --fab-size: 52px; --fab-theme: var(--bg-2); --fab-theme-icon: var(--fg); --fab-theme-ring: var(--line); --fab-theme-ring-hover: var(--fg-2); --fab-theme-icon-hover: var(--fg); }
.tb { display: none; }
.page[data-fab-theme] .theme-t, .page[data-fab-contact] .qc { display: none; }
@media (max-width: 1099px) {
  .page[data-tabs] { padding-bottom: calc(var(--tb) + env(safe-area-inset-bottom)); --fab-edge-y: calc(var(--tb) + 15px + env(safe-area-inset-bottom)); }
  .page[data-tabs] .nav-t { display: none; }
  .page[data-tabs][data-order-tab] [data-k="header-order"] { display: none; }
  
  .page[data-tabs] .abar, .page[data-tabs] .abar.wide { border-top: 0; box-shadow: none; }
  .page[data-tabs] .nav { display: flex; position: static; flex-direction: row; align-items: center; padding: 0; margin-left: auto; background: none; border: 0; }
  .page[data-tabs] .nav > a { display: none; }
  .page[data-tabs] .nav .lang { align-self: center; margin-top: 0; }
  .page[data-tabs] .hd-act { margin-left: 0; }
  .tb {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: stretch;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line);
  }
  .tb-i { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 46px; text-decoration: none; color: var(--fg-2); }
  .tb-i .ic { width: 24px; height: 24px; stroke-width: 1.5; }
  .tb-i span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--fs-b) * 13.5 / 16); line-height: 18px; font-weight: 500; white-space: nowrap; }
  .tb-i:hover, .tb-i:focus-visible, .tb-i[aria-current] { color: var(--fg); }
}


.ft {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px;
  padding: 48px var(--gut) 32px; border-top: 1px solid var(--line); font-size: calc(var(--fs-b) * 14 / 16); color: var(--fg-2);
}
.ft-brand { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ft-id { display: flex; align-items: center; gap: 12px; }

.ft-id img { height: 36px; width: auto; flex: none; }
@media (max-width: 699px) { .ft-id img { height: 32px; } }
.ft-id span { font-size: calc(var(--fs-b) * 15 / 16); font-weight: 300; font-stretch: 112%; color: var(--fg-2); }
.ft-col { display: flex; flex-direction: column; }
.ft-col p { margin-bottom: 4px; font-size: calc(var(--fs-b) * 13 / 16); color: var(--fg-2); }
.ft-col a + p { margin-top: 16px; }
.ft-c1 { grid-column: 5 / 7; }
.ft-c2 { grid-column: 7 / 10; }
.ft-c3 { grid-column: 10 / 13; }
.ft-col a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--fg); overflow-wrap: anywhere; }
.ft-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft-copy { grid-column: 1 / 13; padding-top: 24px; font-size: calc(var(--fs-b) * 13 / 16); }
@media (max-width: 1099px) {
  .ft-brand { grid-column: 1 / 13; }
  .ft-c1, .ft-c2, .ft-c3 { grid-column: span 4; }
}
@media (max-width: 699px) {
  .ft { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .ft-brand, .ft-copy, .ft-c2 { grid-column: 1 / 3; }
  .ft-c1, .ft-c3 { grid-column: span 1; }
  .ft-c3 { grid-column: 1 / 3; }
}


.nojs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; padding: 12px var(--gut); border-bottom: 1px solid var(--line); font-size: calc(var(--fs-b) * 15 / 16); }
.nojs-bar a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.nojs-bar img { display: block; height: 24px; width: auto; }
.nojs-bar a > span { margin-left: 8px; font-weight: 300; color: var(--fg-2); }


.stage { --g: 16px; display: flex; align-items: flex-start; gap: var(--g); }
.ly { flex: 0 0 calc((100% - var(--g)) * .7761); min-width: 0; border-radius: 8px; overflow: hidden; background: var(--bg-2); box-shadow: 0 24px 48px var(--shadow-soft), 0 0 0 1px var(--edge); }
.ly img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.ly.ph { flex-basis: calc((100% - var(--g)) * .2239); border-radius: 16px; }
.ly.ph img { aspect-ratio: 600 / 1300; object-position: 50% 0; }

.stage.row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stage.row .ly.ph { flex: none; }
html:not(.js) img[data-dark-src] { display: none; }  
@media (max-width: 699px) {
  .stage { --g: 12px; flex-direction: column; align-items: stretch; }
  .ly, .ly.ph { flex: none; width: 100%; }
  .ly.ph { width: 50%; border-radius: 14px; }
  
  .stage:has(> .ly.ph):has(> .ly:not(.ph)) { flex-direction: row; align-items: flex-start; }
  .stage:has(> .ly.ph):has(> .ly:not(.ph)) > .ly { flex: 0 0 calc((100% - var(--g)) * .7761); width: auto; }
  .stage:has(> .ly.ph):has(> .ly:not(.ph)) > .ly.ph { flex-basis: calc((100% - var(--g)) * .2239); border-radius: 12px; }
  .stage.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stage.row .ly.ph { width: auto; border-radius: 10px; }
}


.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.tablist [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: calc(var(--fs-b) * 15 / 16); font-weight: 600; color: var(--fg-2); }
.tablist [role="tab"][aria-selected="true"] { background: var(--btn); color: var(--on-btn); box-shadow: none; }
@media (max-width: 699px) { .tablist { margin-bottom: 24px; } }


[hidden] { display: none !important; }

html:not(.js) [data-when]:not([data-when~="default"]) { display: none !important; }

.panel { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.panel + .panel { margin-top: 48px; }
.js .panel + .panel { margin-top: 0; }
.scr { display: flex; flex-direction: column; gap: 12px; }
.frame { padding: 4%; background: var(--mat); box-shadow: 0 24px 48px var(--shadow-soft), 0 0 0 1px var(--line); }
.frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }

.frame-in { --run: 10s; position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; container-type: size; cursor: zoom-in; }
.frame-in img { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100cqh; aspect-ratio: auto; object-fit: cover; object-position: 50% 0; transition: transform 1.2s ease-out; }
.motion .frame-in.is-run img { transform: translateY(min(0px, calc(100cqh - 100%))); transition: transform var(--run) linear; }
@media (hover: hover) {
  .motion .frame-in:hover img, .motion .frame-in:focus-visible img { transform: translateY(min(0px, calc(100cqh - 100%))); transition: transform var(--run) linear; }
}

.panel-phone { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ph-frame { border-radius: 20px; overflow: hidden; background: var(--bg-2); box-shadow: 0 24px 48px var(--shadow), 0 0 0 1px var(--line); }
.ph-frame img { width: 100%; aspect-ratio: 600 / 1300; object-fit: cover; }
@media (max-width: 699px) {
  .panel { grid-template-columns: 1fr; gap: 24px; }
  .panel-phone { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ph-frame { border-radius: 14px; }
}

[data-filtered-out] { display: none !important; }

.price { font-size: calc(var(--fs-b) * 15 / 16); }
.pf { margin-right: 6px; }  
.price strong { font-size: var(--fs-h3); font-weight: 400; font-stretch: 112%; letter-spacing: -.01em; }


.phead { padding-top: 24px; padding-bottom: 48px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 16px; font-size: calc(var(--fs-b) * 14 / 16); color: var(--fg-2); }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--fg-2); text-underline-offset: 4px; }
.crumbs a:hover { color: var(--fg); }
.phead .lead { margin-top: 16px; }
.sec { padding-top: 48px; padding-bottom: 48px; }
.sec-h { margin-bottom: 32px; }
.sec-h .lead { margin-top: 12px; }


.cf-art {
  --sk: rgba(255, 255, 255, .09); --sk-2: rgba(255, 255, 255, .14);
  position: relative; width: 100%; aspect-ratio: 1200 / 672; container-type: inline-size;
}
[data-theme="light"] .cf-art { --sk: rgba(0, 0, 0, .07); --sk-2: rgba(0, 0, 0, .11); }
.cf-art i { display: block; }
.sk { position: relative; overflow: hidden; border-radius: 99px; background: var(--sk); }
.motion .sk { animation: cf-pulse 1.9s ease-in-out infinite; }
@keyframes cf-pulse { 50% { opacity: .5; } }
.cf-web { position: absolute; left: 0; top: 0; width: 75cqw; }
.cf-web > .cf-screen { height: 45.6cqw; padding: 3cqw; border-radius: 1cqw; background: var(--bg); box-shadow: 0 0 0 1cqw var(--bg-2), 0 0 0 calc(1cqw + 1px) var(--line); }
.cf-neck { width: 6cqw; height: 4.4cqw; margin: 1cqw auto 0; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line); }
.cf-foot { width: 18cqw; height: 1.2cqw; margin: 0 auto; border-radius: 99px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line); }
.cf-bar { display: flex; align-items: center; gap: 1.8cqw; height: 3cqw; }
.cf-logo { width: 7cqw; height: 2.2cqw; }
.cf-nav { width: 5cqw; height: 1.1cqw; }
.cf-btn { width: 6.4cqw; height: 2.4cqw; margin-left: auto; }
.cf-hero { display: grid; grid-template-columns: minmax(0, 1fr) 31cqw; gap: 3cqw; height: 20cqw; margin-top: 3cqw; }
.cf-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqw; padding-top: 2cqw; }
.cf-h { width: 25cqw; height: 3cqw; }
.cf-h.cf-s { width: 17cqw; margin-bottom: 1cqw; }
.cf-p { width: 26cqw; height: 1.2cqw; }
.cf-p.cf-s { width: 19cqw; }
.cf-cta { width: 9cqw; height: 3cqw; margin-top: 1.4cqw; background: var(--sk-2); }
.cf-img { height: 100%; border-radius: 2cqw; background: var(--sk-2); }
.cf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; margin-top: 3cqw; }
.cf-cards .sk { height: 6cqw; border-radius: 1.2cqw; }
.cf-app { position: absolute; right: 0; top: 3cqw; width: 20cqw; }
.cf-app > .cf-screen { position: relative; display: flex; flex-direction: column; gap: 1.2cqw; height: 42.2cqw; padding: 4cqw 1.6cqw 1.6cqw; border-radius: 2.6cqw; background: var(--bg); box-shadow: 0 0 0 .8cqw var(--bg-2), 0 0 0 calc(.8cqw + 1px) var(--line); }
.cf-notch { position: absolute; left: 50%; top: 1.3cqw; width: 5cqw; height: 1cqw; margin-left: -2.5cqw; border-radius: 99px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line); }
.cf-top { display: flex; align-items: center; gap: 1cqw; }
.cf-find { flex: 1; height: 2cqw; }
.cf-dot { width: 2cqw; height: 2cqw; }
.cf-banner { height: 8cqw; border-radius: 1.2cqw; background: var(--sk-2); }
.cf-kinds { display: flex; justify-content: space-between; }
.cf-kinds .sk { width: 3cqw; height: 3cqw; }
.cf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2cqw; }
.cf-grid .sk { height: 7cqw; border-radius: 1cqw; }
.cf-tabs { display: flex; justify-content: space-between; margin-top: auto; padding: 0 1.2cqw; }
.cf-tabs .sk { width: 2cqw; height: 2cqw; }

.cf-solo { aspect-ratio: 4 / 3; }
.cf-solo .cf-web { left: 7.5cqw; top: 9cqw; transform: scale(1.1333); transform-origin: 0 0; }

.cf-art + figcaption { text-align: center; }


:root { --tx: 5; --pr: 48px; --col: calc((100vw - 2 * var(--gut) - 11 * 24px) / 12); }
.rd { width: min(100%, calc((var(--tx) * var(--col) + (var(--tx) - 1) * 24px - var(--pr)) * var(--f, 1))); }
@media (min-width: 1500px) { :root { --tx: 4; } }               
@media (min-width: 1800px) { :root { --tx: 3; } }
@media (max-width: 1199px) { :root { --tx: 6; } }               
@media (max-width: 1099px) { :root { --pr: 0px; } }
@media (max-width: 899px)  { :root { --tx: 7; } }
@media (max-width: 699px)  { :root { --tx: 8; } }
@media (max-width: 519px)  { :root { --tx: 12; } .rd { width: 100%; } }   


.ct { grid-column: 1 / 4; position: sticky; top: 96px; }
.ct-b { display: none; }
.ct-k { margin-bottom: 12px; }
.ct-n { max-height: calc(100vh - 144px); overflow-y: auto; }
.ct-l { border-bottom: 1px solid var(--line); }
.ct-a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line); font-size: calc(var(--fs-b) * 15 / 16); line-height: 1.35; text-decoration: none; color: var(--fg-2); }
.ct-a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.ct-a[aria-current="location"] { color: var(--fg); }
.ct-a[aria-current="location"]::before { background: var(--fg); }
@media (hover: hover) { .ct-a:hover { color: var(--fg); } }
@media (max-width: 1099px) {
  .ct { position: static; margin-bottom: 32px; }
  .ct-b { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: calc(var(--fs-b) * 15 / 16); font-weight: 600; }
  .ct-c { margin-left: 6px; transition: transform .25s; }
  .ct.open .ct-c { transform: rotate(180deg); }
  html:not(.js) .ct-b { display: none; }
  .js .ct-k, .js .ct-n { display: none; }
  .js .ct.open .ct-n { display: block; margin-top: 8px; }
  .ct-n { max-height: none; }
  .ct-l { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
}
@media (max-width: 699px) {
  .ct { margin-bottom: 24px; }
  .ct-b { display: flex; width: 100%; }
  html:not(.js) .ct-b { display: none; }
  .ct-c { margin-left: auto; }
  .ct-l { grid-template-columns: 1fr; }
}


.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: calc(var(--fs-b) * 14 / 16); color: var(--fg); }
button.chip { min-height: 44px; padding: 8px 18px; font-weight: 600; }
button.chip[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); box-shadow: none; }
a.chip { min-height: 44px; padding: 8px 18px; font-weight: 600; text-decoration: none; }
a.chip[aria-current="true"] { background: var(--btn); color: var(--on-btn); box-shadow: none; }
.chip .n { font-weight: 400; font-variant-numeric: tabular-nums; }


.empty-box {
  display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 24px;
  background: var(--bg-2); box-shadow: inset 0 0 0 12px var(--bg), inset 0 0 0 13px var(--fg-2), 0 0 0 1px var(--line);
  font-size: calc(var(--fs-b) * 15 / 16); color: var(--fg-2); text-align: center;
}


.abar { display: none; }
.ab-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: calc(var(--fs-b) * 13 / 16); line-height: 1.35; color: var(--fg-2); }
.ab-sum strong { font-size: calc(var(--fs-b) * 17 / 16); font-weight: 600; font-stretch: 112%; color: var(--fg); white-space: nowrap; }
.abar .btn { flex: none; min-height: 48px; padding-inline: 18px; }
@media (max-width: 699px) {
  .abar {
    display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; align-items: center; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--bg);
    border-top: 1px solid var(--line); box-shadow: 0 -12px 32px var(--shadow-soft);
  }
  .page[data-bar] { padding-bottom: 96px; }
}
@media (max-width: 1099px) {
  .abar.wide {
    display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; align-items: center; gap: 8px;
    padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom)); background: var(--bg);
    border-top: 1px solid var(--line); box-shadow: 0 -12px 32px var(--shadow-soft);
  }
  .page[data-bar="wide"] { padding-bottom: 96px; }
}


.motion [data-reveal] {
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s);
}
.motion [data-reveal="up"]:not(.in) { opacity: 0; transform: translateY(40px); }
.motion [data-reveal="fade"]:not(.in) { opacity: 0; }
.still *, .still *::before, .still *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }

.sel { position: relative; }
.sel select { width: 100%; min-height: 48px; padding: 12px 44px 12px 16px; border: 0; border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: var(--fs-b); box-shadow: inset 0 0 0 1px var(--line); -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.sel select:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--fg); }
.sel select:disabled { cursor: default; opacity: .6; }
.sel .ic { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); pointer-events: none; color: var(--fg-2); }

.sel.on select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; pointer-events: none; }
.sel-b { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 12px 44px 12px 16px; border: 0; border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: var(--fs-b); line-height: 1.4; text-align: left; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.sel-b:hover { box-shadow: inset 0 0 0 1px var(--fg-2); }
.sel-b:focus-visible, .sel-b[aria-expanded="true"] { outline: 0; box-shadow: inset 0 0 0 2px var(--fg); }
.sel-b:disabled { cursor: default; opacity: .6; }
.sel-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel.on .ic { transition: transform .2s; }
.sel-b[aria-expanded="true"] ~ .ic { transform: translateY(-50%) rotate(180deg); }
.sel-scrim { position: fixed; inset: 0; z-index: 10000; background: var(--scrim); }

.sel-tray.sel-tray-in { position: fixed; }
.sel-tray { position: absolute; z-index: 10001; display: flex; flex-direction: column; border-radius: 8px; background: var(--bg); color: var(--fg); font-size: var(--fs-b); box-shadow: 0 16px 32px var(--shadow), 0 0 0 1px var(--line); }
.sel-head { display: none; }
.sel-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; max-height: min(360px, 60vh); padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.sel-o { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 16px; border-radius: 8px; line-height: 1.35; cursor: pointer; }
.sel-ol { min-width: 0; flex: 1; }
.sel-o .ic { flex: none; color: var(--fg); }
@media (hover: hover) { .sel-o:not([aria-disabled="true"]):hover { background: var(--bg-2); } }
.sel-o:focus-visible { outline: 0; background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--fg); }
.sel-o[aria-selected="true"] { font-weight: 600; }
.sel-o[aria-disabled="true"] { color: var(--fg-2); opacity: .55; cursor: not-allowed; }
.sel-g { padding: 12px 12px 4px; font-size: calc(var(--fs-b) * 13 / 16); color: var(--fg-2); }
.fsel { display: flex; align-items: center; gap: 12px; }
.fsel .sel { min-width: 280px; }
.fsel .btn { min-height: 44px; }
@media (max-width: 699px) {
  .sel-tray { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 80vh; padding-bottom: env(safe-area-inset-bottom, 0px); border-radius: 16px 16px 0 0; box-shadow: 0 -16px 48px var(--shadow), 0 0 0 1px var(--line); }
  @supports (height: 100svh) { .sel-tray { max-height: 80svh; } }
  .sel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px 4px 20px; border-bottom: 1px solid var(--line); }
  .sel-t { font-size: calc(var(--fs-b) * 17 / 16); font-weight: 600; font-stretch: 112%; line-height: 1.35; }
  .sel-x { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; }
  .sel-x:hover, .sel-x:focus-visible { outline: 0; background: var(--bg-2); }
  .sel-list { max-height: none; padding: 8px 8px 12px; }
  .sel-o { font-size: calc(var(--fs-b) * 15 / 16); }
  .filters { gap: 8px; margin-bottom: 24px; padding-bottom: 16px; }
  .fsel { width: 100%; }
  .fsel .sel { flex: 1; min-width: 0; }
}


.phead-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
.phead-row > .crumbs, .phead-row > nav { grid-column: 1; }
.phead-row > h1, .phead-row > .lead { grid-column: 1; }
.phead-row > .lead { align-self: start; }
.phead-row > .filters { grid-column: 2; grid-row: 3; align-self: start; margin: 16px 0 0; padding: 0; border: 0; width: 328px; max-width: 100%; }
.phead-row .fsel, .phead-row .sel { width: 100%; }
@media (max-width: 1099px) {
  .phead-row { display: block; }
  .phead-row > .filters { margin-top: 24px; width: 328px; }
}
@media (max-width: 699px) { .phead-row > .filters { width: 100%; } }

.phead-two > .filters { display: flex; gap: 24px; width: auto; }
.phead-two .fsel { flex: none; width: 328px; }
@media (max-width: 1279px) {
  .phead-two { display: block; }
  .phead-two > .filters { margin-top: 24px; }
}
@media (max-width: 699px) {
  .phead-two > .filters { flex-direction: column; gap: 12px; width: 100%; }
  .phead-two .fsel { width: 100%; }
}


.p-empty, .fe { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--fg-2); font-size: calc(var(--fs-b) * 17 / 16); text-align: center; }
.fe { grid-column: 1 / -1; }
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.pg-b { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font-size: calc(var(--fs-b) * 15 / 16); font-weight: 600; text-decoration: none; color: var(--fg); }
.pg-b[aria-current="page"] { background: var(--btn); color: var(--on-btn); box-shadow: none; }
.pg-b[aria-disabled="true"] { opacity: .4; pointer-events: none; }
@media (hover: hover) { .pg-b:not([aria-current]):hover { box-shadow: inset 0 0 0 1px var(--fg); } }
@media (max-width: 699px) { .pager { margin-top: 40px; } }


.lb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--fg); }
.lb[open] { display: flex; flex-direction: column; animation: lb-in .25s ease-out; }
.lb::backdrop { background: rgba(0, 0, 0, .8); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gut); border-bottom: 1px solid var(--line); }
.lb-n { font-size: calc(var(--fs-b) * 15 / 16); font-variant-numeric: tabular-nums; }
.lb-act { display: flex; gap: 8px; }
.lb-b { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); text-decoration: none; }
@media (hover: hover) { .lb-b:hover { box-shadow: inset 0 0 0 1px var(--fg); } }
.lb-s { flex: 1; min-height: 0; display: flex; align-items: center; gap: 16px; padding: 16px var(--gut); }
.lb-f { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.lb-f img { width: auto; height: auto; max-width: 100%; max-height: calc(100% - 40px); min-height: 0; object-fit: contain; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.lb-f figcaption { font-size: calc(var(--fs-b) * 14 / 16); color: var(--fg-2); text-align: center; }
@media (max-width: 699px) {
  .lb-s { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
  .lb-f { grid-column: 1 / 3; grid-row: 1; }
  .lb-p { grid-row: 2; justify-self: start; }
  .lb-x { grid-row: 2; justify-self: end; }
}

.lb[data-tall] .lb-f { justify-content: flex-start; overflow-y: auto; gap: 0; }
.lb[data-tall] .lb-f img { flex: none; width: 100%; max-width: 1440px; height: auto; max-height: none; aspect-ratio: auto; }
.lb[data-tall] .lb-f figcaption { position: sticky; bottom: 0; align-self: stretch; padding: 8px 0; background: var(--bg); }