/* ==========================================================================
   Công Viên Cá Voi — components
   Ported verbatim from the prototype; only the class prefix changed (cvc- ->
   mona-) per .claude/rules/prototype-fidelity.md. The MONA starter's own
   component blocks were REMOVED rather than merged: ten names collided
   (btn, container, header, footer, hero, page-header, pagination, breadcrumb,
   eyebrow, skip-link) and merging would have blended two different designs.
   ========================================================================== */

/* ==========================================================================
   Công Viên Cá Voi — Whale Park Đà Nẵng
   Design prototype stylesheet — source/template/assets/css/style.css

   Palette grounded in the brand's real logo (teal whale + wave mark) and
   on-site photography found during research (palm-lined boardwalk, white
   modern architecture, poolside evening events with string lights).
   Not a stock "beach site" palette — deep tide teal is the dominant dark,
   lagoon cyan + sunset coral are the two accents, sand/paper carry the
   light sections.

   Class prefix `mona-` (Công Viên Cá Voi) — NOT `mona-`. The `mona-` prefix
   is applied only when this prototype is ported into the theme, per
   .claude/rules/prototype-fidelity.md.
   ========================================================================== */


/* ---------------------------------------------------------------------- */
/* Tokens                                                                  */
/* ---------------------------------------------------------------------- */


/* ---------------------------------------------------------------------- */
/* Reset / base                                                            */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
	margin: 0;
	background: var(--sand);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
/* height:auto is not cosmetic here. Every <img> carries width/height attributes
   for CLS, and those map to the `height` property — which outranks any
   `aspect-ratio` set on the element. Without this the polaroid frames rendered
   at their attribute height (750px instead of ~315px) and doubled the hero. */
img, svg{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; cursor: pointer; }
input, textarea, select{ font: inherit; }
h1,h2,h3,h4,p,figure{ margin: 0; }

:focus-visible{
	outline: 3px solid var(--sunset);
	outline-offset: 3px;
	border-radius: 4px;
}

.mona-container{
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.mona-visually-hidden{
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.mona-skip-link{
	position: absolute; left: 16px; top: -60px;
	background: var(--ink); color: var(--paper);
	padding: 12px 20px; border-radius: var(--radius-s);
	z-index: 999; transition: top 0.2s var(--ease);
}
.mona-skip-link:focus{ top: 16px; }

/* ---------------------------------------------------------------------- */
/* Typography                                                              */
/* ---------------------------------------------------------------------- */
.mona-eyebrow{
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--f-body); font-weight: 700; font-size: 13px;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--lagoon-ink);
}
.mona-eyebrow::before{
	content: ''; width: 22px; height: 2px; background: var(--sunset); border-radius: 2px;
}
section.mona-on-dark .mona-eyebrow,
.mona-on-dark .mona-eyebrow,
.mona-page-header .mona-eyebrow,
.mona-cta .mona-eyebrow{ color: var(--lagoon); }

.mona-h1{
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(40px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.01em;
	margin: 18px 0 0;
}
.mona-h1 em{ font-family: var(--f-body); font-style: italic; font-weight: 600; color: var(--sunset); }
.mona-on-dark .mona-h1{ color: var(--paper); }
.mona-on-dark .mona-h1 em{ color: var(--lagoon); }

.mona-h2{
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.01em;
	margin: 14px 0 0;
}
.mona-on-dark .mona-h2{ color: var(--paper); }

.mona-h3{
	font-family: var(--f-display); font-weight: 700;
	font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2;
	margin: 0 0 8px;
}
.mona-on-dark .mona-h3{ color: var(--paper); }

.mona-lede{
	font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--ink-soft);
	max-width: 56ch;
}
.mona-on-dark .mona-lede{ color: var(--paper-soft); }

