/* D14, D126, D127: colours come from logo.png. The sky blue of the hexagon is the main accent; the
   yellow-orange of the cross marks action and attention points, the way the cross sits on the hexagon. */
:root {
  /* D132: the lighter aqua of the logo's two blues (the deeper one is #0bbcf6). Navy text on it is about 9:1. */
  --lime: #66e8f9;
  --lime-deep: #3ed8f3;
  --lime-soft: #e4fbfe;
  --navy: #0b3a66;
  --navy-2: #13568f;
  --forest: #0a3d62;
  --forest-2: #135a8c;
  --forest-deep: #062a45;
  --sun: #fdc70c;
  --sun-deep: #f9a715;
  /* D128: the sample's mint page heads become a soft logo yellow. */
  --mint: #fff1bf;
}

/* The mark is the real logo image, so the coloured tile behind the old cross icon goes. */
.logo-mark,
.foot-brand .logo-mark { background: none; border-radius: 0; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Focus rings and glows the sample hard-codes in its own green, re-tinted to the logo blue (14, 182, 247). */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { box-shadow: rgba(14, 182, 247, 0.45) 0px 0px 0px 4px; }
.search-field:focus-within { box-shadow: rgba(14, 182, 247, 0.4) 0px 0px 0px 4px; }
.summary .input:focus-visible { box-shadow: rgba(14, 182, 247, 0.25) 0px 0px 0px 4px; }
.promo-ok { background: rgba(14, 182, 247, 0.14); }

/* D127: yellow takes the action and attention points. Text on it is navy (about 7.5:1); on dark panels it is the accent colour. */
.badge-count, .fcount { background: var(--sun); color: var(--navy); }
/* D131: the footer wordmark uses the real logo, not the cross; a soft shadow lifts it off the blue band, and
   phones get a smaller wordmark since the logo is wider than the cross was. */
.foot-cross { width: 0.78em; height: 0.78em; object-fit: contain; margin-right: 0.08em; filter: drop-shadow(0 4px 10px rgba(11, 58, 102, 0.35)); }
@media (max-width: 480px) { .foot-word { font-size: 50px; } }
.mcard-chip { background: linear-gradient(135deg, var(--sun), var(--sun-deep)); }
.success .tick, .done-card .tick, .steps .done .st-dot, .done-steps .done .st-dot,
.drop.has-file .drop-ic, .field.has-file .drop-ic, .disc.tone-forest,
.toast .i, .toast a, .toast button, .mcard-brand .i, .sum-notes .i, .news-ok, .foot-col a:hover { color: var(--sun); }
.footer :focus-visible, .on-dark :focus-visible, .summary :focus-visible { outline-color: var(--sun); }

/* D128: the big home and membership panels are yellow; the blue stays on the nav, tiles and footer band. */
.hero-frame, .mem-hero { background: var(--sun); }

/* D129, D130: buttons are clear iOS-style liquid glass with no colour fill: a faint white body, a top sheen,
   a bright inner rim, a hairline edge so they still read on white, and a backdrop blur. Text is navy, or white
   on the dark footer and cart summary. Hover lifts with a springy overshoot, press squishes. */
.btn, .svc-pill, .icon-btn, .add, .chip, .afchip,
.nav a[aria-current="page"], .mnav a[aria-current="page"], .nav-dd-btn[aria-current] {
  --glass-fill: rgba(255, 255, 255, 0.28);
  --glass-fill-hover: rgba(255, 255, 255, 0.5);
  --glass-edge: rgba(11, 58, 102, 0.14);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.2) 100%);
  --glass-rim: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  --glass-drop: 0 8px 20px -10px rgba(11, 58, 102, 0.35);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  background-color: var(--glass-fill);
  background-image: var(--glass-sheen);
  border-color: transparent;
  color: var(--navy);
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), var(--glass-drop);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  transition: transform 420ms var(--spring), background-color 220ms ease, box-shadow 260ms ease, color 220ms ease, opacity 220ms ease;
}
.svc-pill { border: 1px solid transparent; }

/* Dark panels: same glass, white text and a light edge. */
.on-dark .btn, .on-dark .icon-btn, .summary .btn, .summary .icon-btn, .summary .chip {
  --glass-fill: rgba(255, 255, 255, 0.1);
  --glass-fill-hover: rgba(255, 255, 255, 0.2);
  --glass-edge: rgba(255, 255, 255, 0.28);
  --glass-rim: inset 0 1px 1px rgba(255, 255, 255, 0.55), inset 0 -1px 1px rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  --glass-drop: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  color: #fff;
}

