/*
  Page CSS on top of the taste-skill kit (public/assets), linked after it in app/layout.tsx so it wins.
  Only what the kit leaves to the page: the phone frame (.device), panel heights (--p-h), the skip link,
  and the hero's three phones. Every other size, colour and spacing comes from the kit's tokens.
*/

/* Vietnamese stacked tone marks need more leading than the kit's 1.02 to 1.1 on large headings. */
html[lang="vi"] :is(h1, h2) { line-height: 1.16; }

/* The skip link: the first child of the header's .wrap, 1px until focused (system.md). */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; z-index: 20; padding: var(--s-2) var(--s-4); background: var(--bg); border-radius: var(--r-sm); }

/* .device: a real app screenshot in a thin bezel. --w sets its width inside a .stage. */
.device { width: var(--w, 260px); padding: 6px; border-radius: 34px; background: var(--p-ink); box-shadow: 0 1px 0 1px color-mix(in oklab, var(--p-ink) 20%, transparent); }
.device > img { width: 100%; height: auto; border-radius: 28px; }
.stage > .device.at-rise { left: calc(50% - var(--w, 260px) / 2); top: var(--ay, 40px); }
@media (max-width: 639px) {
  .stage > .device.at-rise { left: calc(50% - var(--w, 260px) / 2); right: auto; width: var(--w, 260px); }
}

/* Hero (centred): three phones rise out of the lit frame; the middle one leads. */
.hero--centred .phones { display: flex; justify-content: center; align-items: flex-start; gap: var(--s-6); }
.hero--centred .phones > .device { --w: 248px; flex: none; }
.hero--centred .phones > .device:nth-child(2) { margin-top: calc(-1 * var(--s-4)); }
@media (max-width: 639px) {
  .hero--centred .phones > .device:not(:nth-child(2)) { display: none; }
  .hero--centred .phones > .device { --w: 220px; margin-top: 0; }
}

/* Phone widths per section (in CSS, not inline, so the media rules below can change them). */
.steps .device { --w: 232px; }
#nguoi-thue .device, #vai-tro .device, #khong-lam .device { --w: 300px; }

/* Panel heights per card group (cards.md: one --p-h a group). */
.steps .panel { --p-h: 336px; }
/* the split's frame: square, so the phone stands tall beside the text */
#nguoi-thue .frame, #vai-tro .frame, #khong-lam .frame { aspect-ratio: 1; }
.menu-card .panel .menu-shot { object-fit: cover; object-position: top; }

/* Plain fact lines under a split's text (split-text-left), on the left line. */
.facts { display: grid; gap: var(--s-2); }