.mona-section-head{
	max-width: 680px;
}
.mona-section-head--center{
	max-width: 640px; margin-inline: auto; text-align: center;
}
.mona-section-head--split{
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 32px; flex-wrap: wrap; max-width: none;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.mona-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 16px 30px; border-radius: var(--radius-full);
	font-family: var(--f-body); font-weight: 700; font-size: 15px;
	border: 2px solid transparent; white-space: nowrap;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.mona-btn svg{ width: 18px; height: 18px; flex: none; }
.mona-btn:hover{ transform: translateY(-2px); }

.mona-btn--sunset{
	background: var(--sunset-strong); color: var(--paper); box-shadow: var(--shadow-pop);
}
.mona-btn--sunset:hover{ background: #B33210; }

.mona-btn--outline-dark{
	background: transparent; border-color: var(--ink); color: var(--ink);
}
.mona-btn--outline-dark:hover{ background: var(--ink); color: var(--paper); }

.mona-btn--outline-light{
	background: transparent; border-color: var(--line-on-dark); color: var(--paper);
}
.mona-btn--outline-light:hover{ background: var(--paper); color: var(--deep-tide); border-color: var(--paper); }

.mona-btn--ghost{
	background: transparent; color: var(--deep-tide); padding-inline: 4px;
	border-radius: 0; font-weight: 700;
}
.mona-btn--ghost svg{ transition: transform 0.25s var(--ease); }
.mona-btn--ghost:hover svg{ transform: translateX(4px); }
.mona-btn--ghost:hover{ transform: none; color: var(--sunset-dim); }
.mona-on-dark .mona-btn--ghost{ color: var(--paper); }
.mona-on-dark .mona-btn--ghost:hover{ color: var(--lagoon); }

.mona-btn--sm{ padding: 11px 20px; font-size: 13px; }

/* Real photography (AI-generated per docs/old-site-content.md, or client-supplied
   later) — used wherever a generated/real image exists. Falls back visually to the
   --sand tone while loading so there's no flash of white. */
.mona-photo{
	position: relative; overflow: hidden; border-radius: var(--radius-m);
	aspect-ratio: 4/3; background: var(--sand-2);
}
.mona-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mona-photo--wide{ aspect-ratio: 21/9; }
.mona-photo--square{ aspect-ratio: 1/1; }
.mona-photo--tall{ aspect-ratio: 3/4; }
.mona-photo__caption{
	position: absolute; left: 14px; bottom: 14px; z-index: 1;
	font-size: 12px; font-weight: 600; color: var(--paper);
	background: rgba(8,30,32,.55); backdrop-filter: blur(6px);
	padding: 7px 12px; border-radius: var(--radius-full);
}

/* ---------------------------------------------------------------------- */
/* Header                                                                   */
/* ---------------------------------------------------------------------- */
.mona-header{
	position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
	background: transparent;
	transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.35s var(--ease);
	padding-block: 18px;
}
.mona-header.is-scrolled{
	background: rgba(10,58,61,0.92); backdrop-filter: blur(10px);
	box-shadow: 0 12px 28px -16px rgba(8,30,32,0.5);
	padding-block: 10px;
}
.mona-header__bar{ display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.mona-logo{ display: flex; align-items: center; gap: 12px; flex: none; }
.mona-logo__mark{ width: 42px; height: 42px; flex: none; }
.mona-logo__word{ font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--paper); line-height: 1.15; }
.mona-logo__word span{ display: block; font-family: var(--f-body); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; color: var(--lagoon); }

/* ------------------------------------------------------------------ */
/* Desktop navigation — link + disclosure, dropdown and mega panel      */
/*                                                                      */
/* An item that owns a panel is TWO controls, not one: the label stays a */
/* real link to the section's own page, and a separate <button> opens    */
/* the panel. A single element cannot both navigate and disclose — with  */
/* one, keyboard users can reach the parent page or the submenu, never   */
/* both. Hover opens the panel as a convenience on top of that; it is    */
/* never the only way in. JS in main.js § nav owns aria-expanded and     */
/* `inert`, so a closed panel is invisible to AT as well as to the eye.  */
/* ------------------------------------------------------------------ */
.mona-nav{ display: flex; align-items: center; gap: 2px; }
.mona-nav__item{ position: relative; display: flex; align-items: center; }
/* The mega panel spans the header, so its item must not be the containing
   block — static hands positioning up to .mona-header. */
.mona-nav__item--mega{ position: static; }

.mona-nav__link{
	position: relative; padding: 10px 16px; border-radius: var(--radius-full);
	font-weight: 600; font-size: 14.5px; color: var(--paper-soft); white-space: nowrap;
	transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.mona-nav__link:hover{ color: var(--paper); background: rgba(255,252,246,0.08); }
.mona-nav__link.is-current{ color: var(--deep-tide); background: var(--lagoon); }
.mona-nav__item--has-panel .mona-nav__link{ padding-right: 8px; }
.mona-nav__item--has-panel:hover .mona-nav__link:not(.is-current),
.mona-nav__item.is-open .mona-nav__link:not(.is-current){ color: var(--paper); background: rgba(255,252,246,0.08); }

.mona-nav__toggle{
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 34px; padding: 0; margin-left: -6px;
	background: none; border: 0; border-radius: var(--radius-full);
	color: var(--paper-soft); transition: color 0.2s var(--ease);
}
.mona-nav__item--has-panel:hover .mona-nav__toggle,
.mona-nav__item.is-open .mona-nav__toggle{ color: var(--paper); }
.mona-nav__toggle svg{ width: 12px; height: 12px; transition: transform 0.28s var(--ease); }
.mona-nav__item.is-open .mona-nav__toggle svg{ transform: rotate(180deg); }

/* Shared panel behaviour. visibility (not display) so the panel can animate,
   and so a closed panel still has a box for `inert` to apply to. */
.mona-nav__panel{
	position: absolute; top: 100%; z-index: 5;
	opacity: 0; visibility: hidden; transform: translateY(-10px);
	transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
}
.mona-nav__item.is-open > .mona-nav__panel{ opacity: 1; visibility: visible; transform: translateY(0); }
/* Hover bridge: without it the gap between the link and the panel is a dead
   zone and the panel closes while the pointer is travelling to it. */
.mona-nav__panel::before{ content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

/* -- Simple dropdown -- */
.mona-nav__sub{
	left: 0; margin-top: 12px; min-width: 264px;
	background: var(--paper); border-radius: var(--radius-m); padding: 10px;
	box-shadow: 0 30px 60px -26px rgba(3,16,18,.6), 0 0 0 1px rgba(18,38,42,.06);
}
.mona-nav__sub a{
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 11px 14px; border-radius: var(--radius-s);
	font-size: 14px; font-weight: 600; color: var(--ink);
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.mona-nav__sub a::after{
	content: '→'; opacity: 0; transform: translateX(-4px); color: var(--lagoon-ink);
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.mona-nav__sub a:hover{ background: var(--sand); color: var(--deep-tide); }
.mona-nav__sub a:hover::after{ opacity: 1; transform: translateX(0); }

/* -- Mega panel -- */
/* Flush to the header, unlike the small dropdown: a full-bleed panel with a gap
   above it shows a sliver of the scrolling page between the two and reads as a
   misalignment rather than a deliberate float. */
.mona-mega{
	left: 0; right: 0; margin-top: 0;
	background: var(--paper); color: var(--ink);
	box-shadow: 0 40px 80px -34px rgba(3,16,18,.62);
	border-top: 1px solid rgba(18,38,42,.08);
}
.mona-mega__inner{
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 0.92fr;
	gap: clamp(20px, 2.6vw, 44px);
	padding-block: clamp(24px, 2.6vw, 38px);
}
/* min-width:0 — a grid child defaults to min-content width, so one long service
   name ("Khu vui chơi phao nổi") would push its column past its 1fr share and
   shove the rest of the row out of the panel. */
.mona-mega__col{ min-width: 0; }
.mona-mega__title{
	display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
	font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--lagoon-ink);
}
.mona-mega__title svg{ width: 16px; height: 16px; flex: none; }
.mona-mega__list a{
	display: block; padding: 8px 11px; margin-inline: -11px; border-radius: var(--radius-s);
	font-size: 14px; font-weight: 600; color: var(--ink);
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.mona-mega__list a:hover{ background: var(--sand); color: var(--deep-tide); }
.mona-mega__all{
	display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
	font-size: 13px; font-weight: 700; color: var(--lagoon-ink);
}
.mona-mega__all svg{ width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.mona-mega__all:hover svg{ transform: translateX(4px); }
/* The promo keeps the rule that no band on this site is text alone — a mega
   menu of nothing but links is exactly that failure at menu scale. */
.mona-mega__promo{
	position: relative; isolation: isolate; overflow: hidden;
	border-radius: var(--radius-m); min-height: 216px;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 20px; color: var(--paper); background: var(--deep-tide-2);
}
.mona-mega__promo img{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.mona-mega__promo::after{
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(6,26,28,.18) 30%, rgba(6,26,28,.88) 100%);
}
.mona-mega__promo:hover img{ transform: scale(1.06); }
.mona-mega__promo span{
	font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--lagoon); margin-bottom: 8px;
}
.mona-mega__promo strong{ font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.24; }
.mona-mega__promo em{ font-style: normal; font-size: 13px; color: var(--paper-soft); margin-top: 6px; }

/* The header goes solid while a panel is open — a white mega panel hanging
   off a transparent bar over the hero photo has nothing to sit on. */
.mona-header.has-panel{
	background: rgba(10,58,61,0.96); backdrop-filter: blur(10px);
	box-shadow: 0 12px 28px -16px rgba(8,30,32,0.5);
}
.mona-nav-scrim{
	position: fixed; inset: 0; z-index: 99; background: rgba(4,18,20,.42);
	opacity: 0; visibility: hidden; transition: opacity 0.26s var(--ease), visibility 0.26s;
}
.mona-nav-scrim.is-on{ opacity: 1; visibility: visible; }
@media (max-width: 1180px){
	.mona-mega__inner{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mona-mega__promo{ display: none; }
}

.mona-header__actions{ display: flex; align-items: center; gap: 12px; flex: none; }
.mona-hotline{
	display: flex; align-items: center; gap: 10px;
	background: rgba(255,252,246,0.08); border: 1px solid var(--line-on-dark);
	padding: 8px 16px 8px 8px; border-radius: var(--radius-full);
}
.mona-hotline__icon{
	width: 34px; height: 34px; border-radius: 50%; background: var(--sunset-strong);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.mona-hotline__icon svg{ width: 16px; height: 16px; color: var(--paper); }
.mona-hotline__text{ line-height: 1.25; }
.mona-hotline__label{ display: block; font-size: 10.5px; color: var(--paper-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.mona-hotline__num{ display: block; font-size: 14.5px; color: var(--paper); font-weight: 700; }

.mona-burger{
	display: none; width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,252,246,0.1); border: 1px solid var(--line-on-dark);
	align-items: center; justify-content: center; flex: none;
}
.mona-burger svg{ width: 18px; height: 18px; color: var(--paper); }

/* The bar is a nowrap flex row of three fixed-size blocks, so when the menu
   grows the nav does not shrink — it pushes the hotline and the burger off the
   right edge. Measured before this rule: at a 1024px viewport the actions block
   ended at x=1099, 75px outside the window, and body{overflow-x:hidden} clipped
   it so no horizontal-overflow check reported anything. The two steps below buy
   back ~90px before the burger takes over at 980. Re-measure these numbers if a
   seventh top-level item is ever added. */
@media (max-width: 1240px){
	.mona-nav{ gap: 0; }
	.mona-nav__link{ padding-inline: 12px; font-size: 14px; }
}
@media (max-width: 1120px){
	.mona-logo__word{ font-size: 17px; }
	/* The strapline is the first thing to go: the wordmark still identifies the
	   site without it, and it is repeated in the footer and in <title>. */
	.mona-logo__word span{ display: none; }
}

/* 1010, not 980: with the tightened nav above, the actions block still ended
   26px outside a 1000px window. The desktop nav hands over to the drawer at the
   last width where it genuinely fits. */
@media (max-width: 1010px){
	.mona-nav, .mona-header__actions .mona-hotline{ display: none; }
	.mona-burger{ display: flex; }
}

/* ------------------------------------------------------------------ */
/* Mobile drawer — accordion, not a flat dump of every link             */
/*                                                                      */
/* Same two-control rule as the desktop panels: the row's label is a     */
/* link to the section page, and the caret beside it is a separate       */
/* button that expands the children. Tapping "Dịch vụ" must be able to   */
/* reach dich-vu.html — an accordion that swallows the parent link is    */
/* the most common way a mobile menu loses a page.                       */
/* ------------------------------------------------------------------ */
.mona-mobile-nav{
	position: fixed; inset: 0; z-index: 200;
	background: var(--deep-tide); color: var(--paper);
	display: flex; flex-direction: column; padding: 22px var(--gutter) 28px;
	transform: translateX(100%); transition: transform 0.38s var(--ease);
	overflow-y: auto; overscroll-behavior: contain;
}
.mona-mobile-nav.is-open{ transform: translateX(0); }
.mona-mobile-nav__top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; flex: none; }
.mona-mobile-nav__close{
	width: 44px; height: 44px; border-radius: 50%; background: rgba(255,252,246,0.1);
	border: 1px solid var(--line-on-dark); display: flex; align-items: center; justify-content: center;
}
.mona-mobile-nav__close svg{ width: 18px; height: 18px; color: var(--paper); }

.mona-mobile-nav__group{ border-bottom: 1px solid var(--line-on-dark); }
.mona-mobile-nav__row{ display: flex; align-items: stretch; justify-content: space-between; gap: 8px; }
.mona-mobile-nav__link{
	display: block; flex: 1; padding: 15px 4px;
	font-family: var(--f-display); font-weight: 700; font-size: clamp(21px, 6vw, 27px);
	line-height: 1.2; color: var(--paper);
}
.mona-mobile-nav__group .mona-mobile-nav__link{ border-bottom: 0; }
.mona-mobile-nav__link.is-current{ color: var(--lagoon); }
.mona-mobile-nav__expand{
	flex: none; width: 46px; display: flex; align-items: center; justify-content: center;
	background: none; border: 0; color: var(--paper-soft);
}
.mona-mobile-nav__expand svg{ width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.mona-mobile-nav__group.is-open .mona-mobile-nav__expand{ color: var(--lagoon); }
.mona-mobile-nav__group.is-open .mona-mobile-nav__expand svg{ transform: rotate(180deg); }

/* grid-template-rows 0fr → 1fr animates to the panel's real height without any
   JS measuring it, and it stays correct when the text rewraps. */
.mona-mobile-nav__panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--ease); }
.mona-mobile-nav__group.is-open > .mona-mobile-nav__panel{ grid-template-rows: 1fr; }
.mona-mobile-nav__panel > div{ overflow: hidden; }
.mona-mobile-nav__sub{ padding: 2px 0 14px 14px; border-left: 1px solid var(--line-on-dark); margin-left: 4px; }
.mona-mobile-nav__sub a{
	display: block; padding: 9px 4px; font-family: var(--f-body);
	font-weight: 600; font-size: 15px; color: var(--paper-soft);
}
.mona-mobile-nav__sub a:hover, .mona-mobile-nav__sub a.is-current{ color: var(--lagoon); }
.mona-mobile-nav__foot{ margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 12px; flex: none; }
.mona-mobile-nav__call{ display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13px; color: var(--paper-soft); }
.mona-mobile-nav__call svg{ width: 15px; height: 15px; color: var(--lagoon); }

/* Rows arrive one after another once the drawer has finished sliding in.
   Pure CSS so it survives a blocked GSAP CDN. */
.mona-mobile-nav__group, .mona-mobile-nav__foot{
	opacity: 0; transform: translateX(18px);
	transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.mona-mobile-nav.is-open .mona-mobile-nav__group,
.mona-mobile-nav.is-open .mona-mobile-nav__foot{
	opacity: 1; transform: translateX(0);
	transition-delay: calc(120ms + var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce){
	.mona-mobile-nav__group, .mona-mobile-nav__foot{ opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Sections — rhythm                                                       */
/* ---------------------------------------------------------------------- */
section{ position: relative; }
.mona-section{ padding-block: clamp(56px, 8vw, 108px); background: var(--sand); }
.mona-section--paper{ background: var(--paper); }
/* Reading surface. Long-form body copy never sits on the sand tint — a page of
   article text on #F4EBD8 is a coloured background behind the thing the visitor
   came to read. Detail pages use this for the band that holds the prose; the
   sand tint is left to short bands that only need separating from a neighbour. */
.mona-section--read{ background: var(--paper); }
/* Closing CTA band. Tight to the section above — that was the intent behind the
   inline padding-top:0 it replaces — but never zero: the CTA is a rounded card,
   and a rounded card whose top edge sits on a colour boundary shows the other
   colour through its corners. */
.mona-section--cta{ padding-top: clamp(26px, 3.4vw, 48px); }
.mona-section--dark{ background: var(--deep-tide); color: var(--paper); }
.mona-section--dark .mona-lede{ color: var(--paper-soft); }

/* ---------------------------------------------------------------------- */
/* Hero — photo stage + polaroid cluster                                    */
/*                                                                          */
/* The banner is a real photograph under a monochrome tonal wash, never a   */
/* colour gradient. Everything on top is one of three devices, and nothing  */
/* else: the stacked display headline, the polaroid trio (the page's one    */
/* signature element), and the rotating brand seal. The dashed line is the  */
/* wake of a boat leaving the shore — it connects the headline to the       */
/* photos rather than decorating empty space.                               */
/* ---------------------------------------------------------------------- */
/* One screen, always. Every vertical measure below is a share of the viewport
   height, not of its width — a hero sized in vw grows past the fold on a short
   laptop screen, which is exactly how this one first shipped. The vw term is
   kept as the upper bound so the type does not balloon on a tall narrow phone. */
.mona-hero{
	position: relative; isolation: isolate; overflow: hidden;
	background-color: var(--deep-tide-2); color: var(--paper);
	height: 100svh; min-height: 560px; max-height: 1080px;
	display: flex; flex-direction: column; justify-content: space-between;
	padding-top: clamp(78px, 11vh, 132px);
}
.mona-hero__bg{ position: absolute; inset: -8% 0 0; z-index: -2; will-change: transform; }
.mona-hero__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* Tonal wash only — one hue, four stops. The angled band echoes the diagonal
   panels of the reference layout without introducing a second colour. */
.mona-hero__wash{
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(180deg, rgba(6,26,28,.90) 0%, rgba(6,26,28,.58) 34%, rgba(6,26,28,.72) 66%, rgba(6,26,28,.96) 100%),
		linear-gradient(114deg, rgba(6,26,28,.55) 0 34%, rgba(6,26,28,.06) 34.4% 66%, rgba(6,26,28,.55) 66.4% 100%);
}
.mona-hero__route{
	position: absolute; left: 50%; top: 30%; width: min(1180px, 96vw); height: 46%;
	transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: visible;
}
.mona-hero__route path{
	fill: none; stroke: var(--lagoon); stroke-width: 2; stroke-linecap: round;
	stroke-dasharray: 7 12; opacity: .55;
}
.mona-hero__inner{ position: relative; z-index: 1; text-align: center; }

/* Stacked display headline — kicker, weight, italic subline */
.mona-hero__kicker{
	display: inline-flex; align-items: center; gap: 10px;
	font-size: clamp(11px, 1.2vw, 13px); font-weight: 800; letter-spacing: .2em;
	text-transform: uppercase; color: var(--lagoon);
}
.mona-hero__kicker::before, .mona-hero__kicker::after{
	content: ''; width: clamp(18px, 4vw, 46px); height: 1px; background: currentColor; opacity: .55;
}
.mona-hero__title{ margin-top: clamp(14px, 2vw, 22px); }
/* The mask has to be taller than the glyph box or it clips Vietnamese tone
   marks off the top and descenders off the bottom — "Một ngày biển trọn vẹn"
   loses its dấu nặng and its ế. Pad the clip box out, pull it back with an
   equal negative margin so the layout is unchanged. */
.mona-hero__line{ display: block; overflow: hidden; padding-block: .14em .22em; margin-block: -.14em -.22em; }
.mona-hero__line > span{ display: block; }
.mona-hero__title-sm{
	font-family: var(--f-body); font-weight: 800; text-transform: uppercase;
	font-size: clamp(12px, min(2vw, 2.4vh), 22px); letter-spacing: .08em; color: var(--paper);
}
.mona-hero__title-lg{
	font-family: var(--f-display); font-weight: 800;
	font-variation-settings: 'opsz' 96, 'wdth' 82;
	font-size: clamp(42px, min(9vw, 11.5vh), 128px); line-height: .86; letter-spacing: -.028em;
	color: var(--paper); margin-block: .05em .12em;
}
.mona-hero__title-alt{
	font-family: var(--f-body); font-style: italic; font-weight: 600;
	font-size: clamp(15px, min(2.4vw, 2.9vh), 27px); line-height: 1.2; color: var(--sunset);
}
.mona-hero__inner .mona-btn-row{ display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: clamp(18px, 3vh, 34px); }

/* Rotating brand seal — the site's own mark, not a generic sticker */
.mona-seal{
	position: absolute; z-index: 2; top: clamp(96px, 13vw, 148px); right: var(--gutter);
	width: clamp(92px, 11vw, 138px); aspect-ratio: 1; display: grid; place-items: center;
	border-radius: 50%; background: rgba(6,26,28,.42); backdrop-filter: blur(4px);
	border: 1px solid rgba(47,217,196,.34);
}
.mona-seal__ring{ position: absolute; inset: 0; width: 100%; height: 100%; animation: mona-spin 26s linear infinite; }
.mona-seal__ring text{
	font-family: var(--f-body); font-size: 8.4px; font-weight: 800;
	letter-spacing: .24em; fill: var(--lagoon); text-transform: uppercase;
}
.mona-seal__mark{ width: 46%; height: auto; }
@keyframes mona-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .mona-seal__ring{ animation: none; } }

/* Polaroid cluster — the signature. White frame, hand-set tilt, angled tab. */
/* The print's height is the budget, not its width: --shot is a slice of the
   viewport height, the frame is sized from it, and the width follows from the
   4:5 photo. That is what keeps the cluster inside the fold on any screen. */
.mona-polaroids{
	--shot: clamp(104px, 22vh, 250px);
	position: relative; z-index: 1;
	display: flex; justify-content: center; align-items: flex-end;
	gap: clamp(8px, 1.4vw, 20px);
	margin-top: clamp(16px, 3vh, 40px);
}
.mona-polaroid{
	--r: 0deg;
	position: relative; flex: 0 0 auto;
	background: var(--paper); padding: 9px 9px 11px;
	border-radius: 3px; box-shadow: 0 26px 46px -20px rgba(3,16,18,.72);
	color: var(--ink); transform: rotate(var(--r));
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* Width is derived from --shot so all three frames match exactly: a 4:5 photo
   of height H is 0.8H wide, plus the 9px frame either side. Letting the card
   size itself from its contents instead made each card as wide as its own
   caption, and the row came out ragged. */
.mona-polaroid{ width: calc(var(--shot) * 0.8 + 18px); }
.mona-polaroid:nth-child(1){ --r: -6deg; }
.mona-polaroid:nth-child(2){ --r: 1.5deg; margin-bottom: clamp(14px, 3vh, 40px); z-index: 2; width: calc(var(--shot) * 0.92 + 18px); }
.mona-polaroid:nth-child(3){ --r: 6deg; }
.mona-polaroid:hover, .mona-polaroid:focus-visible{
	transform: rotate(0deg) translateY(-12px) scale(1.03);
	box-shadow: 0 36px 62px -20px rgba(3,16,18,.8); z-index: 3;
}
.mona-polaroid img{ width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; }
.mona-polaroid__tab{
	position: absolute; top: -12px; left: 10px; z-index: 2;
	background: var(--sunset-strong); color: var(--paper);
	font-size: clamp(9px, 1.1vh, 11px); font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
	padding: 5px 11px; border-radius: 3px; transform: rotate(-2.5deg);
	box-shadow: 0 8px 16px -8px rgba(3,16,18,.7); white-space: nowrap;
}
/* Normal flow, same reason as the banner's caption: the white band has to grow
   with the text instead of letting it spill onto the photograph. */
.mona-polaroid__cap{
	display: block; margin-top: 9px; text-align: center;
	font-family: var(--f-display); font-weight: 700; font-size: clamp(11.5px, 1.4vh, 15px);
	line-height: 1.22; color: var(--deep-tide);
}
.mona-polaroid__cap small{ display: block; font-family: var(--f-body); font-size: clamp(9.5px, 1.1vh, 11px); font-weight: 600; color: var(--ink-soft); margin-top: 1px; }

/* Bottom utility strip — location on the left, hotline on the right */
.mona-hero__foot{
	position: relative; z-index: 1; flex: none;
	border-top: 1px solid var(--line-on-dark);
}
.mona-hero__foot-in{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: clamp(10px, 1.8vh, 18px); flex-wrap: wrap; }
.mona-hero__place{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--paper-soft); }
.mona-hero__place svg{ width: 16px; height: 16px; color: var(--lagoon); flex: none; }
.mona-hero__call{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--paper); }
.mona-hero__call b{ font-family: var(--f-display); font-size: clamp(17px, 1.8vw, 22px); font-weight: 700; letter-spacing: -.01em; }
.mona-hero__call svg{ width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: var(--sunset-strong); color: var(--paper); flex: none; }

@media (max-width: 860px){
	/* height:auto, not a fixed 100svh. The hero is overflow:hidden, so on a short
	   phone a fixed height silently crops the bottom of the polaroid row instead
	   of letting the section grow. min-height keeps it a full screen at minimum. */
	.mona-hero{ height: auto; min-height: 100svh; padding-bottom: 0; }
	.mona-seal{ width: 68px; top: 82px; }
	/* The rules either side push the location line past the viewport at this
	   width and it gets clipped mid-word. Drop them and let the text wrap. */
	.mona-hero__kicker{ display: block; text-align: center; text-wrap: balance; }
	.mona-hero__kicker::before, .mona-hero__kicker::after{ display: none; }
	.mona-polaroids{
		margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
		justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
		gap: 14px; padding-bottom: 18px; -webkit-overflow-scrolling: touch;
	}
	.mona-polaroids::-webkit-scrollbar{ display: none; }
	.mona-polaroid, .mona-polaroid:nth-child(2){ --r: 0deg; width: min(52vw, 214px); margin-bottom: 0; scroll-snap-align: center; }
	.mona-hero__route{ display: none; }
}

/* ---------------------------------------------------------------------- */
/* Page (subpage) banner — same grammar as the hero, one notch quieter      */
/*                                                                          */
/* The photograph is a real <img> in the markup, exactly like the hero, and  */
/* deliberately NOT a url() handed in through a custom property: Chrome      */
/* resolves a url() substituted by var() against the stylesheet that used    */
/* it, not the document, so an inline --mona-banner on the page resolved to   */
/* assets/css/assets/images/... and every banner rendered flat teal.         */
/* ---------------------------------------------------------------------- */
.mona-page-header{
	position: relative; overflow: hidden; isolation: isolate;
	color: var(--paper); background-color: var(--deep-tide-2);
	padding-block: clamp(126px, 16vw, 182px) clamp(52px, 7vw, 82px);
}
.mona-page-header__bg{ position: absolute; inset: 0; z-index: -2; }
.mona-page-header__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.mona-page-header::after{
	content: ''; position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(180deg, rgba(6,26,28,.80) 0%, rgba(6,26,28,.66) 50%, rgba(6,26,28,.94) 100%),
		linear-gradient(114deg, rgba(6,26,28,.72) 0 40%, rgba(6,26,28,.18) 40.4% 72%, rgba(6,26,28,.6) 72.4% 100%);
}
.mona-page-header__grid{ position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: end; }
.mona-breadcrumb{ display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--paper-soft); margin-bottom: 20px; }
.mona-breadcrumb a:hover{ color: var(--lagoon); }
.mona-page-header__content{ max-width: 760px; }
.mona-page-header__content .mona-h1{ font-size: clamp(34px, 5.4vw, 66px); }
/* .mona-lede is written for light sections and hardcodes --ink-soft. The banner
   is dark, and only .mona-section--dark re-colours it — which this is not. */
.mona-page-header .mona-lede{ color: var(--paper-soft); }
/* The banner's own polaroid — one photo, tilted, same component language */
/* The caption sits in normal flow, not absolutely, so the white band grows to
   fit two lines. Pinned to the bottom it spilled past the frame and onto the
   photograph the moment a caption wrapped. */
.mona-page-header__shot{
	position: relative; flex: none; width: clamp(150px, 17vw, 212px);
	background: var(--paper); padding: 10px 10px 14px; border-radius: 3px;
	box-shadow: 0 28px 50px -22px rgba(3,16,18,.72); transform: rotate(4deg);
	transition: transform .45s var(--ease);
}
.mona-page-header__shot:hover{ transform: rotate(0deg) translateY(-8px); }
.mona-page-header__shot img{ width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; }
.mona-page-header__shot figcaption{
	margin-top: 10px; text-align: center; text-wrap: balance;
	font-family: var(--f-display); font-weight: 700; font-size: 13px; line-height: 1.25; color: var(--deep-tide);
}
@media (max-width: 860px){
	.mona-page-header__grid{ grid-template-columns: 1fr; }
	.mona-page-header__shot{ display: none; }
}

/* ---------------------------------------------------------------------- */
/* Grid / card systems                                                     */
/* ---------------------------------------------------------------------- */
.mona-grid{ display: grid; gap: 24px; margin-top: 44px; }
.mona-grid--3{ grid-template-columns: repeat(3, 1fr); }
.mona-grid--4{ grid-template-columns: repeat(4, 1fr); }
.mona-grid--2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px){ .mona-grid--3, .mona-grid--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .mona-grid--3, .mona-grid--4, .mona-grid--2{ grid-template-columns: 1fr; } }

/* Service card (Dịch vụ) */
.mona-service-card{
	background: var(--paper); color: var(--ink); border-radius: var(--radius-m); overflow: hidden;
	box-shadow: 0 20px 40px -28px rgba(10,58,61,0.3); display: flex; flex-direction: column;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mona-service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.mona-service-card .mona-photo{ border-radius: 0; }
.mona-service-card__body{ padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mona-service-card__tag{ font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lagoon-ink); }
.mona-service-card h3{ font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.mona-service-card p{ font-size: 14px; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.mona-service-card__foot{ display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }

/* Filter tabs (map to real taxonomy-term links once ported) */
.mona-tabs{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.mona-tab{
	padding: 11px 22px; border-radius: var(--radius-full); font-weight: 700; font-size: 14px;
	background: var(--paper); border: 1px solid var(--line-on-light); color: var(--ink-soft);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mona-tab:hover{ border-color: var(--deep-tide); color: var(--deep-tide); }
.mona-tab.is-active{ background: var(--deep-tide); border-color: var(--deep-tide); color: var(--paper); }

/* Stat band */
.mona-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-on-dark); border-radius: var(--radius-l); overflow: hidden; margin-top: 48px; }
.mona-stat{ background: var(--deep-tide); padding: 32px 26px; }
.mona-stat b{ display: block; font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; color: var(--lagoon); }
.mona-stat span{ display: block; margin-top: 8px; font-size: 13.5px; color: var(--paper-soft); line-height: 1.5; }
@media (max-width: 900px){ .mona-stats{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .mona-stats{ grid-template-columns: 1fr; } }

/* Why-us cards (replaces generic testimonials — no real quotes exist yet) */
.mona-why__icon{ width: 46px; height: 46px; border-radius: 14px; background: var(--sand); display: flex; align-items: center; justify-content: center; flex: none; }
.mona-why__icon svg{ width: 22px; height: 22px; color: var(--deep-tide); }
.mona-why h3{ font-size: 16.5px; font-weight: 700; font-family: var(--f-body); margin-bottom: 6px; }
.mona-why p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* ---------------------------------------------------------------------- */
/* Journey — "Một ngày ở Whale Park": the storytelling spine of the home
   page. Three time-of-day panels; a sun/moon marker travels an arc above
   them and lands on the active panel as it scrolls into view (JS toggles
   .is-active per panel via IntersectionObserver, see main.js).             */
/* ---------------------------------------------------------------------- */
.mona-journey{ position: relative; }
.mona-journey__arc{
	position: relative; height: 64px; margin-bottom: -18px;
}
.mona-journey__arc svg{ width: 100%; height: 100%; overflow: visible; }
.mona-journey__arc path{ fill: none; stroke: var(--line-on-dark); stroke-width: 2; stroke-dasharray: 6 10; stroke-linecap: round; }
.mona-journey__marker{
	position: absolute; top: 50%; left: 6%; width: 34px; height: 34px; border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #FFF0DC 0%, var(--sunset) 60%, transparent 80%);
	box-shadow: 0 0 24px 4px rgba(255,107,77,0.45);
	transform: translate(-50%, -50%);
	transition: left 0.6s var(--ease);
}
.mona-journey[data-active="1"] .mona-journey__marker{ left: 6%; }
.mona-journey[data-active="2"] .mona-journey__marker{ left: 50%; }
.mona-journey[data-active="3"] .mona-journey__marker{ left: 94%; }

.mona-journey__panels{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 1; }
.mona-journey__panel{
	position: relative; overflow: hidden; isolation: isolate;
	border-radius: var(--radius-l); min-height: 340px;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 24px 24px 28px; color: var(--paper);
	background: var(--deep-tide-2) center/cover no-repeat;
	opacity: 0.5; transform: translateY(18px) scale(0.97); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.mona-journey__panel::before{
	content: ''; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(6,26,28,.1) 0%, rgba(6,26,28,.55) 55%, rgba(6,26,28,.92) 100%);
}
.mona-journey__panel > *{ position: relative; z-index: 1; }
.mona-journey__panel.is-active{ opacity: 1; transform: translateY(0) scale(1); }
.mona-journey__time{ font-family: var(--f-body); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.mona-journey__panel h3{ font-family: var(--f-display); font-size: clamp(22px,2.4vw,28px); font-weight: 600; margin-top: 10px; }
.mona-journey__panel p{ margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--paper-soft); }
.mona-journey__panel a{ display: inline-flex; align-items: center; min-height: 24px; gap: 6px; margin-top: 18px; font-weight: 700; font-size: 13.5px; color: var(--paper); }
.mona-journey__panel a svg{ width: 14px; height: 14px; }

@media (max-width: 900px){
	.mona-journey__arc{ display: none; }
	.mona-journey__panels{ grid-template-columns: 1fr; }
	.mona-journey__panel{ opacity: 1; transform: none; }
}

/* News card */
.mona-news-card{ display: flex; flex-direction: column; gap: 14px; }
.mona-news-card .mona-photo{ aspect-ratio: 16/10; }
.mona-news-card__date{ font-size: 12.5px; font-weight: 700; color: var(--lagoon-ink); letter-spacing: 0.04em; text-transform: uppercase; }
.mona-news-card h3{ font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1.25; }
.mona-news-card p{ font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

/* Gallery */
.mona-gallery{ column-count: 3; column-gap: 20px; margin-top: 44px; }
.mona-gallery__item{ break-inside: avoid; margin-bottom: 20px; }
/* Aspect-ratio variety is hand-curated per item with .mona-photo--tall /
   --square modifiers (see thu-vien-anh.html, index.html) rather than an
   nth-child pattern — a blind nth-child rule here would out-specificity
   those modifiers and silently override them. */
@media (max-width: 900px){ .mona-gallery{ column-count: 2; } }
@media (max-width: 560px){ .mona-gallery{ column-count: 1; } }

.mona-gallery-filters{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* ---------------------------------------------------------------------- */
/* CTA band                                                                 */
/* ---------------------------------------------------------------------- */
/* A photograph under a coral wash, not a coral gradient panel. The colour is
   still the CTA's identity, but it now tints something real — and the decorative
   ring that used to fill the empty right-hand side is gone with it. */
.mona-cta{
	position: relative; isolation: isolate; overflow: hidden;
	background: #972812;   /* = the wash's own start colour, so the fallback and
	                          the painted result carry paper text equally (7.8:1) */
	border-radius: var(--radius-l); padding: clamp(36px, 6vw, 64px);
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
	color: var(--paper);
}
.mona-cta__bg{ position: absolute; inset: 0; z-index: -2; }
.mona-cta__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.mona-cta::after{
	content: ''; position: absolute; inset: 0; z-index: -1;
	background-image: linear-gradient(114deg, rgba(151,40,18,.93) 0%, rgba(196,58,30,.80) 44%, rgba(9,40,42,.78) 100%);
}
.mona-cta__copy{ position: relative; z-index: 1; max-width: 520px; }
.mona-cta h2{ font-family: var(--f-display); font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; }
.mona-cta p{ margin-top: 10px; color: rgba(255,252,246,0.9); font-size: 15px; }
.mona-cta__actions{ position: relative; z-index: 1; display: flex; gap: 14px; flex-wrap: wrap; }
.mona-cta .mona-btn--sunset{ background: var(--paper); color: var(--sunset-strong); box-shadow: 0 16px 32px -12px rgba(8,30,32,0.35); }
.mona-cta .mona-btn--sunset:hover{ background: var(--deep-tide); color: var(--paper); }

/* ---------------------------------------------------------------------- */
/* Forms — PARKED, not dead                                                 */
/*                                                                          */
/* The contact form is switched off at the client's request; lien-he.html    */
/* points at Facebook instead. These rules have no caller right now and      */
/* will look like dead code to a selector sweep — they are the styling the   */
/* form comes back with. Delete them only if the decision becomes permanent. */
/* ---------------------------------------------------------------------- */
.mona-form{ display: grid; gap: 18px; }
.mona-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px){ .mona-form-row{ grid-template-columns: 1fr; } }
.mona-field{ display: flex; flex-direction: column; gap: 8px; }
.mona-field label{ font-size: 13.5px; font-weight: 700; color: var(--ink); }
.mona-field .mona-optional{ font-weight: 500; color: var(--ink-soft); }
.mona-field input, .mona-field textarea{
	background: var(--paper); border: 1.5px solid var(--line-on-light); border-radius: var(--radius-s);
	padding: 14px 16px; font-size: 15px; color: var(--ink);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mona-field input:hover, .mona-field textarea:hover{ border-color: var(--ink-soft); }
.mona-field input:focus, .mona-field textarea:focus{
	outline: none; border-color: var(--lagoon-ink); box-shadow: 0 0 0 4px rgba(47,217,196,0.18);
}
.mona-field--error input{ border-color: var(--sunset); }
.mona-field__error{ font-size: 12.5px; color: var(--sunset-strong); font-weight: 600; display: none; }
.mona-field--error .mona-field__error{ display: block; }
.mona-form__note{ font-size: 12.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
.mona-footer{ background: var(--deep-tide-2); color: var(--paper-soft); padding-top: clamp(56px, 8vw, 84px); }
.mona-footer__top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-on-dark); }
.mona-footer__brand p{ margin-top: 16px; font-size: 14px; line-height: 1.6; max-width: 34ch; }
.mona-footer__social{ display: flex; gap: 10px; margin-top: 22px; }
.mona-footer__social a{ width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-on-dark); display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.mona-footer__social svg{ width: 16px; height: 16px; }
.mona-footer__social a:hover{ background: var(--lagoon); border-color: var(--lagoon); color: var(--deep-tide); }
.mona-footer__title{ font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--paper); margin-bottom: 18px; }
.mona-footer__col a{ display: block; padding: 7px 0; font-size: 14.5px; transition: color 0.2s var(--ease), padding 0.2s var(--ease); }
.mona-footer__col a:hover{ color: var(--lagoon); padding-left: 4px; }
.mona-footer__contact li{ display: flex; gap: 10px; padding: 7px 0; font-size: 14px; align-items: flex-start; }
.mona-footer__contact svg{ width: 16px; height: 16px; color: var(--lagoon); flex: none; margin-top: 3px; }
.mona-footer__bottom{ display: flex; justify-content: space-between; align-items: center; padding-block: 22px; font-size: 13px; flex-wrap: wrap; gap: 10px; }
/* Standalone link in a footer row: 13px text alone is a 21px-tall tap target,
   under the 24px WCAG 2.5.8 asks for. The inline links inside prose are exempt
   as inline targets; this one is not inside a sentence. */
.mona-footer__bottom a{ display: inline-flex; align-items: center; min-height: 26px; }
.mona-footer__bottom a:hover{ color: var(--lagoon); }
@media (max-width: 900px){ .mona-footer__top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mona-footer__top{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Sticky hotline widget — continuity with the old site's persistent
   "Ms.Huong / hotline" corner widget (docs/old-site-content.md)            */
/* ---------------------------------------------------------------------- */
/* Back to top                                                              */
/*                                                                          */
/* Stacked above the hotline FAB in the same corner rather than parked on    */
/* the opposite side: two floating controls on opposite corners read as two  */
/* unrelated systems. It only appears once scrolling far enough that the     */
/* header is long gone, because a back-to-top button at the top of the page  */
/* is a control with nothing to do.                                          */
/* ---------------------------------------------------------------------- */
/* The dock owns the corner and the stacking; its children own only their own
   appearance. Previously each pinned itself with its own bottom/z-index, which
   is how the back-to-top ended up buried inside the contact widget. */
.mona-dock{
	position: fixed; right: 22px; bottom: 22px; z-index: 150;
	display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
	/* The gap between the two is dead space over page content; without this,
	   clicks in it are swallowed by the dock. Children opt back in. */
	pointer-events: none;
}
.mona-dock > *{ pointer-events: auto; }

.mona-to-top{
	position: relative;
	width: 46px; height: 46px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: var(--paper); color: var(--deep-tide);
	border: 1px solid var(--line-on-light); box-shadow: var(--shadow-card);
	opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
	transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s var(--ease);
	/* Collapsed while hidden, so the dock's 14px gap does not leave a floating
	   hole above the hotline widget before the visitor has scrolled. */
	margin-bottom: -60px;
}
.mona-to-top.is-on{ margin-bottom: 0; }
.mona-to-top.is-on{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.mona-to-top:hover{ background: var(--deep-tide); color: var(--paper); }
.mona-to-top svg{ width: 18px; height: 18px; }
/* The ring is the scroll position, drawn by JS into the dash offset. */
.mona-to-top__ring{ position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); pointer-events: none; }
.mona-to-top__ring circle{ fill: none; stroke: var(--lagoon); stroke-width: 2; stroke-linecap: round; }
@media (max-width: 600px){
	.mona-dock{ right: 16px; bottom: 16px; gap: 12px; }
	.mona-to-top{ width: 42px; height: 42px; margin-bottom: -54px; }
	.mona-to-top.is-on{ margin-bottom: 0; }
}

/* ---------------------------------------------------------------------- */
/* Article — the news detail page                                           */
/* ---------------------------------------------------------------------- */
.mona-progress{
	position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 160;
	transform-origin: 0 50%; transform: scaleX(0);
	background: linear-gradient(90deg, var(--lagoon), var(--sunset));
}
/* NOT align-items:start. A sticky child can only travel inside its containing
   block, and `start` shrank the aside to exactly the height of the TOC — zero
   travel, so the panel scrolled away with the page and never stuck. Letting the
   aside stretch to the row gives the TOC the full article to travel down. */
.mona-article{ display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.mona-article__aside{ height: 100%; }
@media (max-width: 980px){ .mona-article{ grid-template-columns: 1fr; } .mona-article__aside{ order: -1; } }

.mona-article__meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.mona-article__cat{
	display: inline-flex; align-items: center; padding: 6px 13px; border-radius: var(--radius-full);
	background: var(--deep-tide); color: var(--lagoon);
	font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.mona-article__fact{ display: inline-flex; align-items: center; min-height: 24px; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
/* The byline is the only link in this row and it is not inside running text, so
   it does not get the inline exemption from WCAG 2.5.8. */
.mona-article__fact a{ display: inline-flex; align-items: center; min-height: 24px; }
.mona-article__fact svg{ width: 15px; height: 15px; color: var(--lagoon-ink); }

/* Sticky table of contents. Not decoration: these articles run long enough
   that a reader arriving from search needs to jump to one section. */
.mona-toc{ position: sticky; top: 104px; background: var(--sand); border: 1px solid var(--line-on-light); border-radius: var(--radius-m); padding: 20px; }
.mona-toc__title{ font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lagoon-ink); margin-bottom: 12px; }
.mona-toc__list a{
	display: block; padding: 8px 12px; margin-inline: -12px; border-radius: var(--radius-s);
	font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-soft);
	border-left: 2px solid transparent; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.mona-toc__list a:hover{ color: var(--deep-tide); background: var(--paper); }
.mona-toc__list a.is-active{ color: var(--deep-tide); border-left-color: var(--lagoon); background: var(--paper); }
.mona-toc__share{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-on-light); }
.mona-share{ display: flex; gap: 8px; }
.mona-share a, .mona-share button{
	width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--paper); color: var(--deep-tide); border: 0; padding: 0;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.mona-share a:hover, .mona-share button:hover{ background: var(--deep-tide); color: var(--paper); }
.mona-share svg{ width: 16px; height: 16px; }

/* Prose extras the article body needs and .mona-prose did not have */
.mona-prose ul, .mona-prose ol{ margin: 0 0 18px; padding-left: 22px; list-style: revert; }
.mona-prose li{ margin-bottom: 8px; }
.mona-prose li::marker{ color: var(--lagoon-ink); font-weight: 700; }
.mona-prose h3{ font-family: var(--f-display); font-size: 20px; font-weight: 700; color: var(--ink); margin: 26px 0 10px; }
.mona-prose a:not(.mona-btn){ color: var(--lagoon-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mona-prose figure{ margin: 30px 0; }
.mona-prose figcaption{ margin-top: 10px; font-size: 13px; color: var(--ink-soft); text-align: center; }
.mona-pullquote{
	margin: 32px 0; padding: 24px 28px; border-left: 3px solid var(--sunset);
	background: var(--sand); border-radius: 0 var(--radius-m) var(--radius-m) 0;
	font-family: var(--f-display); font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.45; color: var(--deep-tide);
}
.mona-callout{
	margin: 30px 0; padding: 20px 24px; border-radius: var(--radius-m);
	background: var(--sand); border-left: 3px solid var(--lagoon-dim);
	color: var(--ink); display: flex; gap: 16px; align-items: flex-start;
}
.mona-callout svg{ width: 22px; height: 22px; flex: none; color: var(--lagoon-ink); margin-top: 2px; }
.mona-callout b{ display: block; font-family: var(--f-display); font-size: 17px; margin-bottom: 6px; color: var(--ink); }
.mona-callout p{ font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.mona-callout a{ color: var(--lagoon-ink); font-weight: 700; }

.mona-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.mona-tags a{
	padding: 7px 14px; border-radius: var(--radius-full); background: var(--sand);
	font-size: 13px; font-weight: 600; color: var(--ink-soft);
	transition: background .2s var(--ease), color .2s var(--ease);
}
.mona-tags a:hover{ background: var(--deep-tide); color: var(--paper); }

/* FAQ — <details> so it opens with JS off, and so the answer text is in the
   DOM for the FAQPage schema and for an answer engine to read. */
.mona-faq{ margin-top: 14px; border-top: 1px solid var(--line-on-light); }
.mona-faq details{ border-bottom: 1px solid var(--line-on-light); }
.mona-faq summary{
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 0; cursor: pointer; list-style: none;
	font-family: var(--f-display); font-weight: 700; font-size: clamp(16px, 1.7vw, 18.5px); color: var(--ink);
}
.mona-faq summary::-webkit-details-marker{ display: none; }
.mona-faq summary::after{
	content: ''; width: 11px; height: 11px; flex: none; border-right: 2px solid var(--lagoon-dim); border-bottom: 2px solid var(--lagoon-dim);
	transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease);
}
.mona-faq details[open] summary::after{ transform: rotate(225deg) translateY(-3px); }
.mona-faq__a{ padding: 0 0 20px; font-size: 15px; line-height: 1.75; color: var(--ink-soft); max-width: 74ch; }

.mona-postnav{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.mona-postnav a{
	padding: 20px 22px; border-radius: var(--radius-m); background: var(--paper);
	border: 1px solid var(--line-on-light); transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.mona-postnav a:hover{ border-color: var(--lagoon-ink); transform: translateY(-3px); }
.mona-postnav span{ display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lagoon-ink); margin-bottom: 8px; }
.mona-postnav svg{ width: 13px; height: 13px; }
.mona-postnav b{ display: block; font-family: var(--f-display); font-size: 16.5px; font-weight: 700; line-height: 1.32; color: var(--ink); }
.mona-postnav a:last-child{ text-align: right; }
.mona-postnav a:last-child span{ justify-content: flex-end; }
@media (max-width: 640px){ .mona-postnav{ grid-template-columns: 1fr; } .mona-postnav a:last-child{ text-align: left; } .mona-postnav a:last-child span{ justify-content: flex-start; } }

/* ---------------------------------------------------------------------- */
/* News listing — lead story + grid                                         */
/* ---------------------------------------------------------------------- */
.mona-lead{
	display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 3vw, 44px);
	align-items: stretch; background: var(--paper); border-radius: var(--radius-l);
	overflow: hidden; border: 1px solid var(--line-on-light);
}
/* The photo fills the row rather than sitting centred inside it: the copy column
   is the taller of the two, and a 4:3 image centred against it left an empty
   band of paper at the top and bottom of the card. */
.mona-lead__media{ position: relative; overflow: hidden; min-height: clamp(300px, 28vw, 420px); }
.mona-lead__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mona-lead:hover .mona-lead__media img{ transform: scale(1.05); }
.mona-lead__flag{
	position: absolute; top: 16px; left: 16px; z-index: 1;
	padding: 7px 14px; border-radius: var(--radius-full); background: var(--sunset-strong); color: var(--paper);
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.mona-lead__body{ padding: clamp(22px, 2.6vw, 38px) clamp(22px, 2.6vw, 42px) clamp(22px, 2.6vw, 38px) 0; align-self: center; }
.mona-lead__body h2{ font-family: var(--f-display); font-weight: 700; font-size: clamp(23px, 2.6vw, 33px); line-height: 1.2; margin-top: 12px; }
.mona-lead__body p{ margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 860px){
	.mona-lead{ grid-template-columns: 1fr; }
	/* Stacked, so the media has no sibling to take its height from. */
	.mona-lead__media{ aspect-ratio: 16/10; min-height: 0; }
	.mona-lead__body{ padding: 0 22px 26px; }
}
.mona-news-card__meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
/* An inline <svg> carrying only a viewBox has no intrinsic size. The base reset
   gives it height:auto and no width, so as a flex item it stretched to fill the
   row — an icon here once rendered at 392x392 and blew every news card's height
   out. Any icon SVG in this stylesheet must get an explicit width AND height. */
.mona-news-card__meta svg{ width: 13px; height: 13px; flex: none; color: var(--lagoon-ink); }
.mona-news-card__sep{ color: var(--line-on-light); margin-inline: 2px; }

/* ---------------------------------------------------------------------- */
/* Positioned by .mona-dock, not by itself. */
.mona-sticky-contact{
	display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.mona-sticky-contact__bubble{
	display: flex; align-items: center; gap: 10px; background: var(--paper);
	border-radius: var(--radius-full); padding: 10px 18px 10px 10px; box-shadow: var(--shadow-card);
}
.mona-sticky-contact__avatar{ width: 40px; height: 40px; border-radius: 50%; background: var(--deep-tide); display: flex; align-items: center; justify-content: center; color: var(--lagoon); font-family: var(--f-display); font-weight: 700; }
.mona-sticky-contact__text b{ display: block; font-size: 13px; }
.mona-sticky-contact__text span{ display: block; font-size: 12px; color: var(--ink-soft); }
.mona-sticky-contact__fab{
	width: 56px; height: 56px; border-radius: 50%; background: var(--sunset-strong); color: var(--paper);
	display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-pop);
	animation: mona-pulse 2.6s ease-in-out infinite;
}
.mona-sticky-contact__fab svg{ width: 24px; height: 24px; }
@keyframes mona-pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(255,107,77,0.45); } 50%{ box-shadow: 0 0 0 14px rgba(255,107,77,0); } }

/* ---------------------------------------------------------------------- */
/* Scroll reveal                                                           */
/*                                                                          */
/* Three tiers, in order of what is actually available:                     */
/*   no JS at all   → .mona-js is never added, nothing is ever hidden        */
/*   JS, no GSAP    → the CSS transition below, driven by IntersectionObserver
/*   JS + GSAP      → .mona-gsap disables this rule and GSAP owns the motion */
/* The hidden state is scoped to .mona-js precisely so a blocked CDN or a    */
/* JS error cannot leave the page blank.                                    */
/* ---------------------------------------------------------------------- */
.mona-js .mona-reveal{ opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.mona-js .mona-reveal.is-visible{ opacity: 1; transform: translateY(0); }
.mona-gsap .mona-reveal{ opacity: 1; transform: none; transition: none; }

/* Banner entrance: hold the animated parts hidden for the one frame between
   parse and main.js, so they cannot flash at their final position first.
   main.js drops .mona-pre synchronously in every path it takes. The keyframe
   is the failsafe for the path it cannot take — main.js itself failing to
   load — and reveals the copy on its own after 1.6s. */
.mona-pre .mona-hero__line > span,
.mona-pre [data-mona-hero-el],
.mona-pre .mona-page-header__shot{ opacity: 0; animation: mona-failsafe 0.01s linear 1.6s forwards; }
@keyframes mona-failsafe{ to{ opacity: 1; } }

/* ---------------------------------------------------------------------- */
/* Status pill + contact channels                                           */
/*                                                                          */
/* What is left of the "form switched off" panel. The panel itself is gone:  */
/* first it was a dark slab that outweighed everything on a light page, then */
/* a boxed column stretched to match a height nothing needed. The message is */
/* two sentences and three links — it belongs inside the map card, not in a  */
/* container of its own.                                                     */
/* ---------------------------------------------------------------------- */
.mona-status{
	display: inline-flex; align-items: center; gap: 9px;
	padding: 7px 15px 7px 12px; border-radius: var(--radius-full);
	background: rgba(255,107,77,.1); border: 1px solid rgba(255,107,77,.32);
	font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sunset-strong);
}
.mona-status::before{
	content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sunset); flex: none;
	animation: mona-blip 2.4s var(--ease) infinite;
}
@keyframes mona-blip{ 0%,100%{ box-shadow: 0 0 0 0 rgba(255,107,77,.5); } 55%{ box-shadow: 0 0 0 7px rgba(255,107,77,0); } }

.mona-channels{ display: flex; flex-direction: column; gap: 10px; margin-top: clamp(20px, 2.4vw, 26px); }
.mona-channel{
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px; border-radius: var(--radius-m);
	background: var(--sand); border: 1px solid transparent; color: var(--ink);
	transition: background 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.mona-channel:hover{ background: var(--sand-2); border-color: rgba(31,165,147,.45); transform: translateX(4px); }
.mona-channel__icon{
	width: 40px; height: 40px; border-radius: 12px; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: var(--paper); color: var(--lagoon-ink);
}
.mona-channel__icon svg{ width: 19px; height: 19px; }
.mona-channel__body{ flex: 1; min-width: 0; }
.mona-channel__body strong{ display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.mona-channel__body small{ display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.mona-channel__go{ width: 16px; height: 16px; flex: none; color: var(--ink-soft); transition: transform 0.22s var(--ease); }
.mona-channel:hover .mona-channel__go{ transform: translateX(3px); color: var(--lagoon-ink); }
/* The one channel the client actually answers on carries the accent — and it
   is the only saturated block here, which is what makes it read as the action. */
.mona-channel--primary{ background: var(--sunset-strong); border-color: var(--sunset-strong); color: var(--paper); }
.mona-channel--primary:hover{ background: #B33210; border-color: #B33210; }
.mona-channel--primary .mona-channel__icon{ background: rgba(255,252,246,.22); color: var(--paper); }
.mona-channel--primary .mona-channel__body strong{ color: var(--paper); }
.mona-channel--primary .mona-channel__body small{ color: rgba(255,252,246,.86); }
.mona-channel--primary .mona-channel__go{ color: var(--paper); }

/* ---------------------------------------------------------------------- */
/* Factbox — the light "thông tin nhanh / thông tin liên hệ" panel on the   */
/* service-detail and contact pages.                                        */
/*                                                                          */
/* This used to be `.mona-hero__side`, borrowed from a dark hero component    */
/* and flipped to light with a dozen inline `style=` overrides on every      */
/* instance. It is its own component now, light by default, and it must NOT  */
/* be merged back into anything that lives on a dark section.                */
/* ---------------------------------------------------------------------- */
.mona-factbox{
	background: var(--paper); color: var(--ink);
	border: 1px solid var(--line-on-light); border-radius: var(--radius-l); padding: 26px;
}
.mona-factbox__title{
	font-family: var(--f-body); font-weight: 700; font-size: 13px;
	text-transform: uppercase; letter-spacing: .1em; color: var(--lagoon-ink); margin-bottom: 16px;
}
.mona-factbox__row{
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 12px 0; border-top: 1px solid var(--line-on-light);
}
.mona-factbox__row:first-of-type{ border-top: none; }
.mona-factbox__row b{ font-family: var(--f-display); font-size: 21px; font-weight: 600; color: var(--ink); }
.mona-factbox__row span{ font-size: 13px; color: var(--ink-soft); text-align: right; max-width: 20ch; }
.mona-factbox .mona-btn{ width: 100%; margin-top: 18px; }
.mona-factbox .mona-footer__contact{ color: var(--ink-soft); }
/* Text variant — the panel that replaced the contact form. Same container as
   the info panel beside it on purpose: they are siblings in one row, so they
   should read as one family rather than two different kinds of card. */
.mona-factbox__heading{ font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2vw, 25px); line-height: 1.24; margin-top: 16px; color: var(--ink); }
.mona-factbox__text{ margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.mona-factbox__foot{ margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-on-light); font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* Reel — the real Facebook video, given its own room instead of being      */
/* squeezed into the hero beside the headline                               */
/* ---------------------------------------------------------------------- */
.mona-reel{ display: grid; grid-template-columns: 0.62fr 1fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.mona-reel__frame{
	position: relative; border-radius: var(--radius-l); overflow: hidden;
	aspect-ratio: 9/16; max-height: 560px; margin-inline: auto; width: 100%;
	box-shadow: var(--shadow-card); border: 1px solid var(--line-on-dark);
	background: var(--deep-tide-2);
}
.mona-reel__frame iframe{ width: 100%; height: 100%; border: 0; display: block; }
.mona-reel__badge{
	position: absolute; top: 14px; left: 14px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(8,30,32,.62); backdrop-filter: blur(6px); color: var(--paper);
	font-size: 12px; font-weight: 700; padding: 7px 12px 7px 8px; border-radius: var(--radius-full);
}
.mona-reel__badge svg{ width: 14px; height: 14px; color: var(--sunset); }
.mona-reel__meta{ display: flex; align-items: center; gap: 20px; margin-top: 26px; flex-wrap: wrap; }
.mona-reel__count{ font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: var(--lagoon); }
.mona-reel__count span{ display: block; font-family: var(--f-body); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--paper-soft); margin-top: 6px; }
@media (max-width: 860px){ .mona-reel{ grid-template-columns: 1fr; } .mona-reel__frame{ max-width: 320px; } }

/* ---------------------------------------------------------------------- */
/* Reasons — "Vì sao chọn Whale Park" as a photographic band.               */
/*                                                                          */
/* This was four text cards on flat sand: no image, no story, and the fifth */
/* card grid on the page. It is now one photograph carrying four columns    */
/* split by hairlines — no card, so it cannot read as another grid, and the */
/* band earns its place on the page. No section on this site ships as text  */
/* on an empty background.                                                  */
/* ---------------------------------------------------------------------- */
/* .mona-photoband is the reusable part: any section that would otherwise be text
   on empty sand gets a photograph and this wash instead. It must be declared
   after .mona-section — both are single class selectors, so source order is what
   decides which background wins. */
.mona-photoband{ position: relative; isolation: isolate; overflow: hidden; background: var(--deep-tide-2); color: var(--paper); }
.mona-photoband__bg{ position: absolute; inset: 0; z-index: -2; }
.mona-photoband__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.mona-photoband::after{
	content: ''; position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(180deg, rgba(6,26,28,.92) 0%, rgba(6,26,28,.78) 42%, rgba(6,26,28,.94) 100%),
		linear-gradient(114deg, rgba(6,26,28,.62) 0 36%, rgba(6,26,28,.2) 36.4% 70%, rgba(6,26,28,.58) 70.4% 100%);
}
/* Stat tiles are opaque deep-tide by default, which would hide the photograph
   behind them. On a photoband they go translucent so the image reads through. */
.mona-photoband .mona-stats{ background: rgba(255,252,246,.16); }
.mona-photoband .mona-stat{ background: rgba(6,26,28,.58); backdrop-filter: blur(3px); }
.mona-reasons__row{
	display: grid; grid-template-columns: repeat(4, 1fr);
	margin-top: clamp(36px, 5vw, 60px); gap: 0;
}
.mona-reason{ padding: 4px clamp(16px, 2.2vw, 30px); border-left: 1px solid var(--line-on-dark); }
.mona-reason:first-child{ border-left: none; padding-left: 0; }
.mona-reason:last-child{ padding-right: 0; }
.mona-reason__icon{ display: block; width: 30px; height: 30px; color: var(--lagoon); margin-bottom: 16px; }
.mona-reason h3{ font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.24; color: var(--paper); }
.mona-reason p{ margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--paper-soft); }
@media (max-width: 860px){
	.mona-reasons__row{ grid-template-columns: 1fr; }
	.mona-reason{ border-left: none; border-top: 1px solid var(--line-on-dark); padding: 22px 0; }
	.mona-reason:first-child{ border-top: none; padding-top: 0; }
}

/* ---------------------------------------------------------------------- */
/* Showcase — event highlights as photographs with the label on the image.  */
/* Deliberately NOT a fourth photo-over-text card grid: the row is offset   */
/* so the eye reads it as a hung set of prints, not another 4-up block.     */
/* ---------------------------------------------------------------------- */
.mona-showcase{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: 44px; align-items: start; }
.mona-showcase__item:nth-child(even){ margin-top: clamp(24px, 4vw, 58px); }
.mona-showcase__link{
	position: relative; display: block; overflow: hidden; border-radius: var(--radius-m);
	aspect-ratio: 4/5; background: var(--deep-tide-2);
}
.mona-showcase__link img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mona-showcase__link:hover img{ transform: scale(1.07); }
.mona-showcase__link::after{
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(6,26,28,0) 38%, rgba(6,26,28,.86) 100%);
}
.mona-showcase__cap{
	position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px;
	font-family: var(--f-display); font-weight: 700; font-size: clamp(15px, 1.5vw, 19px);
	line-height: 1.24; color: var(--paper);
}
.mona-showcase__cap span{
	display: block; font-family: var(--f-body); font-size: 11px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase; color: var(--lagoon); margin-bottom: 7px;
}
@media (max-width: 860px){
	.mona-showcase{ grid-template-columns: repeat(2, 1fr); }
	.mona-showcase__item:nth-child(even){ margin-top: clamp(18px, 6vw, 34px); }
}

/* ---------------------------------------------------------------------- */
/* Filtered empty state                                                     */
/*                                                                          */
/* .claude/rules/dynamic-content.md § 5: an empty result names the filter    */
/* that emptied it and offers a way out. A filter tab that silently produces */
/* a blank strip reads as a broken page, not as "no posts here yet".         */
/* ---------------------------------------------------------------------- */
.mona-empty{
	grid-column: 1 / -1; margin-top: 32px; padding: clamp(30px, 4vw, 52px);
	text-align: center; background: var(--paper); border: 1px dashed var(--line-on-light);
	border-radius: var(--radius-l);
}
.mona-empty svg{ width: 34px; height: 34px; color: var(--lagoon-ink); margin: 0 auto 14px; }
.mona-empty h2{ font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 2vw, 23px); color: var(--ink); }
.mona-empty p{ margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; margin-inline: auto; }
.mona-empty .mona-btn{ margin-top: 20px; }

/* ---------------------------------------------------------------------- */
/* Pagination                                                               */
/* ---------------------------------------------------------------------- */
/* paginate_links() emits `.current`, `.dots`, `.prev` and `.next` — core's class
   names, not the design's. Styling `.is-current` (which core never emits) left the
   active page looking identical to the inactive ones, and `.dots` inherited the
   42px circle so the ellipsis sat in its own button-shaped box. */
.mona-pagination{ display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; }
.mona-pagination a, .mona-pagination span{
	width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px; color: var(--ink-soft);
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.mona-pagination a:hover{ background: var(--sand-2); color: var(--deep-tide); }
.mona-pagination a:focus-visible{ outline: 2px solid var(--lagoon-ink); outline-offset: 2px; }
.mona-pagination .current{ background: var(--deep-tide); color: var(--paper); }
/* The ellipsis is a label, not a control: no circle, no hover target. */
.mona-pagination .dots{ width: auto; min-width: 20px; background: none; color: var(--ink-soft); letter-spacing: .08em; }
.mona-pagination .prev, .mona-pagination .next{ border: 1px solid var(--line); }
.mona-pagination .prev:hover, .mona-pagination .next:hover{ border-color: transparent; }
.mona-pagination svg{ width: 16px; height: 16px; }

/* ---------------------------------------------------------------------- */
/* Misc utility                                                            */
/* ---------------------------------------------------------------------- */
.mona-mt-0{ margin-top: 0 !important; }
.mona-badge{
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
	background: var(--sand-2); color: var(--ink-soft); padding: 6px 12px; border-radius: var(--radius-full);
}
.mona-prose{ font-size: 16px; line-height: 1.75; color: var(--ink-soft); max-width: 72ch; }
.mona-prose h2{ font-family: var(--f-display); font-size: 26px; color: var(--ink); margin-top: 36px; margin-bottom: 12px; }
.mona-prose h2:first-child{ margin-top: 0; }
.mona-prose p{ margin: 0 0 18px; }
.mona-prose p:last-child{ margin-bottom: 0; }
.mona-prose strong{ color: var(--ink); }

/* minmax(0, 1fr), not 1fr.
   `1fr` is shorthand for `minmax(auto, 1fr)`, and `auto` floors the track at its
   content's min-content width. The contact page puts a Google Maps <iframe> in
   this grid, and an iframe's intrinsic width is 300px — plus the factbox's 26px
   padding either side the track refused to shrink below 382px inside a 335px
   content box, so /lien-he/ scrolled sideways at 390px (401 against a 390
   viewport) while every other page fit. minmax(0, …) lets the track shrink and
   the width:100% children follow it down. */
.mona-two-col{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 900px){ .mona-two-col{ grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.mona-two-col--reverse{ direction: rtl; }
.mona-two-col--reverse > *{ direction: ltr; }

.mona-map-frame{
	border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card);
	aspect-ratio: 16/11; background: var(--paper);
}
/* The embed carries no width/height attributes, so without this it falls back to
   the 300x150 iframe default and ignores the framed box around it. */
.mona-map-frame iframe{ display: block; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------- */
/* Header search trigger + overlay                                          */
/*                                                                          */
/* The trigger stays visible at every width — including below 1010px where   */
/* the nav collapses to the burger. Search is the one control a visitor      */
/* looks for on a phone, and burying it inside the drawer is why people      */
/* conclude a site has no search.                                            */
/* ---------------------------------------------------------------------- */
.mona-searchbtn{
	flex: none; width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,252,246,0.10); color: var(--paper);
	transition: background 0.22s var(--ease), transform 0.22s var(--ease);
}
.mona-searchbtn:hover{ background: rgba(255,252,246,0.2); transform: translateY(-1px); }
.mona-searchbtn:focus-visible{ outline: 2px solid var(--lagoon); outline-offset: 2px; }
.mona-searchbtn svg{ width: 19px; height: 19px; }

.mona-search{ position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; }
.mona-search[hidden]{ display: none; }
.mona-search__scrim{
	position: absolute; inset: 0; background: rgba(8,30,32,0.62); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity 0.24s var(--ease);
}
.mona-search.is-open .mona-search__scrim{ opacity: 1; }
.mona-search__panel{
	position: relative; width: min(680px, calc(100% - 32px)); margin-top: clamp(70px, 12vh, 140px);
	background: var(--paper); border-radius: var(--radius-l); padding: clamp(24px, 3vw, 36px);
	box-shadow: 0 30px 70px -24px rgba(8,30,32,0.55);
	opacity: 0; transform: translateY(-14px); transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.mona-search.is-open .mona-search__panel{ opacity: 1; transform: none; }
.mona-search__close{
	position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; color: var(--ink-soft);
}
.mona-search__close:hover{ background: var(--sand); color: var(--deep-tide); }
.mona-search__close svg{ width: 17px; height: 17px; }
.mona-search__k{
	font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--lagoon-ink); margin: 0 0 12px;
}
.mona-search__form{ display: flex; gap: 10px; align-items: center; }
/* The field, not the form, is the icon's containing block — the form wraps at
   phone width and an icon anchored to it lands in the gap between the rows. */
.mona-search__field{ position: relative; flex: 1 1 auto; min-width: 0; display: block; }
.mona-search__icon{
	position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
	width: 19px; height: 19px; color: var(--ink-soft); pointer-events: none;
}
.mona-search__form input[type="search"]{
	width: 100%; padding: 14px 16px 14px 44px;
	border: 1px solid var(--line); border-radius: var(--radius-full);
	background: var(--paper); font: inherit; font-size: 16px; color: var(--ink);
	/* Safari on iOS draws its own rounded box and a clear button on type=search,
	   which fights the pill and pushes the placeholder off-centre. */
	-webkit-appearance: none; appearance: none;
}
.mona-search__form input[type="search"]::-webkit-search-decoration,
.mona-search__form input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; }
.mona-search__form input[type="search"]:focus{
	outline: none; border-color: var(--lagoon-ink); box-shadow: 0 0 0 4px rgba(19,118,104,.14);
}
.mona-search__form .mona-btn{ flex: none; }
.mona-search__suggest{
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin-top: 16px; font-size: 13px; color: var(--ink-soft);
}
.mona-search__suggest a{
	padding: 5px 12px; border-radius: var(--radius-full);
	background: var(--sand); color: var(--deep-tide); font-weight: 600;
}
.mona-search__suggest a:hover{ background: var(--sand-2); }

@media (max-width: 560px){
	/* Sits higher: the on-screen keyboard takes the bottom half, so a panel
	   centred for desktop ends up half-covered the moment the field is focused. */
	.mona-search__panel{ margin-top: 64px; padding: 20px 16px 22px; border-radius: var(--radius-m); }
	.mona-search__close{ top: 10px; right: 10px; width: 30px; height: 30px; }
	.mona-search__close svg{ width: 15px; height: 15px; }
	.mona-search__k{ margin-bottom: 10px; }

	/* Submit drops below the field — side by side leaves the input too narrow to
	   read a typed query back. */
	.mona-search__form{ flex-wrap: wrap; gap: 8px; }
	.mona-search__field{ flex: 1 0 100%; }
	.mona-search__form input[type="search"]{ padding: 12px 14px 12px 42px; }
	.mona-search__form .mona-btn{ width: 100%; justify-content: center; padding-block: 12px; }

	/* One scrolling row rather than a wrapped block: four chips over two lines
	   pushed the panel taller than the space left above the keyboard. */
	.mona-search__suggest{
		flex-wrap: nowrap; overflow-x: auto; margin-top: 14px;
		padding-bottom: 4px; scrollbar-width: none;
	}
	.mona-search__suggest::-webkit-scrollbar{ display: none; }
	.mona-search__suggest > span{ flex: none; }
	.mona-search__suggest a{ flex: none; white-space: nowrap; }

	.mona-searchbtn{ width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce){
	.mona-search__panel, .mona-search__scrim{ transition: none; }
}

/* MONA.Media design signature. The official lockup is dark ink + purple, so it
   rides a light chip rather than being recoloured to survive the dark footer.
   Deliberately quieter than the copyright line above it: a credit, not a band. */
/* The credit strip is LIGHT, and that is what makes the rest of it simple.
   mona-copyright.png is MONA's own asset and it is drawn for a light
   background: the wordmark is #303030 and the panda is black line work on a
   white face. Everything else tried here was an attempt to put that artwork on
   a dark band — a white chip behind it, then a recoloured copy of it — and both
   were solving the wrong problem. Giving the strip the background the asset
   expects means the file ships byte-for-byte as supplied, with no filter, no
   recolour and no derived copy to drift from the original. */
.mona-sign{ display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
            padding: 14px 20px; background: var(--paper);
            font-size: 11.5px; letter-spacing: .01em; color: var(--ink-soft); }
.mona-sign span{ opacity: .8; }
/* min-height keeps a 24px tap target: the lockup renders only 18px tall. */
.mona-sign a{ display: inline-flex; align-items: center; min-height: 24px;
              line-height: 0; opacity: .9; transition: opacity .25s var(--ease); }
.mona-sign a:hover{ opacity: 1; }
/* 134x18 is the source's own 7.42 ratio (267x36), so nothing is stretched, and
   it leaves 2x pixel density for a retina screen without upscaling the file. */
.mona-sign img{ display: block; width: 134px; height: 18px; }

/* MONA SEO renders the breadcrumb (.mseo-breadcrumb) and feeds the same data to
   its BreadcrumbList schema. Style its markup rather than rebuilding the trail —
   a second trail would desync from the schema. */
.mseo-breadcrumb{ display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--paper-soft); margin-bottom: 20px; }
.mseo-breadcrumb ol{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mseo-breadcrumb li{ margin: 0; }
/* Same 24px floor as the footer link. The breadcrumb is MONA SEO's markup, so
   this styles what the plugin emits rather than rebuilding the trail — a second
   trail would desync from its BreadcrumbList schema. */
.mseo-breadcrumb a{ color: inherit; display: inline-flex; align-items: center; min-height: 26px; }
.mseo-breadcrumb a:hover{ color: var(--lagoon); }
.mseo-crumb-sep{ opacity: .55; }

/* Search form — used by search.php, 404.php and anywhere get_search_form() runs. */
.mona-searchform{ display: flex; gap: 8px; max-width: 420px; margin-inline: auto; }
.mona-searchform input[type="search"]{
	flex: 1; min-width: 0; padding: 13px 18px; border-radius: var(--radius-full);
	border: 1px solid var(--line-on-light); background: var(--paper); color: var(--ink); font-size: 15px;
}
.mona-searchform input[type="search"]:focus{ outline: none; border-color: var(--lagoon-ink); box-shadow: 0 0 0 4px rgba(47,217,196,.18); }
.mona-searchform button{
	flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0;
	background: var(--sunset-strong); color: var(--paper);
	display: flex; align-items: center; justify-content: center;
}
.mona-searchform button:hover{ background: #B33210; }
.mona-searchform svg{ width: 18px; height: 18px; }

/* ---------------------------------------------------------------------- */
/* Author box — MONA standard "Về tác giả" card                            */
/*                                                                          */
/* Tinted panel rather than a bordered card: it sits between the article    */
/* body and the prev/next nav, and a second hairline box there reads as an  */
/* extra section boundary. The portrait keeps its ring at every size — it   */
/* is what makes the block read as a person and not as a callout.           */
/* ---------------------------------------------------------------------- */
.mona-abx{
	display: flex; align-items: center; gap: clamp(18px, 2.6vw, 34px);
	margin-top: clamp(34px, 4vw, 52px);
	padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 38px);
	border-radius: var(--radius-l);
	background: var(--sand);
}
.mona-abx__av{ flex: none; width: 130px; height: 130px; border-radius: 50%; padding: 4px;
               background: linear-gradient(150deg, var(--lagoon) 0%, var(--sunset) 100%); }
.mona-abx__av img{ display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
                   background: var(--paper); }
.mona-abx__body{ min-width: 0; }
.mona-abx__k{ font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
              color: var(--lagoon-ink); margin: 0 0 6px; }
.mona-abx__name{ font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px);
                 line-height: 1.2; color: var(--deep-tide); margin: 0 0 6px; }
.mona-abx__name a{ color: inherit; }
.mona-abx__name a:hover{ color: var(--lagoon-ink); }
.mona-abx__role{ font-weight: 700; font-size: 15px; color: var(--lagoon-ink); margin: 0 0 12px; }
.mona-abx__desc{ font-size: 15px; line-height: 1.75; color: var(--ink); overflow-wrap: anywhere; }
.mona-abx__desc p{ margin: 0 0 10px; }
.mona-abx__desc p:last-child{ margin-bottom: 0; }

@media (max-width: 640px){
	/* Stacked, portrait centred — side by side leaves the text a 40-character
	   measure on a phone, which is narrower than the article it sits under. */
	.mona-abx{ flex-direction: column; align-items: flex-start; text-align: left; }
	.mona-abx__av{ width: 96px; height: 96px; }
}

/* ---------------------------------------------------------------------- */
/* Slider — scroll-snap track, no carousel library                          */
/*                                                                          */
/* The track is a plain overflow-x container, so it scrolls by touch,        */
/* trackpad and keyboard with no JavaScript. main.js adds arrows and dots on */
/* top; if it never runs, the component degrades to a swipeable row rather   */
/* than to a broken one. .mona-slider__head keeps "Xem tất cả" and the       */
/* arrows on one line at the right of the section head.                      */
/* ---------------------------------------------------------------------- */
.mona-slider__head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.mona-slider{ position: relative; margin-top: clamp(22px, 2.6vw, 34px); }
.mona-slider__track{
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 26px) / 3);
	gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	/* Room for the card shadow and the focus ring, clawed back with a negative
	   margin so the first card still lines up with the container edge. */
	padding: 6px 4px 18px; margin-inline: -4px;
	scrollbar-width: none;
}
.mona-slider__track::-webkit-scrollbar{ display: none; }
.mona-slider__track:focus-visible{ outline: 2px solid var(--lagoon-ink); outline-offset: 2px; border-radius: var(--radius-m); }
.mona-slider__item{ scroll-snap-align: start; min-width: 0; }
/* The card must fill its column and all cards must end level, whatever the
   title length — the same min-height contract the static grid has. */
.mona-slider__item > *{ height: 100%; }

.mona-slider__arrows{ display: flex; align-items: center; gap: 8px; }
.mona-slider__arrow{
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center; color: var(--deep-tide);
	background: var(--paper); transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.mona-slider__arrow:hover:not(:disabled){ background: var(--sand-2); }
.mona-slider__arrow:focus-visible{ outline: 2px solid var(--lagoon-ink); outline-offset: 2px; }
/* Disabled rather than hidden: a control that disappears at the end of the track
   shifts everything beside it. */
.mona-slider__arrow:disabled{ opacity: .34; cursor: default; }
.mona-slider__arrow svg{ width: 17px; height: 17px; }

.mona-slider__dots{ display: flex; justify-content: center; gap: 1px; margin-top: 10px; }
/* The dot is 7px of ink inside a 24px target. padding + background-clip keeps the
   visible mark small while the tappable area meets WCAG 2.5.8 — a 7px control is
   a coin-flip for a thumb, and these dots sit under a slider people swipe. */
.mona-slider__dot{
	width: 7px; height: 7px; box-sizing: content-box;
	padding: 9px; background-clip: content-box;
	border-radius: 50%; background-color: var(--line);
	transition: width 0.24s var(--ease), background-color 0.24s var(--ease);
}
.mona-slider__dot.is-active{ width: 22px; border-radius: var(--radius-full); background-color: var(--lagoon-ink); }
.mona-slider__dot:focus-visible{ outline: 2px solid var(--lagoon-ink); outline-offset: -4px; border-radius: var(--radius-full); }

@media (max-width: 900px){
	.mona-slider__track{ grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
}
@media (max-width: 620px){
	/* Just under a full width, so the next card peeks in and the row reads as
	   scrollable without needing the arrows. */
	.mona-slider__track{ grid-auto-columns: 82%; gap: 16px; }
	.mona-slider__arrows{ display: none; }
}
@media (prefers-reduced-motion: reduce){
	.mona-slider__track{ scroll-behavior: auto; }
}