/* The sample sets the whole background (and white text) on these states; they become glass too. */
.btn:hover, .svc-pill:hover, .icon-btn:hover, .add:hover, .chip:hover, .afchip:hover,
.g-nav .icon-btn, .social .icon-btn, .social .icon-btn:hover, .add.is-done, .btn.is-done {
  background-color: var(--glass-fill-hover);
  background-image: var(--glass-sheen);
  border-color: transparent;
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), 0 14px 26px -12px rgba(11, 58, 102, 0.45);
}
.add:hover, .add.is-done, .btn.is-done { color: var(--navy); }
.on-dark .icon-btn:hover, .social .icon-btn, .social .icon-btn:hover { color: #fff; }

/* Selected states (current nav item, active filter chip) read as a denser bubble with a navy edge. */
.nav a[aria-current="page"], .mnav a[aria-current="page"], .nav-dd-btn[aria-current],
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip.is-active {
  background-color: rgba(255, 255, 255, 0.78);
  background-image: var(--glass-sheen);
  color: var(--navy);
  font-weight: 650;
  box-shadow: var(--glass-rim), 0 0 0 1.5px rgba(11, 58, 102, 0.45), var(--glass-drop);
}

@media (hover: hover) {
  .btn:hover, .svc-pill:hover, .icon-btn:hover, .add:hover, .chip:hover, .afchip:hover { transform: translateY(-2px) scale(1.03); }
}
.btn:active, .svc-pill:active, .icon-btn:active, .add:active, .chip:active, .afchip:active {
  transform: scale(0.94);
  transition-duration: 120ms;
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), 0 3px 8px -4px rgba(11, 58, 102, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .svc-pill:hover, .icon-btn:hover, .add:hover, .chip:hover, .afchip:hover,
  .btn:active, .svc-pill:active, .icon-btn:active, .add:active, .chip:active, .afchip:active { transform: none; }
}

/* D133: the header delivery popover is information, not a picker. */
.loc-info { width: 320px; }
.loc-info ul { list-style: none; margin: 0; padding: 0 10px; display: grid; gap: 12px; }
.loc-info li { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.loc-info li strong { color: var(--navy); font-weight: 650; font-size: 14.5px; }
.loc-more { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 12px 10px 6px; border-top: 1px solid var(--line); color: var(--navy); font-weight: 600; font-size: 14px; }
.loc-more:hover { text-decoration: underline; }

/* D134: the about page map is the real Google Maps embed, filling the old drawn map tile. */
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* D137: an empty state that sits under the page h1 uses an h2, sized like the sample's h3. */
.empty h2 { font-size: 24px; }

/* D135: "Từ điển" in the menu is a button that opens its three dictionaries; it looks like the links beside it. */
.nav-dd { position: relative; }
.nav-dd-btn { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 10px 0 14px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 550; color: var(--muted); transition: color var(--t-ui) ease, background-color var(--t-ui) ease; }
.nav-dd-btn:hover { color: var(--navy); background: var(--panel); }
.nav-dd-btn .i-chev { width: 14px; height: 14px; transition: transform var(--t-ui) var(--ease-out); }
.nav-dd-btn[aria-expanded="true"] .i-chev { transform: rotate(180deg); }
.nav .nav-pop { width: 230px; padding: 6px; display: grid; gap: 2px; }
.nav .nav-pop a { display: flex; height: auto; padding: 10px 12px; border-radius: 12px; color: var(--navy); }
.nav .nav-pop a:hover { background: var(--panel); }
@media (max-width: 1240px) { .nav-dd-btn { padding: 0 8px 0 11px; } }
/* Nine menu items still fit on one line down to 901px, where the sample hides the row. */
@media (max-width: 1100px) { .nav a { padding: 0 7px; } .nav-dd-btn { padding: 0 5px 0 7px; } }

/* D135: dictionary overview cards, kind tabs, the A–Z bar and the entry list. */
.dict-kinds { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dict-kind { display: grid; align-content: start; gap: 10px; height: 100%; padding: 28px; border-radius: var(--r-hero); color: var(--navy); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.dict-kind .em-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.6); color: var(--forest); }
.dict-kind h2 { font-size: 24px; margin: 6px 0 0; }
.dict-kind p { margin: 0; color: var(--muted); line-height: 1.5; }
.dict-kind-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 650; }
@media (hover: hover) { .dict-kind:hover { transform: translateY(-3px); } }
/* width: 0 on the input stops its default size from widening the header column on a phone. */
.dict-search { width: 100%; margin-top: 22px; padding-right: 6px; }
.dict-search input { width: 0; }
.dict-search .btn { flex: 0 0 auto; }
.dict-tabs, .dict-az { display: flex; flex-wrap: wrap; gap: 8px; }
.dict-tabs { margin-top: 26px; }
.dict-az { margin-top: 14px; }
.dict-az .chip { justify-content: center; min-width: 40px; min-height: 38px; padding: 0 10px; font-size: 14px; }
.dict-az .chip.is-empty { opacity: 0.38; box-shadow: none; background: transparent; }
.dict-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 30px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dict-head h2 { font-size: 22px; margin: 0; }
.dict-head span { color: var(--soft); font-size: 14px; }
.dict-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.dict-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--navy); font-weight: 550; }
.dict-list a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.dict-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: var(--r-pill); background: var(--panel); color: var(--soft); font-size: 12px; font-weight: 550; }
.dict-empty { margin-top: 20px; }
.dict-entry ul, .dict-entry ol { color: var(--muted); font-size: 16.5px; line-height: 1.7; padding-left: 1.3em; }
.dict-entry ul { list-style: disc; }
.dict-entry ol { list-style: decimal; }
.dict-entry li + li { margin-top: 6px; }
.dict-entry a:not(.btn), .dict-stub a:not(.btn) { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.dict-refs { overflow-wrap: anywhere; }
.dict-refs span { color: var(--soft); font-size: 14px; }
.dict-figure { margin: 20px 0 24px; }
.dict-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--line, #eef0f3); }
.dict-figure figcaption { margin-top: 8px; color: var(--soft); font-size: 14px; line-height: 1.5; }
.dict-ai { white-space: nowrap; font-weight: 600; }
.dict-ask { margin-top: 14px; }
.dict-stub { display: grid; justify-items: start; gap: 14px; max-width: 68ch; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.dict-stub p { margin: 0; color: var(--muted); line-height: 1.7; }
.dict-stub .dict-badge { font-size: 13px; }
@media (max-width: 900px) {
  .dict-kinds { grid-template-columns: 1fr; }
  .dict-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dict-list { grid-template-columns: 1fr; }
  .dict-tabs { flex-wrap: nowrap; overflow-x: auto; }
}