/* Contact page: the form card on the split line; an error in the app's due red. */
.contact-card { padding: var(--s-6); align-self: start; }
.form-error { color: #c8102e; font-weight: 500; }

/* Feature lists on /chu-tro and /nguoi-thue: two columns, each item closed by the one hairline. */
.grid.feature-list { row-gap: 0; align-content: start; }
.feature-list > li { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.feature-list > li > h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.feature-list > li > p { margin-top: var(--s-1); max-width: 62ch; }

/* Footer (the kit's plain .footer, as tall as its content): brand, line and button left, three link columns right. */
.site-footer .site-footer__lead .t-lead { max-width: 34ch; }
.site-footer .footer__legal { margin-top: var(--s-8); }

/* Ốc, the mascot: beside the name in the bar (the name bold in the brand ink, as on the canvas), and perched
   on the hero window's top edge, out of the flow so the hero still fits its one screen. */
.nav__logo svg { height: 32px; }
.nav__logo .nav__name { font-weight: 700; color: #07553A; }
.hero__perch { position: relative; height: 0; z-index: 2; }
.hero__perch > svg { position: absolute; right: 9%; bottom: calc(-1 * var(--s-6) - 10px); }
@media (max-width: 639px) { .hero__perch > svg { right: 2%; width: 60px; height: auto; bottom: calc(-1 * var(--s-6) - 6px); } }

/* Sections size to their content. The kit makes every section exactly one or two screens, which left
   300-500px of empty ground under the short ones; the hero keeps its screen. */
main > :is(section, .section):not(.hero, .section--hero) { height: auto; min-height: 0; padding: var(--padt) 0 var(--padb); }
main > :is(section, .section):not(.hero, .section--hero) > .wrap { height: auto; }
main > :is(section, .section).g2m > .wrap { display: block; }
@media (max-width: 1279px) { main > :is(section, .section):not(.hero, .section--hero) { display: block; } }

/* A sub-page's split hero: the facts follow the button instead of sinking to the screen's foot; a bigger phone. */
@media (min-width: 1024px) { .hero-split > .hero-copy > .hero-facts { margin-top: var(--s-8); } }
.hero--split .hero-visual .device { --w: 300px; }

/* /ve-oc-oi: Ốc beside the title; the moods in their cards' panels; the team's round portraits (or initials). */
.about-oc { display: flex; align-items: center; justify-content: center; }
.about-oc > svg { width: 100%; max-width: 320px; height: auto; }
.oc-mood .panel { --p-h: 200px; display: flex; align-items: center; justify-content: center; }
.team__person { display: grid; gap: var(--s-2); align-content: start; }
.team__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #DCEFE4; color: #07553A; font-weight: 700; font-size: 28px; }

/* Feature groups (/chu-tro, /nguoi-thue): the heading and one app screen held in view on the left, the list on the right. */
.feature-group__aside { display: grid; gap: var(--s-6); align-content: start; }
@media (min-width: 1024px) { .feature-group__aside { position: sticky; top: calc(var(--nav) + var(--s-6)); } }
.feature-group__aside .device { --w: 260px; }
@media (max-width: 1023px) { .feature-group__aside .device { display: none; } }

/* Screens per width (layout-v4.md): the 3 phone cards and the FAQ take two screens where they stack or wrap. */
/* tablet: the three step cards stay one row of three, so the month fits one upright screen */
@media (min-width: 640px) and (max-width: 1023px) {
  .steps .grid > .card.span-4 { grid-column: auto / span 4; }
  .steps .panel { --p-h: 440px; }
  .steps .device { --w: 180px; }
}
@media (max-width: 639px) { .steps .panel { --p-h: 260px; } }
/* FAQ: two lists in the markup (two screens on a phone, .g2m); from 640 one column of questions beside the heading */
@media (min-width: 640px) {
  #cau-hoi .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gutter); align-content: start; }
  #cau-hoi .wrap > .grid { display: contents; }
  #cau-hoi .wrap > .grid > :not(.faq) { grid-row: 1 / span 2; }
  #cau-hoi .wrap > .grid + .grid > .faq { grid-row: 2; align-self: start; }
  #cau-hoi .wrap > .grid + .grid .faq__item:first-child { padding-top: var(--s-5); }
}

/* Tablet: the splits' square frames go 4:3 so the stacked split stays one upright screen; the footer's lead takes the row, its three columns share the next */
@media (min-width: 640px) and (max-width: 1023px) {
  #nguoi-thue .frame, #vai-tro .frame, #khong-lam .frame { aspect-ratio: 4 / 3; margin-top: var(--s-6); }
  .site-footer__lead { grid-column: 1 / -1; }
  .site-footer .footer__col { grid-column: auto / span 4; }
}
@media (max-width: 639px) {
  .site-footer .footer__col { grid-column: auto / span 6; }
  /* 4:3 on a phone (frame--split asks 1:1 through --ratio), so the stacked split stays one screen */
  #nguoi-thue .frame, #vai-tro .frame, #khong-lam .frame { margin-top: var(--s-6); aspect-ratio: 4 / 3; --ratio: 0px; }
  #nguoi-thue .device, #vai-tro .device, #khong-lam .device { --w: 220px; }
}

/* "Sắp có" next to a card title (home #loai-hinh). */
#loai-hinh h3 a { color: inherit; text-decoration: none; }
#loai-hinh h3 a:hover { text-decoration: underline; }

/* Cẩm nang: one readable column; the kit resets margins and list bullets, so long text gets them back here. */
.article { max-width: 68ch; }
.article > * + * { margin-top: var(--s-4); }
.article h2 { font-size: var(--t-h3); line-height: 1.25; margin-top: var(--s-8); }
.article h3 { font-size: var(--t-card); margin-top: var(--s-6); }
.article p, .article li { font-size: var(--t-body); line-height: 1.65; }
.article ul { list-style: disc; padding-left: 1.25em; }
.article ol { list-style: decimal; padding-left: 1.4em; }
.article li + li { margin-top: var(--s-2); }
.article a { color: var(--accent); }
.article .table { overflow-x: auto; }
.article table { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.article th, .article td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.article th { font-weight: 500; color: var(--muted); }
.article td.num, .article th.num { text-align: right; white-space: nowrap; }
.article .sources { font-size: var(--t-small); color: var(--muted); }
.article-meta { color: var(--muted); font-size: var(--t-small); }