/* v16: the red-and-yellow theme, the color switch, and transitions between pages and on buttons. */

/* ---------- red and yellow: lacquer red ground, mai-yellow lettering, warm paper ---------- */
html[data-theme="red"]{
  --deep:#7E1416; --deep2:#9A2520; --gold:#F5C842; --ochre:#D98E1F; --ochre-ink:#8F3F0C;
  --cream:#FFF4DE; --cream2:#F7E2BC; --ink:#2E1210; --ink-soft:#5E3426;
  --on:#FFF1D6; --on-soft:#F3CFA6;
}
html[data-theme="red"] .art-bg.color::after{background:linear-gradient(90deg,rgba(126,20,22,.94) 0%,rgba(126,20,22,.78) 45%,rgba(126,20,22,.15) 100%)}
html[data-theme="red"] .search{background:rgba(60,8,10,.6)}
@media (max-width:899px){html[data-theme="red"] .art-bg.color::after{background:linear-gradient(180deg,rgba(126,20,22,.55) 0%,rgba(126,20,22,.93) 55%)}}

/* the color switch: two swatches, the current one ringed */
.theme-switch{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px 6px 8px;border-radius:999px;border:1.5px solid rgba(232,184,106,.55);background:transparent;color:var(--on);font:600 14px 'Be Vietnam Pro',sans-serif;cursor:pointer;white-space:nowrap}
.theme-switch .sw{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px transparent;transition:box-shadow .3s}
.theme-switch .sw-teal{background:linear-gradient(135deg,#1F3A40 50%,#E8B86A 50%)}
.theme-switch .sw-red{background:linear-gradient(135deg,#7E1416 50%,#F5C842 50%)}
.theme-switch .tr{display:none}
html:not([data-theme="red"]) .theme-switch .sw-teal,html[data-theme="red"] .theme-switch .sw-red{box-shadow:0 0 0 2px var(--gold)}
html[data-theme="red"] .theme-switch .tl{display:none}
html[data-theme="red"] .theme-switch .tr{display:inline}
.menupanel .theme-switch{margin-top:12px;min-height:48px;font-size:16px}
@media (max-width:1180px){.util .theme-switch .tl,.util .theme-switch .tr{display:none !important}}

/* ---------- transitions between pages (Chrome, Edge, Safari 18+); other browsers just load normally ---------- */
@view-transition{navigation:auto}
.top{view-transition-name:site-header}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:kmOut .32s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:kmIn .55s cubic-bezier(.16,1,.3,1) both}
  @keyframes kmOut{to{opacity:0;transform:translateY(-14px)}}
  @keyframes kmIn{from{opacity:0;transform:translateY(22px)}}
  /* switching colors spreads out from the switch like ink */
  ::view-transition-new(km-theme){animation:none}
  html.km-recolor::view-transition-old(root){animation:none}
  html.km-recolor::view-transition-new(root){animation:kmInk .7s cubic-bezier(.16,1,.3,1) both}
  @keyframes kmInk{from{clip-path:circle(0 at var(--ink-x,90%) var(--ink-y,4%))}to{clip-path:circle(150vmax at var(--ink-x,90%) var(--ink-y,4%))}}

  /* buttons: a soft ripple where you tap, and a small press */
  .btn,.iconbtn,.theme-switch,.lang a{position:relative;overflow:hidden}
  .btn:active,.iconbtn:active,.theme-switch:active{transform:scale(.97)}
  .km-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:kmRipple .6s ease-out forwards}
  @keyframes kmRipple{to{transform:scale(1);opacity:0}}
  /* links and photos lift slightly when pointed at */
  .occ,.cat figure,.strip figure{transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .occ:hover,.cat figure:hover,.strip figure:hover{transform:translateY(-6px)}
}

/* prices: each photo's own price, with a quiet "this design" */
.cat .amt small{display:block;font-weight:500;font-size:14px;color:var(--ink-soft)}

/* keep the language pill whole next to the color switch */
.util .lang,.util .theme-switch{flex:none}
.util .lang a{white-space:nowrap}

/* ---------- price list: a small "see examples" button and its preview card ---------- */
.peek-btn{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:6px 14px 6px 10px;min-height:44px;border-radius:999px;border:1px solid currentColor;background:transparent;color:var(--ochre-ink);font:600 15px 'Be Vietnam Pro',sans-serif;cursor:pointer;opacity:.8;transition:opacity .2s,background .2s}
.peek-btn svg{width:15px;height:15px}
.peek-btn:hover,.peek-btn:focus-visible{opacity:1;background:rgba(196,135,58,.12)}
.deep .pr-row:not(.menucard *) .peek-btn{color:var(--gold)}
.pr-row>span:first-child{display:flex;flex-direction:column;align-items:flex-start}
.peek{margin:auto;width:min(560px,calc(100vw - 32px));padding:18px 18px 16px;border:0;border-radius:16px;background:#FBF5E8;color:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.peek::backdrop{background:rgba(20,10,8,.45)}
.peek-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.peek-head b{font-family:var(--disp);font-weight:800;font-size:28px;text-transform:uppercase;color:var(--deep)}
.peek-head button{width:40px;height:40px;border-radius:50%;border:1px solid #DCCBA6;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.peek-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.peek-grid a{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.peek-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:40% 40% 8px 8px / 18% 18% 8px 8px;margin-bottom:6px}
.peek-grid b{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--deep);line-height:1}
.peek-grid span{font-size:15px;font-weight:600;color:var(--ochre-ink)}
.peek-all{display:inline-block;margin-top:14px;font-weight:700;color:var(--deep)}
@media (prefers-reduced-motion:no-preference){
  .peek:popover-open{animation:peekIn .35s cubic-bezier(.16,1,.3,1)}
  @keyframes peekIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
}

/* ---------- hero: "this week's designs" circles swap the big photo ---------- */
.hero .arch{position:relative}
.hero .arch img{position:absolute;inset:0}
.thumbs .facts{flex-wrap:wrap;gap:4px 12px;white-space:nowrap}
.thumbs .facts small{font-size:15px;font-weight:500;opacity:.85;text-transform:none;letter-spacing:0}
.thumbs a{cursor:pointer}
.thumbs a[aria-current]{outline:2px solid var(--gold);outline-offset:3px;transform:translateY(-4px)}
/* caption on one line, the link always in the same place under it */
.hero .archcap{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.archcap span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.archcap a{color:var(--gold);font-weight:600;white-space:nowrap;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .hero .arch img:not(:last-child){filter:brightness(.75);transition:filter .7s}
  .anim .hero .arch img.hero-next{animation:doorway 1s var(--ease) both}
  .archcap.cap-in span{animation:capIn .6s .2s var(--ease) both}
  @keyframes capIn{from{opacity:0;transform:translateY(8px)}}
}
@media (max-width:899px){
  .thumbs ul{display:grid;grid-template-columns:repeat(5,minmax(0,64px));gap:12px}
  .thumbs a{width:100%;height:auto;aspect-ratio:1}
}

/* ---------- fixes from the full review (2026-10-31) ---------- */
/* the open phone menu sits above the language pill (the ripple rule gives .lang a its own layer) */
details.menu[open] .menupanel{z-index:70}
/* the photo viewer's close button stays in its corner */
.iconbtn.lb-close{position:absolute;overflow:visible}
/* catalog grids: equal cards everywhere, and a short last row sits in the middle instead of hanging left */
.cat{display:flex;flex-wrap:wrap;justify-content:center;column-gap:18px;row-gap:44px}
.cat>figure{flex:0 0 calc((100% - 18px) / 2);min-width:0}
@media (min-width:900px){.cat{column-gap:44px;row-gap:64px}.cat>figure{flex-basis:calc((100% - 88px) / 3)}}
/* "Hỏi về mẫu này" fits on one line in phone cards */
@media (max-width:899px){.cat .ask svg{display:none}.cat .ask{padding:8px 6px}}
/* headings don't leave one word alone on the last line */
h1,h2,h3{text-wrap:balance}
/* side ceramics beside the catalog sit higher and smaller, clear of the first row of photos */
@media (min-width:900px){.art-cut.tr{top:-6px;width:calc(var(--w,220px) * .7)}}

/* vacation notice: a quiet yellow strip above the header */
.notice{margin:0;padding:12px 20px;background:var(--gold);color:var(--deep);font:500 16px/1.5 'Be Vietnam Pro',sans-serif;text-align:center;text-wrap:balance}
.notice strong{display:block;font-weight:800;font-size:18px;margin-bottom:2px}