/* =====================================================================
   FJP 1000 OKU — stylesheet

   CSS thuần, viết tay hoàn toàn. Không còn Tailwind, không cần bước
   biên dịch: sửa thẳng file này.

   Mục lục
     1.  Biến (bảng màu, font)
     2.  Reset + nền tảng
     3.  Tiện ích chung & nút
     4.  Hoạt ảnh (keyframes + lớp .anim-*)
	5.  Hoạ tiết SVG dùng chung (mây, cành anh đào, sen, quạt...)
     6.  Hero: header, sân khấu, thùng rượu, thẻ gửi lời chúc
     7.  Danmaku (lời chúc bay)
     8.  Quiz + mốc phát triển
     9.  Tường lời chúc
     10. Footer + modal thưởng
     11. Hiệu ứng cuộn trang & tương tác toàn trang
     12. Thanh cuộn & prefers-reduced-motion
   ===================================================================== */



/* ═══════════════ 0 · REMOVE GLOBAL CSS ═══════════════ */
#inghe-widget {
  display: none;
}
/* ═══════════════ 1 · BIẾN ═══════════════ */

@font-face {
	font-family: 'Be Vietnam Pro';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/BeVietnamPro-Regular.woff2') format('woff2'),
		url('../fonts/BeVietnamPro-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Be Vietnam Pro';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/BeVietnamPro-ExtraBold.woff2') format('woff2'),
		url('../fonts/BeVietnamPro-ExtraBold.ttf') format('truetype');
}

@font-face {
	font-family: 'FJP Card Vietnam';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/BROmegaVN/BROmegaVN-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'FJP Card Vietnam';
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url('../fonts/BROmegaVN/BROmegaVN-Bold.otf') format('opentype');
}

@font-face {
	font-family: 'FJP Card Vietnam';
	font-style: normal;
	font-weight: 800 900;
	font-display: swap;
	src: url('../fonts/BROmegaVN/BROmegaVN-Black.otf') format('opentype');
}

:root {
	--vermilion: #1f6f9e;
	--vermilion-dark: #164e73;
	--vermilion-light: #54a4c7;
	--gold: #f3c84b;
	--gold-light: #ffe89a;
	--gold-deep: #b77b12;
	--gold-ink: #4e3d14;
	--teal: #278ba3;
	--maroon: #15476a;
	--fptblue: #0b4da2;

	--washi: #f1f8fc;
	--washi-card: #ffffff;
	--washi-sand: #e5f1f7;
	--washi-field: #f8fcff;

	--ink: #173b56;
	--ink-soft: #47677d;
	--ink-faint: #7894a6;
	--ink-deep: #102d46;
	--ink-wine: #1c4a69;
	--ink-amber: #604b1d;

	--line: #c5dce8;
	--line-soft: #d9e8ef;
	--line-warm: #e7cf8e;

	--font-display: 'Noto Sans JP', sans-serif;
	--font-body: 'Noto Sans JP', sans-serif;

	--shell: 1400px;
}

/* ═══════════════ 2 · RESET + NỀN TẢNG ═══════════════ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	background-color: var(--washi);
	color: var(--ink);
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
canvas {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

ul,
ol {
	list-style: none;
}

h1,
h2,
h3 {
	font-size: inherit;
	font-weight: inherit;
}

[hidden] {
	display: none;
}

::selection {
	background: var(--vermilion);
	color: #fff;
}

.page {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh);
	background: var(--washi);
}

.page__main {
	flex: 1 0 auto;
}

/* Khung nội dung tối đa, dùng lại ở nhiều section */
.shell {
	position: relative;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: 1rem;
}

@media (min-width: 640px) {
	.shell {
		padding-inline: 1.5rem;
	}
}

/* ═══════════════ 3 · TIỆN ÍCH CHUNG & NÚT ═══════════════ */

.hidden {
	display: none !important;
}

/* Lớp nền, hoạ tiết: không chắn chuột, không cho bôi đen */
.decor-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Bật/tắt theo khổ màn hình cho các hoạ tiết */
.only-sm,
.only-md,
.only-lg {
	display: none;
}

@media (min-width: 640px) {
	.only-sm {
		display: block;
	}
}

@media (min-width: 768px) {
	.only-md {
		display: block;
	}
}

@media (min-width: 1024px) {
	.only-lg {
		display: block;
	}
}

/* Thẻ nền kem, viền nâu ấm */
.ref-card {
	background: var(--washi-card);
	border: 2px solid var(--line);
	box-shadow:
		0 10px 28px -8px rgba(150, 85, 25, 0.22),
		0 2px 0 rgba(255, 255, 255, 0.7) inset;
}

/* Thẻ kính mờ (tường lời chúc) */
.glass-card {
	background: rgba(255, 251, 242, 0.82);
	backdrop-filter: blur(8px);
	border: 1.5px solid rgba(228, 203, 164, 0.85);
	box-shadow: 0 8px 24px -10px rgba(150, 85, 25, 0.25);
}

/* Hai lớp giấy xanh băng xếp chồng sau thẻ gửi lời chúc */
.paper-stack {
	position: relative;
}

.paper-stack::before,
.paper-stack::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: -1;
}

.paper-stack::before {
	background: #d7eaf3;
	transform: rotate(2.2deg) translate(10px, 8px);
}

.paper-stack::after {
	background: #a9d2e2;
	transform: rotate(4.4deg) translate(20px, 16px);
}

/* Nút chính màu son */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 800;
	text-align: center;
}

.btn--vermilion {
	background: linear-gradient(
		180deg,
		var(--vermilion-light) 0%,
		var(--vermilion) 55%,
		var(--vermilion-dark) 100%
	);
	color: #fff;
	box-shadow:
		0 8px 20px -6px rgba(17, 66, 99, 0.32),
		0 1px 0 rgba(255, 255, 255, 0.35) inset;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		filter 0.18s ease;
}

.btn--vermilion:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -6px rgba(17, 66, 99, 0.38);
}

.btn--vermilion:active {
	transform: translateY(0);
}

.btn__icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* ═══════════════ 4 · HOẠT ẢNH ═══════════════ */

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes sway {
	0%,
	100% {
		transform: rotate(-2.5deg);
	}
	50% {
		transform: rotate(2.5deg);
	}
}

@keyframes sparkle {
	0%,
	100% {
		opacity: 0.35;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.15);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes popIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Lời chúc bay: từ mép phải màn hình sang hẳn bên trái */
/* Quãng đường = 100vw + đúng bề ngang mục, khớp với công thức tính
   thời lượng trong app.js (quãng đường / tốc độ). */
@keyframes danmaku {
	from {
		transform: translateX(calc(100vw));
	}
	to {
		transform: translateX(-100%);
	}
}

/* Thùng rượu */
@keyframes sakeSlosh {
	0%,
	100% {
		transform: translateX(-16px);
	}
	50% {
		transform: translateX(16px);
	}
}

@keyframes sakeSloshB {
	0%,
	100% {
		transform: translateX(13px);
	}
	50% {
		transform: translateX(-13px);
	}
}

@keyframes caskSheen {
	0% {
		transform: translateX(-40px) skewX(-10deg);
		opacity: 0;
	}
	25% {
		opacity: 0.55;
	}
	75% {
		opacity: 0.55;
	}
	100% {
		transform: translateX(430px) skewX(-10deg);
		opacity: 0;
	}
}

@keyframes sakeFizz {
	0% {
		transform: scale(0.25);
		opacity: 0;
	}
	30% {
		opacity: 0.9;
	}
	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

@keyframes burstFlash {
	0% { opacity: 0.9; }
	100% { opacity: 0; }
}

/* ── Rót rượu ────────────────────────────────────────────────────────
   Dòng chảy là một <path> thon vẽ sẵn, bị che bởi một <rect> nằm trong
   <clipPath>. Trượt cái rect đó xuống là ra trọn vòng đời của cú rót:
   đầu dòng chạy xuống → thân giữ nguyên → đuôi nhấc lên. Làm kiểu này
   thay vì scaleY thì phần thon không bị kéo méo.
   Mốc %: 0–18 rơi (nhanh dần), 18–62 rót đều, 62–100 dứt dòng. */

@keyframes pourReveal {
	0% {
		transform: translateY(-100px);
		animation-timing-function: cubic-bezier(0.45, 0.05, 0.75, 0.6);
	}
	18% {
		transform: translateY(0);
		animation-timing-function: linear;
	}
	62% {
		transform: translateY(0);
		animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
	}
	100% {
		transform: translateY(100px);
	}
}

/* Bình tokkuri nghiêng xuống rồi dựng lại. Xoay quanh chính miệng bình
   (308,60) nên vòi không bị xê dịch khỏi đầu dòng chảy. Dương = dựng
   đứng hơn, vì thân bình đã xoay sẵn -108° trong thuộc tính transform. */
@keyframes pourVessel {
	0% {
		transform: rotate(20deg) translate(7px, -11px);
		opacity: 0;
	}
	9% {
		opacity: 1;
	}
	14% {
		transform: rotate(0) translate(0, 0);
		opacity: 1;
	}
	62% {
		transform: rotate(0) translate(0, 0);
		opacity: 1;
	}
	100% {
		transform: rotate(20deg) translate(7px, -11px);
		opacity: 0;
	}
}

/* Giọt đầu dòng, chạy trước một nhịp rồi tan vào mặt rượu.
   Đi theo cung nghiêng của dòng nên phải dịch cả X lẫn Y. Timing để
   linear, gia tốc rơi nằm ngay trong khoảng cách giữa các mốc %. */
@keyframes pourBead {
	0% {
		transform: translate(0, 0) scale(1.05);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	25% {
		transform: translate(-5.2px, 5.9px) scale(1);
	}
	50% {
		transform: translate(-16.7px, 23.5px) scale(0.88);
	}
	75% {
		transform: translate(-25px, 52.9px) scale(0.74);
	}
	82% {
		opacity: 1;
	}
	100% {
		transform: translate(-28px, 94px) scale(0.6);
		opacity: 0;
	}
}

/* Sóng loang liên tục suốt lúc dòng còn chảy */
@keyframes pourRipple {
	0% {
		transform: scale(0.16);
		opacity: 0;
	}
	22% {
		opacity: 0.65;
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}

/* ── Giọt bắn ─────────────────────────────────────────────────────
   Quỹ đạo ném xiên tách làm hai lớp lồng nhau: lớp ngoài chạy ngang
   đều (splashX), lớp trong vọt lên rồi rơi xuống (splashY). Nhân hai
   lại ra parabol. Mỗi giọt chỉ cần đặt --sx (tầm xa) và --sy (đỉnh
   vọt) trong style, không phải viết keyframes riêng. */

@keyframes splashX {
	0% {
		transform: translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		transform: translateX(var(--sx, 0));
		opacity: 0;
	}
}

@keyframes splashY {
	0% {
		transform: translateY(0);
		animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1);
	}
	38% {
		transform: translateY(var(--sy, -30px));
		animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4);
	}
	100% {
		transform: translateY(14px);
	}
}

/* Bụi nước rớt khỏi thân dòng, và mấy giọt rớt muộn lúc dứt dòng */
@keyframes pourSpray {
	0% {
		transform: translate(0, 0) scale(0.9);
		opacity: 0;
	}
	15% {
		opacity: 0.9;
	}
	100% {
		transform: translate(var(--spx, 0), var(--spy, 60px)) scale(0.45);
		opacity: 0;
	}
}

.anim-float-slow {
	animation: float 6s ease-in-out infinite;
}
.anim-float-mid {
	animation: float 4.5s ease-in-out infinite;
}
.anim-sway {
	animation: sway 5s ease-in-out infinite;
	transform-origin: top;
}
.anim-sparkle {
	animation: sparkle 2.4s ease-in-out infinite;
}
.anim-fade {
	animation: fadeIn 0.35s ease-out both;
}
.anim-pop {
	animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Ambience liên tục trong SVG thùng rượu / hồ sen */
.sake-crest {
	animation: sakeSlosh 5.5s ease-in-out infinite;
}
.sake-crest-b {
	animation: sakeSloshB 8s ease-in-out infinite;
}
.cask-sheen {
	animation: caskSheen 7s ease-in-out infinite;
}

.sake-fizz {
	transform-box: fill-box;
	transform-origin: center;
	animation: sakeFizz 3.6s ease-out infinite;
}

.burst-flash {
	animation: burstFlash 0.75s ease-out both;
}

/* Thời lượng tổng khớp với POUR.total trong app.js; --pk là POUR_K */
.pour-reveal {
	animation: pourReveal calc(1.5s * var(--pk, 1)) forwards;
}

.pour-bead {
	transform-box: fill-box;
	transform-origin: center;
	animation: pourBead calc(0.34s * var(--pk, 1)) linear forwards;
}

/* both, không phải forwards: có animation-delay nên trong lúc chờ phải
   giữ khung 0% (trong suốt), nếu không vòng sóng sẽ đứng hiện sẵn. */
.pour-ripple {
	transform-box: fill-box;
	transform-origin: center;
	animation: pourRipple calc(1.15s * var(--pk, 1)) ease-out both;
}

.splash {
	animation: splashX var(--sd, 0.6s) linear var(--sdel, 0s) both;
}

.splash__arc {
	animation: splashY var(--sd, 0.6s) linear var(--sdel, 0s) both;
}

.pour-spray {
	transform-box: fill-box;
	transform-origin: center;
	animation: pourSpray 0.6s cubic-bezier(0.4, 0, 0.8, 0.5) both;
}

/* view-box để transform-origin tính theo toạ độ viewBox của thùng rượu */
.pour-vessel {
	transform-box: view-box;
	transform-origin: 308px 60px;
	animation: pourVessel calc(1.5s * var(--pk, 1)) cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* ── Kagami-biraki: niêm phong, đập nắp, khai thùng ─────────────────
   Nghi thức đập NẮP thùng, không phải phá thùng. Nắp là ellipse phủ
   lòng thùng, vỡ thành 6 múi hình quạt xoay quanh tâm nắp (280,150).
   Mốc thời gian khớp với SMASH trong app.js. */

/* Nắp hạ xuống đậy miệng thùng khi đạt 100% */
@keyframes lidSeal {
	0% {
		transform: translateY(-26px) scale(0.86);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Búa kizuchi bổ xuống rồi nảy lên và rút khỏi khung */
@keyframes malletSwing {
	0% {
		transform: rotate(36deg);
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	26% {
		transform: rotate(0);
	}
	42% {
		transform: rotate(12deg);
	}
	70% {
		transform: rotate(18deg);
		opacity: 1;
	}
	100% {
		transform: rotate(40deg);
		opacity: 0;
	}
}

/* Vết nứt lan từ tâm ra rìa nắp */
@keyframes crackDraw {
	from {
		stroke-dashoffset: 170;
	}
	to {
		stroke-dashoffset: 0;
	}
}

/* Mảnh nắp văng ra vị trí nghỉ; easing vọt quá một nhịp rồi lắng lại */
@keyframes shardFly {
	from {
		transform: rotate(0) translate(0, 0);
	}
	to {
		transform: rotate(var(--rot, 0)) translate(var(--tx, 0), var(--ty, 0));
	}
}

/* Vài mảnh rơi hẳn xuống chân thùng. Khác shardFly ở chỗ transform-origin
   đặt tại trọng tâm của chính mảnh đó (gán inline), nên nó lộn nhào quanh
   mình nó rồi rơi, chứ không quét một cung quanh tâm nắp.
   Mốc %: 0–58 rơi nhanh dần, 58–80 chạm đất, 80–89 nảy, 89–100 nằm yên. */
@keyframes shardDrop {
	0% {
		transform: translate(0, 0) rotate(0) scale(1);
		animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.45);
	}
	58% {
		transform: translate(calc(var(--tx) * 0.72), calc(var(--ty) * 0.62))
			rotate(calc(var(--rot) * 0.6)) scale(0.9);
		animation-timing-function: cubic-bezier(0.35, 0.55, 0.6, 1);
	}
	80% {
		transform: translate(var(--tx), var(--ty))
			rotate(calc(var(--rot) * 0.94)) scale(0.78);
		animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1);
	}
	89% {
		transform: translate(var(--tx), calc(var(--ty) - 11px))
			rotate(calc(var(--rot) * 1.06)) scale(0.78);
		animation-timing-function: cubic-bezier(0.5, 0, 0.85, 1);
	}
	100% {
		transform: translate(var(--tx), var(--ty)) rotate(var(--rot))
			scale(0.78);
	}
}

/* Bóng đổ dưới đất, chỉ hiện đúng lúc mảnh chạm xuống */
@keyframes shardShadowIn {
	0%,
	72% {
		opacity: 0;
		transform: scale(0.35);
	}
	84% {
		opacity: 0.3;
		transform: scale(1.08);
	}
	100% {
		opacity: 0.24;
		transform: scale(1);
	}
}

/* Cả thùng rung khi búa chạm */
@keyframes caskShake {
	0%,
	100% {
		transform: translate(0, 0) rotate(0);
	}
	12% {
		transform: translate(-7px, 3px) rotate(-0.7deg);
	}
	28% {
		transform: translate(6px, -2px) rotate(0.6deg);
	}
	44% {
		transform: translate(-4px, 2px) rotate(-0.4deg);
	}
	62% {
		transform: translate(3px, -1px) rotate(0.25deg);
	}
	80% {
		transform: translate(-1.5px, 1px) rotate(-0.1deg);
	}
}

@keyframes raysBloom {
	0% {
		transform: scale(0.2);
		opacity: 0;
	}
	35% {
		opacity: 0.95;
	}
	100% {
		transform: scale(1);
		opacity: 0.7;
	}
}

/* Trạng thái cuối: tia vàng thở nhẹ, giữ cho hero còn sống sau nghi thức */
@keyframes raysBreathe {
	0%,
	100% {
		transform: scale(0.97);
		opacity: 0.5;
	}
	50% {
		transform: scale(1.04);
		opacity: 0.82;
	}
}

.cask-lid {
	transform-box: view-box;
	transform-origin: 280px 150px;
}

.cask-lid--seal {
	animation: lidSeal 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.cask-mallet {
	transform-box: view-box;
	transform-origin: 412px 52px;
	animation: malletSwing 1s cubic-bezier(0.5, 0.02, 0.7, 0.6) both;
}

.lid-crack {
	stroke-dasharray: 170;
	animation: crackDraw 0.2s ease-out both;
}

.lid-shard {
	transform-box: view-box;
	transform-origin: 280px 150px;
}

.lid-shard--fly {
	animation: shardFly 0.9s cubic-bezier(0.22, 1.4, 0.45, 1) both;
}

/* Vị trí nghỉ, không hoạt ảnh — dùng khi tải lại trang lúc đã khai */
.lid-shard--rest {
	transform: rotate(var(--rot, 0)) translate(var(--tx, 0), var(--ty, 0));
}

/* Mảnh rơi xuống đất: hai class nên thắng .lid-shard--fly/--rest ở trên.
   transform-origin do app.js gán inline theo trọng tâm từng mảnh. */
.lid-shard--fall.lid-shard--fly {
	animation: shardDrop 1.35s linear both;
}

.lid-shard--fall.lid-shard--rest {
	transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0))
		scale(0.78);
}

.shard-ground {
	transform-box: fill-box;
	transform-origin: center;
}

.shard-ground--fly {
	animation: shardShadowIn 1.35s linear both;
}

.cask-rays {
	transform-box: view-box;
	transform-origin: 280px 150px;
}

.cask-rays--bloom {
	animation: raysBloom 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.cask-rays--idle {
	animation: raysBreathe 5s ease-in-out infinite;
}

.cask-art.is-shaking {
	animation: caskShake 0.5s ease-out both;
}

/* Đã khai: thêm quầng vàng, chữ 1000 OKU đổi sang gradient rực hơn */
.cask-art.is-open {
	filter: drop-shadow(0 22px 28px rgba(122, 60, 20, 0.28))
		drop-shadow(0 0 26px rgba(240, 180, 41, 0.5));
}

.cask-art.is-open #cask-type-text text {
	fill: url(#cask-type-open);
}

/* ── Nút đập nắp + trạng thái kết thúc ── */

.btn--gold {
	background: linear-gradient(
		180deg,
		var(--gold-light) 0%,
		var(--gold) 52%,
		var(--gold-deep) 100%
	);
	color: var(--gold-ink);
	box-shadow:
		0 8px 20px -6px rgba(217, 148, 20, 0.6),
		0 1px 0 rgba(255, 255, 255, 0.5) inset;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		filter 0.18s ease;
}

.btn--gold:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -6px rgba(217, 148, 20, 0.7);
}

.btn--gold:active {
	transform: translateY(0);
}

@keyframes smashPulse {
	0%,
	100% {
		box-shadow:
			0 8px 20px -6px rgba(217, 148, 20, 0.6),
			0 0 0 0 rgba(240, 180, 41, 0.55);
	}
	60% {
		box-shadow:
			0 8px 20px -6px rgba(217, 148, 20, 0.6),
			0 0 0 14px rgba(240, 180, 41, 0);
	}
}

.smash-btn {
	position: relative;
	z-index: 10;
	max-width: 100%;
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 9999px;
	font-size: 11.5px;
	letter-spacing: 0.025em;
	animation: smashPulse 1.9s ease-out infinite;
}

.smash-btn__icon {
	flex-shrink: 0;
	font-size: 1rem;
}

.smash-btn__label {
	min-width: 0;
}

.ceremony-done {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	max-width: 100%;
	margin-top: 1.25rem;
	padding: 0.75rem 1.25rem;
	border: 1.5px solid var(--gold-deep);
	border-radius: 9999px;
	background: rgba(255, 251, 242, 0.9);
	color: var(--gold-ink);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: 0.025em;
	text-align: center;
}

.ceremony-done__icon {
	flex-shrink: 0;
	font-size: 1rem;
}

/* ── CÔNG CỤ TEST — xoá cùng khối trong index.html khi lên production ── */

.devtools {
	position: fixed;
	left: 0.75rem;
	bottom: 0.75rem;
	z-index: 70;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: rgba(255, 251, 242, 0.82);
	backdrop-filter: blur(6px);
	box-shadow: 0 4px 10px -4px rgba(150, 85, 25, 0.3);
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.devtools:hover {
	opacity: 1;
}

.devtools__label {
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.12em;
	color: var(--ink-faint);
}

.devtools__btn {
	padding: 0.125rem 0.4rem;
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: var(--washi-sand);
	color: var(--ink-amber);
	font-size: 10px;
	font-weight: 800;
	line-height: 1.6;
	transition: background-color 0.2s ease;
}

.devtools__btn:hover {
	background: #fff0c5;
}

/* ═══════════════ 5 · HOẠ TIẾT SVG DÙNG CHUNG ═══════════════ */

.seigaiha__svg {
	display: block;
}

/* --- Mây cuộn --- */
.cloud {
	position: absolute;
}

.cloud--quiz-l {
	top: -1rem;
	left: 6%;
	width: 190px;
	opacity: 0.45;
}

.cloud--quiz-r {
	top: -1.5rem;
	right: 8%;
	width: 170px;
	opacity: 0.45;
}

/* --- Cành anh đào --- */
.branch {
	position: absolute;
}

.branch--wall-l {
	top: 4rem;
	left: -1.5rem;
	width: 170px;
	opacity: 0.5;
}

.branch--wall-r {
	bottom: 2.5rem;
	right: -1.5rem;
	width: 170px;
	opacity: 0.5;
}

/* --- Sen: cụm, lá, hoa, nụ --- */
.lotus-cluster {
	position: absolute;
}

.lotus,
.lotus-pad,
.lotus-bud {
	position: absolute;
}

/* biến thể "relative" (hoa nằm trong luồng của cụm) */
.lotus--flow {
	position: relative;
}

/* tường lời chúc */
.lotus--wall {
	bottom: 1rem;
	left: 8%;
	width: 80px;
	opacity: 0.6;
}

/* --- Dấu lấp lánh ở footer --- */
.sparkle {
	position: absolute;
}

/* --- Lồng đèn trong journey/footer --- */
.lantern {
	position: absolute;
	filter: drop-shadow(0 6px 14px rgba(243, 200, 75, 0.34));
}

/* --- Con dấu vàng --- */
.seal--modal {
	margin-inline: auto;
}

.seal--timeline {
	filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04))
		drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}

@media (min-width: 640px) {
	.seal--timeline {
		width: 96px;
		height: 96px;
	}
}

/* ═══════════════ 6 · HERO ═══════════════ */

.hero-wrap {
	position: relative;
}

.hero {
	position: relative;
	overflow: hidden;
}

.hero__backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

.hero__backdrop::after {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
		radial-gradient(circle at 82% 18%, rgba(255, 232, 154, 0.9) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 74% 57%, rgba(255, 255, 255, 0.65) 0 1px, transparent 2px),
		radial-gradient(circle at 24% 68%, rgba(255, 232, 154, 0.7) 0 1px, transparent 2px);
	content: '';
	opacity: 0.52;
	animation: hero-sparkle 5.5s ease-in-out infinite alternate;
}

@keyframes hero-sparkle {
	from { opacity: 0.28; }
	to { opacity: 0.68; }
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 44%;
}

.hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 49, 72, 0.16), transparent 38%, rgba(13, 49, 72, 0.12));
}

.hero__content {
	position: relative;
	z-index: 30;
	width: 100%;
	max-width: 1640px;
	margin-inline: auto;
	padding: 84px 1rem 2.5rem;
}

/* --- Header --- */
.site-header {
	position: relative;
	z-index: 40;
	width: 100%;
	padding: 0.5rem 0.75rem 0;
}

.site-header__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	max-width: var(--shell);
	margin-inline: auto;
}

.user-chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.625rem;
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: rgba(255, 251, 242, 0.9);
	backdrop-filter: blur(4px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.user-chip__avatar {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--vermilion);
}

.user-chip__name {
	display: inline;
	font-size: 0.6875rem;
	font-weight: 800;
	color: var(--ink);
}

.user-chip__branch {
	display: none;
	font-size: 0.625rem;
	color: var(--ink-soft);
}

.header-identity {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	min-width: 0;
}

.header-identity-slot,
.mini-bar__identity {
	min-width: 0;
	flex-shrink: 0;
}

.header-login {
	min-height: 2.125rem;
	color: var(--ink);
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: none;
}

.header-home {
	display: grid;
	place-items: center;
	flex: 0 0 2.125rem;
	width: 2.125rem;
	height: 2.125rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: rgba(255, 251, 242, 0.95);
	color: var(--ink);
}

.header-home svg {
	width: 1.125rem;
	height: 1.125rem;
}

.account-menu {
	position: relative;
	min-width: 0;
}

.account-menu summary {
	cursor: pointer;
	list-style: none;
}

.account-menu summary::-webkit-details-marker {
	display: none;
}

.account-menu .user-chip__name {
	max-width: 9.375rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-menu__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: min(280px, calc(calc(100vw) - 72px));
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	overflow-wrap: anywhere;
}

.account-menu__fullname {
	font-size: 0.875rem;
}

.account-menu__department {
	font-size: 0.75rem;
	color: var(--ink-soft);
}

.account-menu__logout {
	margin-top: 0.25rem;
	padding-top: 0.625rem;
	border-top: 1px solid var(--line);
	font-size: 0.8125rem;
	color: var(--vermilion);
}

@media (max-width: 639px) {
	.site-header__inner {
		flex-wrap: wrap;
	}
	.account-menu .user-chip__name {
		max-width: 110px;
	}
}

/* --- Logo ở chân trang --- */
.brand-unit {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.brand-unit--fpt {
	gap: 0.25rem;
}

.brand-mark {
	width: 1.5rem;
	height: 1.5rem;
}

.brand-mark--sm {
	width: 1rem;
	height: 1.25rem;
}

.brand-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.025em;
	color: #1b2a4a;
}

.brand-name--fpt {
	font-size: 1.125rem;
	color: var(--fptblue);
}

/* --- Nút phải header --- */
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-left: auto;
}

.fjp-language-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	padding: 0.1875rem;
	border: 1px solid var(--line-warm);
	border-radius: 9999px;
	background: rgba(255, 251, 242, 0.92);
	white-space: nowrap;
}

.fjp-language-switch a {
	padding: 0.3rem 0.45rem;
	border-radius: 9999px;
	color: var(--ink-soft);
	font-size: 0.68rem;
	font-weight: 800;
	text-decoration: none;
}

.fjp-language-switch a[aria-current="true"] {
	background: var(--vermilion);
	color: #fff8ec;
}

.fjp-share > .fjp-language-switch {
	position: absolute;
	top: 14px;
	right: 14px;
}

.fjp-share {
	position: relative;
}

.pill-toggle {
	display: none;
	align-items: center;
	gap: 0.25rem;
	padding: 0.375rem 0.625rem;
	border-radius: 9999px;
	border: 1px solid var(--line-warm);
	background: #fff0c5;
	color: var(--ink-amber);
	font-size: 11px;
	font-weight: 800;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.pill-toggle__icon {
	width: 0.75rem;
	height: 0.75rem;
	color: var(--vermilion);
}

.icon-toggle {
	padding: 0.375rem;
	border-radius: 9999px;
	border: 1px solid var(--line-warm);
	background: #fff0c5;
	color: var(--vermilion);
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.icon-toggle__icon {
	width: 0.875rem;
	height: 0.875rem;
}

/* trạng thái "tắt" dùng chung cho hai nút */
.pill-toggle.is-off,
.icon-toggle.is-off {
	background: rgba(255, 251, 242, 0.85);
	border-color: var(--line);
	color: var(--ink-faint);
}

.pill-toggle.is-off .pill-toggle__icon {
	color: inherit;
}

/* Vùng chạm tối thiểu ~44px cho các nút/liên kết nhỏ trong header, không đổi
   kích thước hiển thị (WCAG 2.5.5 Target Size). */
.header-home,
.header-login,
.pill-toggle,
.icon-toggle,
.fjp-language-switch a {
	position: relative;
}

.header-home::before,
.header-login::before,
.pill-toggle::before,
.icon-toggle::before,
.fjp-language-switch a::before {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: max(100%, 44px);
	height: max(100%, 44px);
}

/* --- Tiêu đề hero ---
   Chữ trần trên nền kem giữa một hero đầy hoạ tiết thì chìm, nên đặt
   lên một tấm biển washi: nền kem hơi trong, viền nâu ấm cùng ngôn ngữ
   với .ref-card, hai đường chỉ vàng trên dưới theo lối áp phích Nhật,
   và một con dấu gia huy gác lên mép trên. */
.hero__titles {
	max-width: 1000px;
	margin: 0 auto 1.25rem;
	text-align: center;
}

.hero__brand {
	width: 66px;
	height: 42px;
	margin: 0 auto 0.75rem;
	object-fit: contain;
	filter: drop-shadow(0 2px 5px rgba(10, 37, 56, 0.35));
}

.title-plaque {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin-top: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.title-plaque .hero__title,
.title-plaque .hero__subtitle {
	position: relative;
	z-index: 2;
}

.hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.18;
	font-size: 34px;
	color: #fff;
	text-shadow: 0 3px 12px rgba(10, 37, 56, 0.55);
}

/* Hiện không dùng: dòng phụ đề đã được gỡ khỏi tấm biển. Giữ lại để
   nếu muốn trả lại thì chỉ cần thêm dòng <p> vào là chạy. */
.hero__subtitle {
	margin-top: 0.25rem;
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: 0.04em;
	font-size: 21px;
	color: #fff;
	text-shadow: 0 2px 9px rgba(10, 37, 56, 0.55);
}

.hero__date {
	margin-top: 0.5rem;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-shadow: 0 2px 8px rgba(10, 37, 56, 0.6);
}

.hero__date sup {
	font-size: 0.65em;
}

/* --- Sân khấu: thùng rượu + thẻ gửi lời chúc --- */
.stage {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: start;
}

.stage__cask {
	order: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
}

.stage__wish {
	order: 2;
	min-width: 0;
	display: flex;
	justify-content: center;
}

/* --- Thùng rượu --- */
.cask-box {
	position: relative;
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	aspect-ratio: auto;
}

.cask-art {
	position: relative;
	z-index: 10;
	width: min(100%, 328px);
	filter: drop-shadow(0 22px 28px rgba(122, 60, 20, 0.28));
}

/* --- Thước đo mực sake --- */
.sake-ruler {
	position: absolute;
	top: 40%;
	right: -0.25rem;
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.375rem;
	border: 1px solid rgba(201, 163, 117, 0.7);
	border-radius: 0.75rem;
	background: rgba(255, 248, 235, 0.92);
	box-shadow: 0 4px 12px rgba(122, 60, 20, 0.18);
}

.sake-ruler__label {
	font-size: 9px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	white-space: nowrap;
	color: var(--ink-wine);
}

.sake-ruler__body {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.sake-ruler__tube {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 0.5rem;
	height: 8rem;
	padding: 1.5px;
	border: 1px solid #c9a375;
	border-radius: 9999px;
	background: var(--washi-card);
	overflow: hidden;
}

.sake-ruler__fill {
	width: 100%;
	border-radius: 9999px;
	background: linear-gradient(
		to top,
		var(--vermilion),
		var(--gold) 50%,
		var(--gold-light)
	);
	transition: height 0.7s ease;
}

.sake-ruler__ticks {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 8rem;
	padding-block: 0.125rem;
}

.sake-ruler__tick {
	display: block;
	height: 1.5px;
	background: rgba(138, 90, 59, 0.7);
}

.sake-ruler__tick--long {
	width: 0.625rem;
}
.sake-ruler__tick--short {
	width: 0.375rem;
}

.sake-ruler__pct {
	padding: 0.1875rem 0.5rem;
	border-radius: 9999px;
	background: var(--vermilion);
	box-shadow: 0 2px 6px rgba(160, 40, 30, 0.35);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.2;
	white-space: nowrap;
	color: #fff;
}

/* --- Thẻ gửi lời chúc --- */
.wish-card-stack {
	position: relative;
	width: 100%;
	max-width: 420px;
	border-radius: 16px;
}

.wish-card-stack::before,
.wish-card-stack::after {
	display: none;
}

.wish-card {
	position: relative;
	padding: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 16px 38px rgba(20, 57, 82, 0.18);
	backdrop-filter: blur(12px);
}

.wish-card__head {
	margin-bottom: 1rem;
	text-align: center;
}

.wish-card__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.025em;
	color: var(--ink-deep);
}

.wish-card__greeting {
	margin-top: 0.25rem;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-soft);
}

.wish-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.wish-input {
	width: 100%;
	padding: 0.75rem;
	border: 1.5px solid var(--line);
	border-radius: 1rem;
	background: var(--washi-field);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.625;
	color: var(--ink);
	resize: none;
	outline: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.wish-input::placeholder {
	color: var(--ink-faint);
}

.wish-input:focus {
	border-color: var(--vermilion);
	box-shadow: 0 0 0 2px rgba(31, 111, 158, 0.15);
}

.wish-name-field {
	margin-bottom: -0.5rem;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 700;
}

.wish-name-input {
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 0.75rem;
	border: 1.5px solid var(--line);
	border-radius: 0.75rem;
	background: var(--washi-field);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
}

.wish-name-input:focus {
	border-color: var(--vermilion);
	outline: none;
	box-shadow: 0 0 0 2px rgba(31, 111, 158, 0.15);
}

.wish-name-note {
	margin: -0.35rem 0 0;
	color: var(--ink-soft);
	font-size: 11px;
	line-height: 1.4;
}

.wish-login-required {
	margin: 1rem 0 0;
	color: var(--ink-soft);
	font-size: 13px;
	text-align: center;
}

.wish-login-required a {
	color: var(--vermilion);
	font-weight: 800;
}

.ceremony-wait {
	position: relative;
	z-index: 10;
	max-width: 28rem;
	margin: 1.25rem auto 0;
	padding: 0.8rem 1.1rem;
	border: 1px solid rgba(180, 143, 87, 0.65);
	border-radius: 0.75rem;
	background: rgba(255, 251, 242, 0.9);
	color: var(--ink-wine);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.campaign-countdown {
	position: relative;
	z-index: 10;
	width: min(100%, 27.5rem);
	margin: 0.75rem auto 0;
	padding: 0.4rem 0.75rem 0.35rem;
	border: 1px solid rgba(9, 42, 66, 0.16);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 8px 24px rgba(5, 26, 42, 0.2);
	backdrop-filter: blur(8px);
	color: #17364b;
	text-shadow: none;
	text-align: center;
}

.campaign-countdown__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1.35;
	color: #17364b;
}

.campaign-countdown__units {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
	padding-top: 0.45rem;
}

.campaign-countdown__units::before {
	position: absolute;
	top: 0;
	right: 6%;
	left: 6%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold-deep) 18%, var(--gold-light) 50%, var(--gold-deep) 82%, transparent);
	box-shadow: 0 0 8px rgba(243, 200, 75, 0.45);
	content: '';
}

.campaign-countdown__unit {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
}

.campaign-countdown__unit::before {
	position: absolute;
	top: -0.75rem;
	left: calc(50% - 1px);
	width: 2px;
	height: 0.75rem;
	background: var(--gold-deep);
	content: '';
}

.campaign-countdown__lantern {
	position: relative;
	display: grid;
	width: 100%;
	height: 4.5rem;
	place-items: center;
	border: 1px solid #c5d7e1;
	border-radius: 10px;
	background: #f1f7fa;
	box-shadow: none;
}

.campaign-countdown__lantern::before,
.campaign-countdown__lantern::after {
	position: absolute;
	right: 22%;
	left: 22%;
	height: 4px;
	border-radius: 3px;
	background: var(--ink-wine);
	content: '';
}

.campaign-countdown__lantern::before { top: -3px; }
.campaign-countdown__lantern::after { bottom: -3px; }

.campaign-countdown__units strong {
	color: var(--vermilion-dark);
	font-family: var(--font-display);
	font-size: 2.125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.campaign-countdown__unit small {
	margin-top: 0.55rem;
	font-size: 0.625rem;
	font-weight: 700;
	color: var(--ink-soft);
}

.campaign-countdown__units strong.mc-tick {
	animation: campaign-countdown-tick 0.28s ease-out;
}

@keyframes campaign-countdown-tick {
	from { opacity: 0.5; transform: translateY(3px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.campaign-countdown__units strong.mc-tick { animation: none; }
}

@media (max-width: 380px) {
	.campaign-countdown { padding: 0.9rem 0.75rem; }
	.campaign-countdown__units { gap: 0.5rem; }
	.campaign-countdown__lantern { height: 3.875rem; }
	.campaign-countdown__units strong { font-size: 1.75rem; }
}

.guest-header-label {
	color: var(--ink-wine);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.guest-header-label {
		font-size: 14px;
	}
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

/* Thay form lời chúc sau khi đã gửi: thiệp cảm ơn + nút xem thiệp */
.wish-thanks {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.wish-thanks__card {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--washi-sand);
	box-shadow: 0 0 0 1px rgba(74, 42, 28, 0.1), 0 10px 22px rgba(74, 42, 28, 0.18);
	color: var(--ink-faint);
	font-size: 0.8125rem;
	text-align: center;
}

.card-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.wish-thanks__card svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Thiệp đang bay tới: giữ chỗ nhưng chưa hiện */
.wish-thanks__card.is-awaiting {
	box-shadow: inset 0 0 0 2px rgba(217, 148, 20, 0.45);
}

.wish-thanks__card.is-awaiting svg {
	visibility: hidden;
}

.wish-flying-card {
	position: fixed;
	inset: auto;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--washi-sand);
	box-shadow: 0 10px 26px rgba(74, 42, 28, 0.35), 0 0 22px rgba(247, 201, 78, 0.8);
	pointer-events: none;
	will-change: transform, opacity;
}

/* Khung xem trước trong modal chờ thiệp bay tới */
.card-preview.is-awaiting {
	box-shadow: inset 0 0 0 2px rgba(217, 148, 20, 0.45);
}

.card-preview.is-awaiting svg {
	visibility: hidden;
}

.wish-flying-card svg {
	display: block;
	width: 100%;
	height: auto;
}

.chip {
	padding: 0.375rem 0.625rem;
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	background: var(--washi-sand);
	color: var(--ink-amber);
	font-size: 11px;
	font-weight: 700;
	transition: background-color 0.2s ease;
}

.chip:hover {
	background: #fff0c5;
}

.wish-submit {
	width: 100%;
	padding-block: 0.875rem;
	border-radius: 1rem;
	font-size: 0.875rem;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.wish-sent {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.75rem;
	padding: 0.625rem;
	border: 1px solid #a7f3d0;
	border-radius: 0.75rem;
	background: #ecfdf5;
	color: #065f46;
	font-size: 11.5px;
	font-weight: 700;
}

.wish-sent__icon {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: #059669;
}

/* ═══════════════ 7 · DANMAKU ═══════════════ */

.danmaku-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 20;
}

.danmaku-item {
	position: absolute;
	left: 0;
	will-change: transform;
	white-space: nowrap;
	pointer-events: auto;
	cursor: default;
	animation-name: danmaku;
	animation-timing-function: linear;
	/* Chạy đúng một lượt rồi app.js gỡ khỏi DOM khi animationend. forwards
     để nó đứng yên ngoài mép trái, không nháy về chỗ cũ trước khi gỡ. */
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/* Dừng CẢ LỚP chứ không riêng mục đang trỏ: dừng mỗi một mục thì những
   mục sau trong cùng làn vẫn chạy và đuổi kịp nó. */
.danmaku-layer:hover .danmaku-item {
	animation-play-state: paused;
}

.danmaku-item__inner {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: rgba(255, 251, 242, 0.95);
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.danmaku-item__inner--sand {
	background: rgba(250, 240, 220, 0.95);
	border-color: #e0be8a;
}

.danmaku-item__inner--rose {
	background: rgba(255, 255, 255, 0.95);
	border-color: #f2c8cf;
}

.danmaku__avatar {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(31, 111, 158, 0.45);
}

.danmaku__event-icon {
	height: 1.35rem;
	width: auto;
	flex: 0 0 auto;
}

.danmaku__author {
	font-size: 14px;
	font-weight: 800;
	color: var(--ink);
}

.danmaku__branch {
	padding: 0.125rem 0.375rem;
	border-radius: 9999px;
	background: #f3e6ce;
	color: var(--ink-soft);
	font-size: 10px;
	font-weight: 600;
}

.danmaku__text {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-soft);
	white-space: nowrap;
}

.danmaku__sticker {
	font-size: 0.875rem;
}

/* ═══════════════ 8 · QUIZ + MỐC PHÁT TRIỂN ═══════════════ */

/* Nền xanh băng với đường đồng mức và ánh bình minh nhẹ */
.quiz-section {
	position: relative;
	padding-block: 2.75rem;
	overflow: clip;
	background-color: var(--washi);
	background-image:
		radial-gradient(ellipse at 50% 0, rgba(243, 200, 75, 0.14), transparent 46%),
		repeating-radial-gradient(ellipse at 100% 8%, transparent 0 34px, rgba(31, 111, 158, 0.075) 35px 36px, transparent 37px 58px);
	background-repeat: no-repeat;
	background-size: 100% 100%, 760px 520px;
	background-position: center top, right top;
}

.quiz-section::before,
.timeline-col.timeline-exhibit::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 180px;
	background-image:
		linear-gradient(180deg, rgba(243, 248, 250, 0.3), rgba(243, 248, 250, 0)),
		url('../images/background.webp');
	background-position: center, center 64%;
	background-size: cover;
	-webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
	content: '';
	opacity: 0.12;
	pointer-events: none;
}

.quiz-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.quiz-col,
.quiz-board-col {
	min-width: 0;
}

/* Tầng giấy xanh băng xếp chồng sau bảng để khối này nổi như thẻ gửi lời chúc */
.quiz-board-col {
	border-radius: 1.5rem;
	isolation: isolate;
}

.timeline-col {
	margin-top: 5rem;
	padding-top: 3.5rem;
	border-top: 1px solid var(--line);
}

.section-title {
	margin-bottom: 1.5rem;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--ink-deep);
}

.quiz-layout {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.omikuji {
	position: relative;
	flex-shrink: 0;
	display: none;
}

.omikuji__art {
	width: 150px;
}

.quiz-layout--no-start .omikuji {
	display: none;
}

.omikuji__sparkle {
	position: absolute;
	top: 0.5rem;
	right: -0.25rem;
}

.quiz-card {
	flex: 1;
	min-width: 0;
	padding: 1rem;
	border-radius: 1.5rem;
}

.quiz-brief {
	display: grid;
	overflow: hidden;
	margin: 0 0 1rem;
	border: 2px solid var(--line);
	border-radius: 1.5rem;
	background: var(--washi-card);
	box-shadow:
		0 10px 28px -8px rgba(150, 85, 25, 0.22),
		0 2px 0 rgba(255, 255, 255, 0.7) inset;
	color: var(--ink-soft);
	font-size: 0.75rem;
	line-height: 1.55;
}

.quiz-brief p { margin: 0; }

.quiz-brief__play { padding: 1rem 1.125rem; }

.quiz-brief__eyebrow {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--vermilion-dark);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.quiz-brief__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.quiz-brief__stats li {
	display: grid;
	align-content: start;
	justify-items: center;
	gap: 0.125rem;
	padding: 0.5rem 0.25rem;
	border: 1.5px dashed var(--line-warm);
	border-radius: 0.75rem;
	background: var(--washi-sand);
	font-size: 0.625rem;
	line-height: 1.25;
	text-align: center;
}

.quiz-brief__stats strong {
	color: var(--vermilion);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
}

.quiz-brief__details { margin-top: 0.375rem !important; }

/* Tấm gấm đỏ mận cùng gradient với title-plaque ở hero */
.quiz-brief__prizes {
	position: relative;
	padding: 1rem 1.125rem;
	color: #fff;
	background:
		radial-gradient(72% 118% at 50% 56%, rgba(7, 34, 54, 0.24), transparent 74%),
		radial-gradient(125% 150% at 50% -10%, rgba(130, 202, 229, 0.18), transparent 58%),
		linear-gradient(145deg, #1c6798 0%, #15527e 55%, #103d62 100%);
}

.quiz-brief__prizes::before {
	content: '';
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(255, 246, 226, 0.22);
	border-radius: 1rem;
	pointer-events: none;
}

.quiz-brief__prizes .quiz-brief__eyebrow { color: var(--gold-light); }

.quiz-brief__blossom {
	position: absolute;
	top: 0.75rem;
	right: 0.875rem;
	width: 2rem;
	height: 2rem;
	display: none;
}

.quiz-brief__daily {
	display: grid;
	gap: 0.125rem;
}

.quiz-brief__daily strong {
	color: var(--gold-light);
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.1;
	text-shadow: 0 1px 2px rgba(30, 6, 12, 0.55);
}

.quiz-brief__awards {
	margin-top: 0.5rem !important;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(255, 246, 226, 0.2);
	color: rgba(255, 246, 226, 0.88);
	font-size: 0.6875rem;
}

.quiz-brief__awards + .quiz-brief__awards {
	margin-top: 0.25rem !important;
	padding-top: 0;
	border-top: 0;
}

.quiz-rules-detail__title {
	margin: 0;
	color: var(--ink-deep);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.3;
}

.quiz-rules-detail__meta {
	display: grid;
	gap: 0.1875rem;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
	color: var(--ink-deep);
	font-weight: 700;
}

.quiz-rules-detail__group + .quiz-rules-detail__group {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--line-warm);
}

.quiz-rules-detail__head {
	margin: 0 0 0.5rem;
	color: var(--vermilion-dark);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.quiz-rules-detail__sub {
	margin: 0.75rem 0 0.25rem;
	color: var(--ink-deep);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 800;
}

.quiz-rules-detail__list,
.quiz-rules-detail ul ul {
	display: grid;
	gap: 0.1875rem;
	margin: 0;
	padding-left: 1rem;
}

.quiz-rules-detail ul ul { margin-top: 0.1875rem; }

.quiz-prize-structure {
	margin: 0 0 1rem;
	padding: 1rem 1.125rem;
	border: 2px solid var(--line);
	border-radius: 1.5rem;
	background: var(--washi-card);
	box-shadow: 0 10px 28px -8px rgba(150, 85, 25, 0.22);
	color: var(--ink-soft);
	font-size: 0.75rem;
	line-height: 1.55;
}

.quiz-prize-structure .quiz-rules-detail__head {
	column-span: all;
	font-size: 0.6875rem;
}

.quiz-prize-structure .quiz-rules-detail__sub {
	margin: 0.5rem 0 0.25rem;
	font-size: 0.8125rem;
	break-after: avoid;
}

.quiz-prize-structure .quiz-rules-detail__list {
	break-inside: avoid;
}

@media (min-width: 640px) {
	.quiz-prize-structure .quiz-rules-detail__group {
		column-count: 2;
		column-gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.quiz-col {
		display: flex;
		flex-direction: column;
		align-self: start;
	}

	.quiz-prize-structure {
		flex: 1;
	}
}

/* Từ 1024px, bảng xếp hạng giữ chiều cao tự nhiên, không kéo theo cột thể lệ */
@media (min-width: 1024px) {
	.quiz-board-col {
		align-self: start;
	}
}

.quiz-progress {
	position: relative;
	margin-bottom: 1rem;
}

.quiz-progress__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.375rem;
	font-size: 11px;
	font-weight: 800;
	color: var(--ink-amber);
}

.quiz-progress__reward {
	color: var(--vermilion);
}

.quiz-progress__track {
	height: 0.875rem;
	padding: 2px;
	border: 1px solid #dfc49b;
	border-radius: 9999px;
	background: #f3e6ce;
}

.quiz-progress__bar {
	height: 100%;
	border-radius: 9999px;
	background: linear-gradient(
		to right,
		var(--teal),
		var(--gold) 50%,
		var(--vermilion)
	);
	transition: width 0.5s ease;
}

/* --- Nội dung câu hỏi --- */
.quiz-question {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.quiz-q {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.375;
	color: var(--ink);
}

.quiz-q__num {
	margin-right: 0.25rem;
	font-weight: 900;
	color: var(--vermilion);
}

.quiz-options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.quiz-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem;
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	background: var(--washi-field);
	color: var(--ink);
	font-size: 12.5px;
	text-align: left;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease;
}

.quiz-option:hover:not(:disabled) {
	border-color: rgba(31, 111, 158, 0.55);
}

.quiz-option--picked {
	background: var(--washi-sand);
	border-color: var(--vermilion);
	color: var(--vermilion);
	font-weight: 700;
	box-shadow: 0 0 0 1px var(--vermilion);
}

.quiz-option--correct {
	background: #ecfdf5;
	border-color: #10b981;
	color: #065f46;
	font-weight: 700;
	box-shadow: 0 0 0 1px #34d399;
}

.quiz-option--wrong {
	background: #fef2f2;
	border-color: #f87171;
	color: #b91c1c;
	box-shadow: 0 0 0 1px #fca5a5;
}

.quiz-option__body {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}

.quiz-option__key {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 900;
}

.quiz-option__mark {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.quiz-option__mark--ok {
	color: #059669;
}
.quiz-option__mark--no {
	color: #ef4444;
}

.quiz-actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.25rem;
}

a.quiz-btn,
a.btn {
	text-decoration: none;
}

.quiz-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1.25rem;
	border-radius: 0.75rem;
	font-size: 0.75rem;
	font-weight: 800;
	transition: all 0.2s ease;
}

.quiz-btn__icon {
	width: 0.875rem;
	height: 0.875rem;
}

.quiz-btn--idle {
	background: #eadfc9;
	color: var(--ink-faint);
	cursor: not-allowed;
}

/* --- Xem lại đáp án --- */
.quiz-review {
	width: 100%;
	text-align: left;
}
.quiz-review__toggle {
	cursor: pointer;
	padding: 0.5rem 0;
	text-align: center;
	font-weight: 700;
	color: var(--vermilion);
}
.quiz-review__list {
	display: grid;
	gap: 0.5rem;
}
.quiz-review__item {
	padding: 0.5rem 0.75rem;
	border: 1px solid #fca5a5;
	border-radius: 0.5rem;
	background: #fef2f2;
}
.quiz-review__item--ok {
	border-color: #34d399;
	background: #ecfdf5;
}
.quiz-review__item summary {
	display: flex;
	gap: 0.5rem;
	cursor: pointer;
}
.quiz-review__status {
	flex-shrink: 0;
	font-weight: 900;
	color: #b91c1c;
}
.quiz-review__item--ok .quiz-review__status {
	color: #065f46;
}
.quiz-review__line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0.375rem 0 0;
}
.quiz-review__label {
	font-weight: 700;
}
.quiz-review__line--ok { color: #065f46; }
.quiz-review__line--no { color: #b91c1c; }

/* --- Màn hình kết quả --- */
.quiz-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding-block: 1rem;
	text-align: center;
}

.quiz-result__icon {
	width: 3.5rem;
	height: 3.5rem;
}

.quiz-result__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.quiz-result__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1rem;
	color: var(--ink);
}

.quiz-timer {
	margin: -0.25rem 0 0.875rem;
	color: var(--vermilion);
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	text-align: right;
}

.quiz-timer.is-urgent {
	color: #c7362e;
}

/* Countdown chung của cả lượt quiz */
.quiz-countdown {
	height: 6px;
	margin-bottom: 0.875rem;
	border-radius: 99px;
	background: rgba(31, 111, 158, 0.14);
	overflow: hidden;
}

.quiz-countdown__bar {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--gold), var(--vermilion));
	transform-origin: left center;
}

.quiz-step__hint {
	margin: 0.75rem 0 0;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	text-align: center;
}

.quiz-step__navigation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.875rem;
}

.quiz-step__navigation [data-quiz-nav="-1"] { justify-self: start; }
.quiz-step__navigation [data-quiz-nav="1"] { justify-self: end; }

.quiz-step__position {
	color: var(--ink-faint);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.quiz-step__submit {
	grid-column: 1 / -1;
	min-height: 2.5rem;
	border: 1px solid var(--vermilion);
	border-radius: 0.75rem;
	background: var(--vermilion);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 800;
	cursor: pointer;
}

.quiz-step__submit:hover:not(:disabled) { background: var(--vermilion-dark); }
.quiz-step__navigation button:disabled { opacity: 0.45; cursor: default; }

.quiz-question:disabled .quiz-option {
	cursor: wait;
	opacity: 0.7;
}

.quiz-result__eyebrow {
	margin: 0;
	color: var(--vermilion);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.quiz-result__score {
	font-family: var(--font-display);
	color: var(--ink-wine);
	line-height: 1;
}

.quiz-result__score strong { font-size: 3rem; }
.quiz-result__score span { font-size: 1.5rem; color: var(--ink-soft); }

.quiz-result__drops {
	margin: 0;
	color: var(--ink);
	font-weight: 700;
}

.quiz-result__drops strong {
	color: var(--vermilion);
	font-family: var(--font-display);
	font-size: 1.375rem;
}

.quiz-result__total {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.quiz-result__total strong { color: var(--ink); }

/* Link mời đồng đội */
.quiz-invite {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.75rem;
	border: 1px dashed var(--gold-deep);
	border-radius: 0.75rem;
	background: rgba(255, 251, 242, 0.9);
	text-align: left;
}

.quiz-invite__title {
	margin: 0 0 0.5rem;
	color: var(--ink-wine);
	font-weight: 800;
	font-size: 0.875rem;
}

.quiz-invite__row {
	display: flex;
	gap: 0.5rem;
}

.quiz-invite__url {
	flex: 1;
	min-width: 0;
	padding: 0.5rem 0.625rem;
	border: 1px solid #e4cba4;
	border-radius: 0.5rem;
	background: #fff;
	color: var(--ink);
	font-size: 0.8125rem;
}

.quiz-invite .quiz-btn { flex: none; }

@media (max-width: 479px) {
	.quiz-invite__row { flex-direction: column; }
}

.quiz-group__hint {
	margin: 0.5rem 0 0;
	color: var(--ink-soft);
	font-size: 0.75rem;
	line-height: 1.5;
}

.quiz-group__hint--warn {
	color: #b3261e;
	font-weight: 600;
}

.quiz-attempts {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: 0.5rem;
	text-align: center;
}

.quiz-group__cancel {
	margin-top: 0.5rem;
	padding: 0;
	background: none;
	color: var(--vermilion, #a82d27);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

/* Rời nhóm nằm bên phải khung, cách xa nút sao chép link để tránh bấm nhầm. */
.quiz-group__cancel--end {
	display: block;
	margin-left: auto;
}

/* Số thành viên là nút bấm: mũi tên ▾/▴ báo hiệu mở/đóng danh sách. */
.quiz-group__members-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.5rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--line, #e3d2c4);
	border-radius: 999px;
	background: #fff;
	color: var(--ink, #2b1d14);
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}

.quiz-group__members-toggle:focus-visible {
	outline: 2px solid var(--vermilion, #a82d27);
	outline-offset: 2px;
}

.quiz-group__chevron {
	color: var(--vermilion, #a82d27);
	font-size: 0.75rem;
	line-height: 1;
}

.quiz-group__members {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	max-width: 100%;
	text-align: left;
	font-size: 0.8125rem;
}

.quiz-group__members li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0;
	border-bottom: 1px dashed var(--line, #e3d2c4);
}

.quiz-group__members li span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.quiz-group__badge {
	padding: 0.05rem 0.4rem;
	border-radius: 4px;
	background: var(--vermilion, #a82d27);
	color: #fff;
	font-size: 0.6875rem;
	font-style: normal;
	font-weight: 700;
}

/* Chuông thông báo của trưởng nhóm: nằm cạnh nút nhạc trong header. Mục mới nền trắng, mục đã xem nền xám. */
.notif {
	position: relative;
}

.notif__badge {
	position: absolute;
	top: -0.4rem;
	right: -0.4rem;
	min-width: 1.0625rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: #d62f1f;
	color: #fff;
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1.0625rem;
	text-align: center;
	box-shadow: 0 0 0 2px #fff7e0;
	pointer-events: none;
}

.notif__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 60;
	width: min(22rem, calc(100vw - 1.5rem));
	max-height: min(26rem, 70vh);
	overflow-y: auto;
	padding: 0.5rem;
	border: 1px solid var(--line-warm);
	border-radius: 0.75rem;
	background: #f1efe9;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	color: var(--ink);
	text-align: left;
}

.notif__title {
	margin: 0.125rem 0.375rem 0.5rem;
	color: var(--ink-wine);
	font-size: 0.9375rem;
	font-weight: 800;
}

.notif__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.notif__item {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.5rem 0.625rem;
	border-radius: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.45;
}

.notif__item.is-new {
	background: #fff;
	color: var(--ink);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--vermilion, #a82d27);
}

.notif__item.is-seen {
	background: #e3e0d8;
	color: var(--ink-soft);
	font-weight: 500;
}

.notif__time {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--ink-soft);
}

.notif__empty {
	padding: 0.75rem 0.625rem;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	text-align: center;
}

.quiz-top__note--team {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.375rem 0.75rem;
}

.quiz-top__copy {
	flex: none;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--gold-deep);
	border-radius: 0.5rem;
	background: #fffbf2;
	color: var(--gold-ink);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 800;
	cursor: pointer;
}

.quiz-top__copy:hover {
	background: #fff;
}

/* Popup đồng ý tham gia nhóm từ link mời */
.group-join-dialog {
	width: min(100% - 2rem, 25rem);
	padding: 0;
	border: 1px solid rgba(122, 60, 20, 0.18);
	border-radius: 0.9rem;
	background: var(--washi-card);
	color: var(--ink);
	box-shadow: 0 20px 50px rgba(46, 24, 16, 0.3);
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.group-join-dialog::backdrop {
	background: rgba(46, 24, 16, 0.68);
}

.group-join-dialog__panel {
	padding: 1.4rem;
}

.group-join-dialog__panel h3,
.group-join-dialog__panel p {
	margin: 0;
}

.group-join-dialog__panel p {
	margin-top: 0.65rem;
	line-height: 1.55;
}

.group-join-dialog__name {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.group-join-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1.2rem;
}

.quiz-top__sub {
	display: block;
	color: var(--ink-soft);
	font-size: 0.6875rem;
	font-weight: 500;
}

/* Tổng giọt rượu Quiz dưới thùng */
.quiz-drops-counter {
	position: relative;
	z-index: 10;
	width: fit-content;
	max-width: 100%;
	margin: 0.75rem auto 0;
	padding: 0.375rem 1rem;
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: rgba(255, 251, 242, 0.94);
	box-shadow: 0 6px 16px -8px rgba(94, 32, 40, 0.45);
	color: var(--ink-wine);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

.quiz-drops-counter strong {
	color: var(--vermilion);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

.quiz-gate {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 0.25rem 0 0.5rem;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.quiz-gate p {
	margin: 0;
}

.quiz-form {
	display: grid;
	gap: 1rem;
}

.quiz-resume-note {
	margin: 0 0 0.75rem;
	padding: 0.55rem 0.7rem;
	border-left: 2px solid var(--gold-deep);
	background: var(--washi-sand);
	color: var(--ink-soft);
	font-size: 11px;
	line-height: 1.5;
}

.quiz-question {
	min-width: 0;
	margin: 0;
	padding: 0 0 0.875rem;
	border: 0;
	border-bottom: 1px solid var(--line);
}

.quiz-question legend {
	width: 100%;
	margin-bottom: 0.625rem;
}

.quiz-question .quiz-option {
	cursor: pointer;
}

.quiz-question .quiz-option[aria-pressed="true"] {
	background: var(--washi-sand);
	border-color: var(--vermilion);
	color: var(--vermilion);
	font-weight: 700;
	box-shadow: 0 0 0 1px var(--vermilion);
}

.quiz-form .quiz-actions {
	position: sticky;
	bottom: 0;
	padding: 0.75rem 0 0.25rem;
	background: var(--washi-field);
}

.quiz-form .quiz-btn:disabled {
	background: #eadfc9;
	color: var(--ink-faint);
	cursor: not-allowed;
}

.quiz-leaderboard {
	min-width: 0;
	overflow: hidden;
	border: 2px solid var(--line);
	border-radius: 1.5rem;
	background: var(--washi-card);
	box-shadow:
		0 10px 28px -8px rgba(150, 85, 25, 0.22),
		0 2px 0 rgba(255, 255, 255, 0.7) inset;
}

.quiz-leaderboard #quiz-board { padding: 0.5rem 1rem 1rem; }

.quiz-board-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 16rem;
	text-align: center;
}

.quiz-leaderboard__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	background:
		radial-gradient(72% 118% at 50% 56%, rgba(7, 34, 54, 0.24), transparent 74%),
		radial-gradient(125% 150% at 50% -10%, rgba(130, 202, 229, 0.18), transparent 58%),
		linear-gradient(145deg, #1c6798 0%, #15527e 55%, #103d62 100%);
	border-bottom: 2px solid var(--gold);
}

.quiz-leaderboard__head::before {
	content: '';
	position: absolute;
	inset: 4px;
	border: 1px solid rgba(255, 246, 226, 0.22);
	border-radius: 1.1rem 1.1rem 0.4rem 0.4rem;
	pointer-events: none;
}

.quiz-leaderboard__head h3 {
	margin: 0;
	color: #fff6e2;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
	text-shadow: 0 1px 2px rgba(30, 6, 12, 0.55);
	text-transform: uppercase;
}

.quiz-leaderboard__tabs {
	display: inline-flex;
	align-items: flex-end;
	gap: 0.5rem;
}

.quiz-tab-group {
	display: grid;
	gap: 0.1875rem;
	justify-items: start;
}

.quiz-tab-group__label {
	padding-left: 0.25rem;
	color: rgba(255, 246, 226, 0.78);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.quiz-tab-group__tabs {
	display: inline-flex;
	gap: 0.125rem;
	padding: 0.1875rem;
	border: 1px solid rgba(240, 180, 41, 0.55);
	border-radius: 0.625rem;
	background: rgba(60, 14, 24, 0.35);
}

.quiz-tab {
	position: relative;
	min-height: 2rem;
	padding: 0.375rem 0.625rem;
	border-radius: 0.375rem;
	color: rgba(255, 246, 226, 0.82);
	font-size: 0.6875rem;
	font-weight: 800;
}

.quiz-tab::before {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: max(100%, 44px);
	height: 44px;
}

.quiz-tab.is-active {
	background: linear-gradient(180deg, var(--gold-light), var(--gold));
	color: var(--ink-deep);
}

.quiz-top__note {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	border: 1.5px dashed var(--gold-deep);
	border-radius: 0.75rem;
	background: linear-gradient(180deg, #fff3cf, #ffe6a6);
	color: var(--gold-ink);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 800;
	text-align: center;
}

.quiz-top {
	display: grid;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quiz-top__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.625rem;
	padding: 0.4375rem 0.75rem 0.4375rem 0.5rem;
	border: 1.5px solid var(--line-soft);
	border-radius: 0.75rem;
	background: var(--washi-field);
}

.quiz-top__rank {
	display: grid;
	place-items: center;
	min-width: 2rem;
	height: 2rem;
	padding-inline: 0.375rem;
	border: 1.5px solid var(--line-warm);
	border-radius: 9999px;
	background: var(--washi-sand);
	color: var(--maroon);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 800;
}

.quiz-top__name {
	overflow: hidden;
	color: var(--ink-deep);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quiz-top__score {
	grid-column: 4;
	display: inline-flex;
	align-items: baseline;
	gap: 0.25rem;
}

.quiz-top__score strong {
	color: var(--vermilion-dark);
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1;
}

.quiz-top__score small {
	color: var(--ink-faint);
	font-size: 0.625rem;
	font-weight: 700;
}

/* Ba hạng đầu dùng vàng, son, đỏ mận như rèm maku và nút chính */
.quiz-top__row.is-top-1 {
	border-color: var(--gold);
	background: linear-gradient(90deg, #fff0bd, var(--washi-field) 75%);
}

.quiz-top__row.is-top-1 .quiz-top__rank {
	border-color: var(--gold-deep);
	background: linear-gradient(180deg, var(--gold-light), var(--gold));
	color: var(--ink-deep);
}

.quiz-top__row.is-top-2 .quiz-top__rank {
	border-color: var(--vermilion-dark);
	background: linear-gradient(180deg, var(--vermilion-light), var(--vermilion));
	color: #fff6e2;
}

.quiz-top__row.is-top-3 .quiz-top__rank {
	border-color: #15527e;
	background: linear-gradient(180deg, #1c6798, #103d62);
	color: #fff;
}

.quiz-top__row.is-empty {
	grid-template-columns: auto minmax(0, 1fr);
	border-style: dashed;
	background: transparent;
	opacity: 0.55;
}

.quiz-top__row.is-empty .quiz-top__name { color: var(--ink-faint); }

/* Hàng của chính mình: nền xanh băng, viền xanh núi, đổ sáng nhẹ */
.quiz-top__row.is-me {
	border-color: var(--vermilion);
	background: linear-gradient(90deg, #dceef7, #f2f9fc 80%);
	box-shadow:
		0 0 0 2px rgba(31, 111, 158, 0.2),
		0 10px 20px -10px rgba(31, 111, 158, 0.32);
}

.quiz-top__row.is-me .quiz-top__rank {
	border-color: var(--vermilion-dark);
	background: linear-gradient(180deg, var(--vermilion-light), var(--vermilion-dark));
	color: #fff;
}

.quiz-top__row.is-me .quiz-top__name { color: var(--vermilion-dark); }

.quiz-top__you {
	grid-column: 3;
	padding: 0.125rem 0.5rem;
	border-radius: 9999px;
	background: linear-gradient(180deg, var(--vermilion-light), var(--vermilion-dark));
	color: #fff;
	font-size: 0.625rem;
	font-weight: 800;
	text-transform: uppercase;
}

.quiz-top__gap {
	display: flex;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.5rem 0;
}

.quiz-top__gap span {
	width: 0.3125rem;
	height: 0.3125rem;
	border-radius: 50%;
	background: var(--gold-deep);
}

/* Bảng tập thể: ô tìm tên nhóm, danh sách cuộn trong khung */
.quiz-board-search {
	margin: 0 0 0.5rem;
}

.quiz-board-search input {
	width: 100%;
	min-height: 2.25rem;
	padding: 0.5rem 0.75rem;
	border: 1.5px solid var(--line);
	border-radius: 0.75rem;
	background: var(--washi-field);
	color: var(--ink);
	font: inherit;
	font-size: 0.8125rem;
	outline: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.quiz-board-search input::placeholder {
	color: var(--ink-faint);
}

.quiz-board-search input:focus {
	border-color: var(--vermilion);
	box-shadow: 0 0 0 2px rgba(31, 111, 158, 0.15);
}

.quiz-board-scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 0.25rem;
	scrollbar-width: thin;
	scrollbar-color: var(--gold-deep) transparent;
}

/* Hàng của mình dính đầu khung khi đã cuộn qua, dính đáy khi còn nằm dưới khung */
.quiz-board-scroll .quiz-top__row.is-me {
	position: sticky;
	top: 0;
	bottom: 0;
	z-index: 1;
}

@media (max-width: 480px) {
	.quiz-leaderboard__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.quiz-leaderboard__tabs {
		flex-wrap: wrap;
	}

	.quiz-tab {
		padding-inline: 0.5rem;
	}
}

/* --- Scroll-to-explore history --- */
.timeline-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 3rem;
}

.timeline-heading__eyebrow,
.timeline-story__rail-head {
	margin: 0 0 0.75rem;
	color: var(--vermilion);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.timeline-heading__title {
	margin: 0;
	color: var(--ink-deep);
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.03;
}

.timeline-heading__title span {
	color: var(--vermilion);
}

.timeline-heading__intro {
	max-width: 22rem;
	margin: 0 0 0.35rem;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.7;
}

.timeline-story {
	display: grid;
	grid-template-columns: minmax(170px, 0.55fr) minmax(280px, 0.9fr) minmax(380px, 1.2fr);
	align-items: start;
	column-gap: clamp(1.5rem, calc(3vw), 3.25rem);
}

.timeline-story__rail {
	position: sticky;
	top: 6rem;
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	padding-top: 0.5rem;
}

.timeline-story__rail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1rem;
}

.timeline-story__rail-head strong {
	color: var(--ink-deep);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.timeline-story__progress {
	position: absolute;
	top: 3.35rem;
	bottom: 0;
	left: 3px;
	width: 2px;
	background: var(--line);
}

.timeline-story__progress span {
	display: block;
	width: 100%;
	background: var(--vermilion);
	transition: height 0.45s ease;
}

.timeline-nav {
	display: grid;
	gap: 0.25rem;
}

.timeline-nav__item {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: center;
	gap: 0.55rem;
	min-height: 3.25rem;
	padding: 0.4rem 0 0.4rem 1.25rem;
	border: 0;
	background: transparent;
	color: var(--ink-faint);
	text-align: left;
	cursor: pointer;
	transition: color 0.25s ease;
}

.timeline-nav__item::before {
	position: absolute;
	left: 0;
	width: 8px;
	height: 8px;
	border: 2px solid var(--washi);
	border-radius: 50%;
	background: var(--line);
	content: '';
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.timeline-nav__item.is-active {
	color: var(--ink-deep);
}

.timeline-nav__item.is-active::before {
	background: var(--vermilion);
	transform: scale(1.35);
}

.timeline-nav__year {
	font-size: 13px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

.timeline-nav__label {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
}

.timeline__chapter {
	display: flex;
	grid-column: 2;
	grid-row: 1;
	align-items: center;
	min-height: clamp(540px, calc(78vh), 760px);
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
	opacity: 0.3;
	transition: opacity 0.5s ease;
}

.timeline__chapter:first-child {
	padding-top: 1rem;
}

.timeline__chapter.is-active {
	opacity: 1;
}

.timeline__chapter-copy {
	width: 100%;
	transform: translateY(1.25rem);
	opacity: 0.56;
	transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease;
}

.timeline__chapter.is-active .timeline__chapter-copy {
	transform: translateY(0);
	opacity: 1;
}

.timeline__chapter-index {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	color: var(--vermilion);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.timeline__chapter-index span {
	width: 1.5rem;
	height: 1px;
	background: currentColor;
}

.timeline__chapter-title {
	max-width: 12ch;
	margin: 0;
	color: var(--ink-deep);
	font-family: var(--font-display);
	font-size: clamp(2rem, calc(3vw), 3rem);
	font-weight: 800;
	line-height: 1.04;
}

.timeline__chapter-desc {
	max-width: 34rem;
	margin: 1rem 0 1.25rem;
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.75;
}

.timeline__source {
	color: var(--ink-soft);
	font-size: 10px;
	font-weight: 700;
	text-decoration-color: var(--line);
	text-underline-offset: 3px;
}

.timeline__source span {
	margin-left: 0.15rem;
	color: var(--vermilion);
}

.timeline-visual-stage {
	position: sticky;
	top: calc(15vh);
	grid-column: 3;
	grid-row: 1;
	align-self: start;
	height: min(calc(68vh), 660px);
	min-height: 420px;
	margin-top: calc(4vh);
	overflow: hidden;
	background: #34241d;
	box-shadow: 0 24px 55px rgba(62, 31, 24, 0.16);
}

.timeline-stage__scene {
	position: absolute;
	inset: 0;
	min-width: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.035);
	transition: opacity 0.65s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.timeline-stage__scene.is-active {
	z-index: 1;
	opacity: 1;
	transform: scale(1);
}

.timeline__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.timeline-stage__scene::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(25, 20, 17, 0.08), transparent 42%, rgba(25, 20, 17, 0.14));
	content: '';
	pointer-events: none;
}

.timeline__metric {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	display: grid;
	gap: 0.1rem;
	max-width: calc(100% - 2rem);
	padding: 0.8rem 1rem;
	background: rgba(36, 34, 28, 0.88);
	color: #fff9ec;
}

.timeline__metric strong {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
}

.timeline__metric span {
	font-size: 10px;
	line-height: 1.4;
}

.timeline__chapter-number {
	position: absolute;
	top: 0.8rem;
	right: 1rem;
	color: #fff9ec;
	font-family: var(--font-display);
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 2px 14px rgba(30, 24, 17, 0.28);
}

.timeline-footnote {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: 1.75rem;
	color: var(--ink-faint);
	font-size: 10px;
}

.timeline-footnote p {
	margin: 0;
}

.timeline-footnote__mark {
	color: var(--vermilion);
	font-size: 1rem;
}

.timeline-col.timeline-exhibit {
	position: relative;
	min-width: 0;
	padding-top: 0;
	background-color: #f3f8fa;
	background-image:
		radial-gradient(ellipse at 50% 0, rgba(243, 200, 75, 0.12), transparent 48%),
		repeating-radial-gradient(ellipse at 50% 110%, transparent 0 32px, rgba(31, 111, 158, 0.055) 33px 34px, transparent 35px 56px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.timeline-exhibit__pin {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.timeline-exhibit .timeline-heading {
	margin-bottom: 1.75rem;
}

.timeline-exhibit__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--line);
}

.timeline-exhibit__counter {
	display: flex;
	gap: 1rem;
	color: var(--ink-soft);
	font-size: 10px;
	font-weight: 700;
}

.timeline-exhibit__counter strong {
	color: var(--vermilion);
	font-variant-numeric: tabular-nums;
}

.timeline-exhibit__nav {
	display: flex;
	gap: 0.4rem;
}

.timeline-exhibit__year {
	min-height: 40px;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.timeline-exhibit__year.is-active {
	border-color: var(--vermilion);
	color: var(--vermilion);
}

.timeline-exhibit__viewport {
	overflow: clip;
}

.timeline-exhibit__track {
	position: relative;
	display: grid;
	gap: 2rem;
}

.timeline-preview {
	min-width: 0;
}

.timeline-preview__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink-deep);
	text-align: left;
	cursor: pointer;
}

.timeline-preview__open:focus-visible,
.timeline-exhibit__year:focus-visible {
	outline: 2px solid var(--vermilion);
	outline-offset: -2px;
}

.timeline-preview__image {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #d9e4e0;
}

.timeline-preview__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.timeline-preview__open:hover img {
	transform: scale(1.035);
}

.timeline-preview__number {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.3rem 0.5rem;
	background: var(--washi-card);
	color: var(--vermilion);
	font-size: 12px;
	font-weight: 800;
}

.timeline-preview__metric {
	position: absolute;
	right: 0;
	bottom: 0;
	display: grid;
	gap: 0.25rem;
	max-width: 85%;
	padding: 0.85rem 1.1rem;
	background: #205c53;
	color: #fff;
}

.timeline-preview__metric strong {
	font-family: var(--font-display);
	font-size: 1.7rem;
	line-height: 1;
}

.timeline-preview__metric > span {
	font-size: 10px;
	line-height: 1.5;
}

.timeline-preview__heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.25rem;
	gap: 0.4rem 1rem;
	padding-top: 1rem;
}

.timeline-preview__year {
	grid-column: 1 / -1;
	color: var(--vermilion);
	font-size: 12px;
	font-weight: 800;
}

.timeline-preview__title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.timeline-preview__expand {
	display: grid;
	place-items: center;
	align-self: start;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--vermilion);
	font-size: 1.4rem;
}

.timeline-exhibit__progress {
	height: 2px;
	margin-top: 1.5rem;
	background: var(--line);
}

.timeline-exhibit__progress span {
	display: block;
	height: 100%;
	background: var(--vermilion);
	transform: scaleX(0);
	transform-origin: left;
}

.avatar-progress {
	margin: 0.75rem 0 1rem;
}

.avatar-progress__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
	color: var(--ink-soft);
	font-size: 12px;
}

.avatar-progress__head strong {
	color: var(--vermilion);
	font-variant-numeric: tabular-nums;
}

.avatar-progress progress {
	display: block;
	appearance: none;
	width: 100%;
	height: 8px;
	overflow: hidden;
	border: 0;
	border-radius: 4px;
	background: var(--line);
	accent-color: var(--vermilion);
}

.avatar-progress progress::-webkit-progress-bar {
	background: var(--line);
}

.avatar-progress progress::-webkit-progress-value {
	background: var(--vermilion);
	transition: width 0.2s linear;
}

.avatar-progress progress::-moz-progress-bar {
	background: var(--vermilion);
}

.timeline-dialog {
	width: min(100% - 4rem, 80rem);
	max-height: calc(calc(100dvh) - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 8px;
	background: var(--washi-card);
	color: var(--ink-deep);
}

.timeline-dialog::backdrop {
	background: rgba(20, 35, 32, 0.35);
}

.timeline-preview.is-modal-selected .timeline-preview__open {
	visibility: hidden;
}

.timeline-dialog[open] {
	animation: timeline-dialog-in 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes timeline-dialog-in {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.94);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.timeline-dialog__body {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	min-height: min(calc(72dvh), 48rem);
}

.timeline-dialog__image {
	display: flex;
	align-items: center;
	background: #e2eae6;
}

.timeline-dialog__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(calc(72dvh), 48rem);
	object-fit: cover;
	object-position: top;
}

.timeline-dialog__copy {
	align-self: center;
	padding: 3.5rem 3rem 2.5rem;
}

.timeline-dialog__copy .timeline__chapter-index span {
	width: auto;
	height: auto;
	background: transparent;
}

.timeline-dialog__copy h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 2rem;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.timeline-dialog__metric {
	display: grid;
	gap: 0.25rem;
	margin: 1.5rem 0;
	color: #205c53;
}

.timeline-dialog__metric strong {
	font-family: var(--font-display);
	font-size: 2.5rem;
	line-height: 1;
}

.timeline-dialog__metric > span {
	font-size: 12px;
}

.timeline-dialog .timeline-dialog__close {
	position: absolute;
	z-index: 1;
	background: var(--washi-card);
}

/* Journey to 1000 Oku: one shared axis, leadership above and revenue below. */
.js .timeline-exhibit__pin {
	grid-template-rows: auto auto minmax(0, 1fr) 2px auto;
}

.timeline-exhibit .timeline-heading {
	margin-bottom: 1rem;
}

.timeline-exhibit__toolbar {
	min-height: 3.5rem;
	border-top-color: rgba(45, 43, 39, 0.14);
}

.timeline-exhibit__counter {
	align-items: center;
	gap: 1rem;
}

.timeline-exhibit__counter strong {
	color: var(--ink-deep);
	font-size: 1.25rem;
}

.timeline-exhibit__scroll-hint {
	color: var(--ink-faint);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.timeline-exhibit__legend,
.timeline-exhibit__legend > span,
.timeline-exhibit__controls {
	display: flex;
	align-items: center;
}

.timeline-exhibit__legend {
	gap: 1rem;
	color: var(--ink-soft);
	font-size: 10px;
	font-weight: 700;
}

.timeline-exhibit__legend > span {
	gap: 0.4rem;
}

.timeline-exhibit__legend i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.timeline-exhibit__legend i.is-leadership {
	background: var(--vermilion);
}

.timeline-exhibit__legend i.is-revenue {
	background: var(--gold-deep);
}

.timeline-exhibit__controls {
	gap: 0.35rem;
}

.timeline-exhibit__controls button {
	min-width: 2.25rem;
	min-height: 2.25rem;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink-deep);
	cursor: pointer;
}

.timeline-exhibit__controls button:hover {
	border-color: var(--vermilion);
	color: var(--vermilion);
}

.timeline-exhibit__controls button:focus-visible {
	outline: 2px solid var(--vermilion);
	outline-offset: 2px;
}

.timeline-exhibit__viewport {
	height: 100%;
	min-height: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
}

.timeline-exhibit__viewport::-webkit-scrollbar {
	display: none;
}

.timeline-exhibit__track {
	display: grid;
	grid-auto-columns: 13.25rem;
	grid-auto-flow: column;
	grid-template-rows: minmax(0, 1fr) 2rem minmax(0, 1fr);
	gap: 0 1rem;
	box-sizing: border-box;
	width: max-content;
	height: 100%;
	padding: 0 3rem;
	will-change: transform;
}

.timeline-exhibit__track::before,
.timeline-exhibit__track::after {
	position: absolute;
	z-index: 0;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
}

.timeline-exhibit__track::before {
	background: rgba(31, 111, 158, 0.24);
}

.timeline-exhibit__track::after {
	width: var(--timeline-progress, 0%);
	background: linear-gradient(90deg, var(--vermilion), var(--gold));
	transition: width 0.08s linear;
}

.timeline-preview {
	position: relative;
	display: flex;
	min-width: 0;
	grid-row: 1 / 4;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	opacity: 0.68;
	transition: opacity 0.3s ease;
}

.timeline-preview.is-active,
.timeline-preview:hover,
.timeline-preview:focus-within {
	opacity: 1;
}

.timeline-preview__node {
	position: absolute;
	z-index: 2;
	top: calc(50% - 5px);
	width: 10px;
	height: 10px;
	border: 2px solid var(--washi);
	border-radius: 50%;
	background: var(--vermilion);
	box-shadow: 0 0 0 1px rgba(55, 51, 45, 0.35);
}

.timeline-preview__year {
	position: absolute;
	z-index: 2;
	top: calc(50% - 1.5rem);
	padding: 0.1rem 0.3rem;
	background: var(--washi);
	color: var(--ink-deep);
	font-size: 11px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

.timeline-preview__open {
	position: absolute;
	left: 0;
	display: flex;
	width: 100%;
	max-height: calc(50% - 2.4rem);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink-deep);
	text-align: left;
	cursor: pointer;
}

.timeline-preview.is-leadership .timeline-preview__open {
	top: 0;
	flex-direction: column;
	justify-content: flex-end;
}

.timeline-preview.is-revenue .timeline-preview__open {
	bottom: 0;
	flex-direction: column;
	justify-content: flex-start;
}

.timeline-preview__connector {
	position: absolute;
	left: 50%;
	width: 1px;
	height: 1.25rem;
	background: currentColor;
	transform: translateX(-50%) scaleY(0.55);
	transform-origin: center;
	opacity: 0.55;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.timeline-preview.is-leadership .timeline-preview__connector {
	bottom: -2.4rem;
	color: var(--vermilion);
}

.timeline-preview.is-revenue .timeline-preview__connector {
	top: -2.4rem;
	color: var(--gold-deep);
}

.timeline-preview__card {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 0;
	border-bottom: 2px solid var(--gold-deep);
	background: var(--washi-card);
	box-shadow: 0 7px 20px rgba(42, 35, 27, 0.08);
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}

.timeline-preview.is-leadership .timeline-preview__card {
	border-bottom-color: var(--vermilion);
	transform: translateY(-0.45rem);
}

.timeline-preview.is-revenue .timeline-preview__card {
	transform: translateY(0.45rem);
}

.timeline-preview.is-active .timeline-preview__connector,
.timeline-preview:hover .timeline-preview__connector,
.timeline-preview:focus-within .timeline-preview__connector {
	transform: translateX(-50%) scaleY(1);
	opacity: 1;
}

.timeline-preview.is-active.is-leadership .timeline-preview__card,
.timeline-preview:hover.is-leadership .timeline-preview__card,
.timeline-preview:focus-within.is-leadership .timeline-preview__card {
	transform: translateY(0);
}

.timeline-preview.is-active.is-revenue .timeline-preview__card,
.timeline-preview:hover.is-revenue .timeline-preview__card,
.timeline-preview:focus-within.is-revenue .timeline-preview__card {
	transform: translateY(0);
}

.timeline-preview__image {
	position: relative;
	display: block;
	width: 100%;
	 aspect-ratio: 16 / 8;
	min-height: 0;
	overflow: hidden;
	background: #ddd5c5;
}

.timeline-preview__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.timeline-preview__open:hover .timeline-preview__image img {
	transform: scale(1.04);
}

.timeline-preview__image-placeholder {
	display: grid;
	place-content: center;
	gap: 0.25rem;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, #eee9de 0 10px, #e9e2d4 10px 11px);
	color: #686052;
	text-align: center;
}

.timeline-preview__image-placeholder > span:first-child {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 800;
}

.timeline-preview__image-placeholder > span:last-child {
	font-size: 9px;
}

.timeline-preview__kind {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.2rem 0.4rem;
	background: rgba(31, 29, 26, 0.82);
	color: #fff;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.timeline-preview__copy {
	display: grid;
	gap: 0.35rem;
	padding: 0.55rem 0.65rem 0.65rem;
}

.timeline-preview__title {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
}

.timeline-preview__metric {
	position: static;
	display: grid;
	gap: 0.1rem;
	max-width: 100%;
	padding: 0;
	background: transparent;
	color: var(--ink-deep);
	font-variant-numeric: tabular-nums;
}

.timeline-preview__metric strong {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.15;
}

.timeline-preview__metric strong small {
	font-family: var(--font-body);
	font-size: 8px;
	font-weight: 600;
}

.timeline-preview__secondary,
.timeline-preview__metric > span {
	color: var(--ink-soft);
	font-size: 9px;
	line-height: 1.25;
}

.timeline-preview__oku {
	display: flex;
	align-items: baseline;
	gap: 0.1rem;
	color: var(--gold-deep);
	font-size: 1.5rem !important;
}

.timeline-preview__status {
	color: var(--vermilion) !important;
	font-weight: 800;
}

.timeline-preview__expand {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 0.3rem;
	border-top: 1px solid rgba(45, 43, 39, 0.12);
	color: var(--ink-faint);
	font-size: 9px;
	font-weight: 700;
}

.timeline-preview__open:hover .timeline-preview__expand {
	color: var(--vermilion);
}

.timeline-preview.is-finale .timeline-preview__card {
	border-bottom-width: 4px;
	background: #fff6d8;
}

.timeline-preview.is-finale .timeline-preview__oku {
	font-size: 2rem !important;
}

.timeline-exhibit__progress {
	margin: 0;
}

.timeline-exhibit__progress span {
	background: linear-gradient(90deg, var(--vermilion), var(--gold));
}

.timeline-preview.is-finale .timeline-preview__image::before,
.timeline-preview.is-finale .timeline-preview__image::after {
	position: absolute;
	z-index: 4;
	top: 0.75rem;
	right: 0.75rem;
	content: '';
}

.timeline-preview.is-finale .timeline-preview__image::before {
	width: 2px;
	height: 1.75rem;
	background: var(--gold-deep);
}

.timeline-preview.is-finale .timeline-preview__image::after {
	width: 1rem;
	height: 0.8rem;
	background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
	clip-path: polygon(0 0, 100% 0, 100% 72%, 0 55%);
}

.timeline-dialog__image-placeholder,
.timeline-dialog__placeholder {
	padding: 1rem;
	background: #eee9de;
	color: var(--ink-soft);
}

.timeline-dialog__metric {
	color: var(--gold-deep);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) and (min-height: 650px) {
	.js .timeline-col.timeline-exhibit {
		width: var(--timeline-screen-width, 100%);
		margin-left: calc((100% - var(--timeline-screen-width, 100%)) / 2);
	}

	.js .timeline-exhibit__pin {
		position: sticky;
		top: 3rem;
		display: grid;
		grid-template-rows: auto auto minmax(0, 1fr) 2px auto;
		height: calc(calc(100dvh) - 3rem);
		padding: 1.25rem 2rem 0.75rem;
	}

	.js .timeline-exhibit .timeline-heading {
		align-items: center;
		margin-bottom: 0.75rem;
	}

	.js .timeline-exhibit .timeline-heading__eyebrow {
		margin-bottom: 0.35rem;
	}

	.js .timeline-exhibit .timeline-heading__title {
		font-size: 2.25rem;
	}

	.js .timeline-exhibit__toolbar {
		padding: 0.25rem 0;
	}

	.js .timeline-exhibit__viewport {
		min-height: 0;
	}

	.js .timeline-exhibit__track {
		grid-auto-columns: clamp(12rem, calc(17vw), 15rem);
		gap: 0 clamp(1rem, calc(2vw), 2rem);
		width: max-content;
		padding-inline: max(2rem, calc((calc(100vw) - 72rem) / 2));
		will-change: transform;
	}

	.js .timeline-preview {
		width: auto;
	}

	.js .timeline-exhibit__progress {
		margin: 0;
	}

	.js .timeline-exhibit .timeline-footnote {
		margin-top: 0.5rem;
	}
}

@media (min-width: 1024px) and (min-height: 650px) and (max-width: 1399px) {
	.js .timeline-preview__title {
		font-size: 2.25rem;
	}
}

@media (min-width: 1024px) and (min-height: 650px) and (max-height: 750px) {
	.js .timeline-exhibit .timeline-heading__title {
		font-size: 1.75rem;
	}

	.js .timeline-preview__heading {
		flex-basis: 6.75rem;
	}

	.js .timeline-preview__title {
		font-size: 2rem;
	}
}

@media (max-width: 1023px), (max-height: 649px) {
	.js .timeline-exhibit__pin {
		position: relative;
		top: auto;
		display: block;
		height: auto;
	}

	.timeline-exhibit__viewport {
		height: auto;
		min-height: 34rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.timeline-exhibit__track {
		grid-auto-columns: min(calc(72vw), 17rem);
		grid-template-rows: minmax(0, 1fr) 2rem minmax(0, 1fr);
		gap: 0 0.75rem;
		width: max-content;
		height: 34rem;
		padding-inline: 1.25rem;
		transform: none !important;
	}

	.timeline-preview {
		scroll-snap-align: center;
	}
}

@media (max-width: 767px) {
	.timeline-dialog {
		width: calc(100% - 1.5rem);
	}

	.timeline-dialog__body {
		min-height: 0;
	}

	.timeline-exhibit__toolbar {
		flex-wrap: wrap;
	}

	.timeline-exhibit__scroll-hint {
		display: none;
	}

	.timeline-exhibit__legend {
		gap: 0.55rem;
	}

	.timeline-exhibit__viewport {
		height: auto;
		min-height: 34rem;
		margin-inline: -1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.timeline-exhibit__track {
		grid-auto-columns: min(calc(72vw), 17rem);
		grid-template-rows: minmax(0, 1fr) 2rem minmax(0, 1fr);
		gap: 0 0.75rem;
		width: max-content;
		height: 34rem;
		padding-inline: 1.25rem;
		transform: none !important;
	}

	.timeline-preview {
		scroll-snap-align: center;
	}

	.timeline-preview__open {
		max-height: calc(50% - 2.25rem);
	}

	.timeline-preview__image {
		aspect-ratio: 16 / 8;
	}

	.timeline-preview__copy {
		padding: 0.5rem;
	}

	.timeline-preview__title {
		font-size: 11px;
	}

	.timeline-preview__metric strong {
		font-size: 0.9rem;
	}

	.timeline-preview__expand {
		font-size: 8px;
	}

	.timeline-exhibit__progress {
		margin-top: 0.5rem;
	}

	.timeline-preview__title {
		font-size: 1.5rem;
	}

	.timeline-dialog__body {
		grid-template-columns: 1fr;
	}

	.timeline-dialog__copy {
		padding: 1.5rem;
	}

	.timeline-dialog__copy h2 {
		font-size: 1.65rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .timeline-exhibit__pin {
		position: static;
		top: auto;
		height: auto;
	}

	.timeline-exhibit__viewport {
		height: auto;
		min-height: 34rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.timeline-exhibit__track {
		grid-auto-columns: min(calc(72vw), 17rem);
		grid-template-rows: minmax(0, 1fr) 2rem minmax(0, 1fr);
		gap: 0 0.75rem;
		width: max-content;
		height: 34rem;
		padding-inline: 1.25rem;
		transform: none !important;
		will-change: auto;
	}

	.timeline-dialog[open] {
		animation: none;
	}

	.timeline-preview__image img {
		transition: none;
	}
}

.quiz-dialog {
	width: min(calc(100% - 1.5rem), 52rem);
	max-height: calc(calc(100dvh) - 1.5rem);
	margin: auto;
	padding: 0;
	overflow-y: auto;
	border: 0;
	border-radius: 1rem;
	background: var(--washi-card);
	color: var(--ink);
	box-shadow: 0 30px 80px rgba(62, 31, 24, 0.35);
}

.quiz-dialog::backdrop {
	background: rgba(46, 24, 16, 0.6);
}

/* Chỉ thể lệ cần chiều cao tối thiểu; bài thi và kết quả co theo nội dung */
.quiz-dialog--rules {
	min-height: min(calc(100dvh - 3rem), 56rem);
}

.quiz-dialog__inner {
	position: relative;
	padding: 1.5rem;
}

.quiz-end-confirm {
	position: fixed;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(46, 24, 16, 0.68);
}

.quiz-end-confirm__panel {
	width: min(100%, 25rem);
	padding: 1.4rem;
	border: 1px solid rgba(122, 60, 20, 0.18);
	border-radius: 0.9rem;
	background: var(--washi-card);
	box-shadow: 0 20px 50px rgba(46, 24, 16, 0.3);
}

.quiz-end-confirm__panel h3,
.quiz-end-confirm__panel p {
	margin: 0;
}

.quiz-end-confirm__panel p {
	margin-top: 0.65rem;
	line-height: 1.55;
}

.quiz-end-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1.2rem;
}

.quiz-end-confirm__actions button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.quiz-end-confirm__submit {
	min-height: 2.75rem;
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--vermilion, #c7362e);
	border-radius: 0.65rem;
	background: transparent;
	color: var(--vermilion, #a82d27);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.quiz-end-confirm__submit:hover:not(:disabled) {
	background: rgba(199, 54, 46, 0.08);
}

.quiz-dialog__head {
	padding-right: 2rem;
	margin-bottom: 1.25rem;
}

.quiz-rules {
	display: grid;
	gap: 1rem;
	font-size: 1rem;
	line-height: 1.6;
}

.quiz-rules p {
	margin: 0;
}

.quiz-rules .quiz-btn {
	justify-self: start;
}

/* ═══════════════ 9 · TƯỜNG LỜI CHÚC ═══════════════ */

/* Popup thiệp tri ân, bật sau khi gửi lời chúc */
.card-dialog {
	width: min(100% - 1.5rem, 46rem);
	max-height: calc(calc(100dvh) - 1.5rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 1.25rem;
	background: var(--washi-card);
	color: var(--ink);
	box-shadow: 0 30px 80px rgba(62, 31, 24, 0.35);
}

.card-dialog::backdrop {
	background: rgba(46, 24, 16, 0.6);
	transition: opacity 0.9s ease;
}

.card-dialog[open] {
	animation: card-dialog-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

/* Thiệp đang bay ra khỏi chum: modal mở sẵn nhưng trong suốt, rồi hiện dần quanh thiệp */
.card-dialog.is-entering[open] {
	opacity: 0;
	animation: none;
	pointer-events: none;
}

.card-dialog.is-entering::backdrop {
	opacity: 0;
}

.card-dialog.is-summoned[open] {
	animation: card-dialog-in 0.9s ease-out;
}

@keyframes card-dialog-in {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.97);
	}
}

.card-dialog__body {
	position: relative;
	display: grid;
	gap: 1.25rem;
	padding: 1.75rem 1.75rem 1.5rem;
}

.card-dialog__close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	color: var(--ink-soft);
	transition: background 0.2s, color 0.2s;
}

.card-dialog__close:hover {
	background: rgba(74, 42, 28, 0.08);
	color: var(--ink-deep);
}

.card-dialog__close svg {
	width: 1.125rem;
	height: 1.125rem;
}

.card-dialog__head {
	padding-right: 2.5rem;
}

.card-dialog__eyebrow {
	color: var(--vermilion);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.card-dialog__title {
	margin-top: 0.25rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--ink-deep);
}

.card-preview {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--washi-sand);
	box-shadow: 0 0 0 1px rgba(74, 42, 28, 0.1), 0 14px 30px rgba(74, 42, 28, 0.16);
}

.card-preview .card-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--ink-faint);
	font-size: 0.8125rem;
}

.card-preview svg {
	display: block;
	width: 100%;
	height: auto;
}

.card-avatar-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--line-soft);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.72);
}

.card-avatar-control h3,
.card-avatar-control p {
	margin: 0;
}

.card-avatar-control h3 {
	font-size: 0.875rem;
	font-weight: 800;
}

.card-avatar-control p {
	margin-top: 0.2rem;
	color: var(--ink-faint);
	font-size: 0.75rem;
}

.card-avatar-slot {
	position: relative;
	display: grid;
	flex: 0 0 5.5rem;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	overflow: hidden;
	border: 1.5px dashed var(--vermilion);
	border-radius: 0.75rem;
	background: var(--washi-field);
	color: var(--vermilion-dark);
}

.card-avatar-slot > span {
	display: grid;
	justify-items: center;
	gap: 0.125rem;
	font-size: 0.625rem;
	font-weight: 700;
}

.card-avatar-slot > span > span:first-child {
	font-size: 1.5rem;
	line-height: 1;
}

.card-avatar-slot img,
.avatar-upload-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-avatar-slot img {
	border-radius: 50%;
}

.avatar-history {
	display: grid;
	gap: 0.625rem;
}

.avatar-history > h3 {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 800;
}

.avatar-history__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding: 0.625rem;
	border: 1px solid var(--line-soft);
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.72);
}

.avatar-history__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem 0.625rem;
	color: var(--ink-soft);
	font-size: 0.6875rem;
}

.avatar-history__meta > span {
	font-weight: 800;
}

.avatar-history__meta time {
	color: var(--ink-faint);
}

.avatar-history__progress {
	display: grid;
	grid-column: 1 / -1;
	gap: 0.35rem;
	min-width: 0;
}

.avatar-history__progress > div {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	color: var(--ink-soft);
	font-size: 0.6875rem;
}

.avatar-history__progress strong {
	flex: 0 0 auto;
	color: var(--vermilion);
	font-variant-numeric: tabular-nums;
}

.avatar-history__progress progress {
	display: block;
	appearance: none;
	width: 100%;
	height: 6px;
	overflow: hidden;
	border: 0;
	border-radius: 3px;
	background: var(--line);
	accent-color: var(--vermilion);
}

.avatar-history__progress progress::-webkit-progress-bar {
	background: var(--line);
}

.avatar-history__progress progress::-webkit-progress-value {
	background: var(--vermilion);
	transition: width 0.2s linear;
}

.avatar-history__progress progress::-moz-progress-bar {
	background: var(--vermilion);
}

.avatar-history__grid {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.375rem;
}

.avatar-history__avatar,
.avatar-generated__item {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
}

.avatar-download {
	color: var(--vermilion-dark);
	font-size: 0.6875rem;
	font-weight: 700;
	text-align: center;
}

.avatar-download:hover,
.avatar-download:focus-visible {
	text-decoration: underline;
}

/* Đặt ảnh AI làm Avatar wikifjp */
.avatar-site {
	padding: 0;
	border: 0;
	background: none;
	color: var(--vermilion-dark);
	font: inherit;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}

.avatar-site:hover,
.avatar-site:focus-visible {
	text-decoration: underline;
}

.avatar-site.is-active {
	color: var(--ink-soft);
	cursor: default;
}

.avatar-site-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	background: #fff8ec;
	font-size: 0.8125rem;
}

.avatar-site-bar .btn {
	padding: 0.375rem 0.875rem;
	font-size: 0.8125rem;
}

.site-avatar-preview {
	width: 7rem;
	height: 7rem;
	margin: 0 auto 0.75rem;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--vermilion-dark);
}

.avatar-history__choice {
	width: 100%;
	aspect-ratio: 1;
	padding: 0.125rem;
	overflow: hidden;
	border: 1px solid var(--line-soft);
	border-radius: 50%;
	background: #fff;
}

.avatar-history__choice:hover,
.avatar-history__choice:focus-visible {
	border-color: var(--vermilion);
	box-shadow: 0 0 0 2px rgba(199, 54, 46, 0.15);
}

.avatar-history__choice img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.avatar-history__error {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--vermilion-dark);
	font-size: 0.6875rem;
}

.avatar-history__actions {
	display: flex;
	grid-column: 1 / -1;
	justify-content: flex-end;
	gap: 0.375rem;
}

.avatar-history__actions .btn {
	min-height: 2rem;
	padding: 0.375rem 0.625rem;
	font-size: 0.6875rem;
}

.avatar-dialog {
	width: min(100% - 2rem, 30rem);
	max-height: calc(calc(100dvh) - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--line-soft);
	border-radius: 1rem;
	background: var(--washi-card);
	color: var(--ink);
	box-shadow: 0 24px 72px rgba(62, 31, 24, 0.35);
}

.avatar-dialog::backdrop,
.avatar-consent::backdrop {
	background: rgba(46, 24, 16, 0.58);
	backdrop-filter: blur(3px);
}

.avatar-dialog__body,
.avatar-consent__body {
	position: relative;
	display: grid;
	gap: 1rem;
	padding: 1.5rem;
}

.avatar-dialog__body > h2,
.avatar-consent__body > h2 {
	margin: 0;
	padding-right: 2rem;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 800;
}

.avatar-upload-box {
	display: grid;
	place-items: center;
	width: min(100%, 20rem);
	aspect-ratio: 1;
	justify-self: center;
	overflow: hidden;
	border: 1.5px dashed var(--line-warm);
	border-radius: 0.75rem;
	background: var(--washi-sand);
	cursor: pointer;
}

.avatar-upload-box > span {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	font-weight: 700;
}

.avatar-upload-box > span > span:first-child {
	color: var(--vermilion);
	font-size: 2.5rem;
	line-height: 1;
}

.avatar-upload-box small {
	color: var(--ink-faint);
	font-size: 0.6875rem;
}

.avatar-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
}

.avatar-generate {
	display: grid;
	gap: 0.75rem;
}

.avatar-mode {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 0.5rem;
}

.avatar-mode__option {
	display: grid;
	gap: 0.25rem;
	padding: 0.625rem 0.75rem;
	border: 1.5px solid rgba(15, 23, 42, 0.12);
	border-radius: 0.875rem;
	background: #fff;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.avatar-mode__option.is-selected {
	border-color: var(--vermilion);
	box-shadow: 0 0 0 3px rgba(31, 111, 158, 0.18);
}

.avatar-mode__label {
	font-size: 0.8125rem;
	font-weight: 700;
}

.avatar-mode__note {
	color: var(--ink-soft);
	font-size: 0.6875rem;
	line-height: 1.35;
}

.avatar-actions > .btn {
	min-height: 2.75rem;
	padding: 0.625rem 1rem;
	border-radius: 999px;
	font-size: 0.8125rem;
}

.avatar-status {
	min-height: 1.25rem;
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	text-align: center;
}

.avatar-generated {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.avatar-generated__option {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	padding: 0.25rem;
	overflow: hidden;
	border: 2px solid var(--line-soft);
	border-radius: 0.75rem;
	background: #fff;
}

.avatar-generated__option.is-selected {
	border-color: var(--vermilion);
	box-shadow: 0 0 0 2px rgba(199, 54, 46, 0.15);
}

.avatar-generated__option img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.avatar-generated__label {
	position: absolute;
	right: 0.45rem;
	bottom: 0.45rem;
	left: 0.45rem;
	padding: 0.3rem 0.4rem;
	border-radius: 0.4rem;
	background: rgba(35, 25, 20, 0.78);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	text-align: center;
}

.avatar-consent {
	width: min(100% - 2.5rem, 25rem);
	margin: auto;
	padding: 0;
	border: 1px solid var(--line-soft);
	border-radius: 0.875rem;
	background: var(--washi-card);
	color: var(--ink);
	box-shadow: 0 18px 56px rgba(62, 31, 24, 0.38);
}

.avatar-consent__body > p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.875rem;
	line-height: 1.6;
}

.card-themes {
	min-width: 0;
	border: 0;
}

.card-themes legend {
	margin-bottom: 0.625rem;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	font-weight: 700;
}

.card-theme-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.card-theme {
	display: grid;
	justify-items: center;
	gap: 0.25rem;
	min-width: 0;
	padding: 0.625rem 0.25rem 0.5rem;
	border: 1.5px solid var(--line-soft);
	border-radius: 0.75rem;
	background: #fff;
	color: var(--ink-soft);
	transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.card-theme:hover {
	transform: translateY(-2px);
	border-color: var(--line-warm);
}

.card-theme.is-selected {
	border-color: var(--vermilion);
	background: var(--washi-field);
	color: var(--ink-deep);
}

.card-theme__swatch {
	width: 1.5rem;
	height: 1.5rem;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--card-swatch);
	box-shadow: 0 0 0 1px rgba(74, 42, 28, 0.18);
}

.card-theme__label {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
}

.card-theme__jp {
	color: var(--ink-faint);
	font-size: 0.6875rem;
	line-height: 1;
}

.card-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.625rem;
}

#card-download {
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	border-radius: 999px;
	font-size: 0.8125rem;
}

#card-download:disabled {
	opacity: 0.55;
	cursor: wait;
}

.card-status {
	margin-top: -0.5rem;
	color: var(--teal);
	font-size: 0.8125rem;
	text-align: right;
}

.card-status:empty {
	display: none;
}

.card-status.is-error {
	color: var(--vermilion-dark);
}

.card-guest-name-field label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 700;
}

@media (max-width: 560px) {
	.card-dialog__body {
		gap: 1rem;
		padding: 1.25rem 1rem 1rem;
	}

	.card-dialog__title {
		font-size: 1.25rem;
	}

	.card-theme-options {
		gap: 0.25rem;
	}

	.card-theme {
		padding-inline: 0;
	}

	.card-theme__label {
		font-size: 0.6875rem;
	}

	.card-dialog__actions > .btn {
		flex: 1;
	}

	.card-status {
		text-align: left;
	}

	.avatar-dialog__body,
	.avatar-consent__body {
		padding: 1.125rem;
	}

	.avatar-upload-box {
		width: min(100%, 17rem);
	}

	.avatar-actions > .btn {
		flex: 1 1 100%;
	}
}

.wall-section {
	position: relative;
	padding-block: 3.5rem;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 0, rgba(243, 200, 75, 0.2), transparent 43%),
		linear-gradient(180deg, #fff8e4 0%, #f5f9f8 48%, #e6f2f7 100%);
}

.wall-section::before {
	position: absolute;
	top: -2rem;
	left: -8%;
	width: 116%;
	height: 7rem;
	background:
		radial-gradient(ellipse at 18% 100%, rgba(255, 255, 255, 0.78), transparent 64%),
		radial-gradient(ellipse at 72% 100%, rgba(218, 237, 245, 0.72), transparent 68%);
	content: '';
	filter: blur(10px);
	opacity: 0.7;
	pointer-events: none;
}

.seigaiha--wall {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	opacity: 0.62;
	pointer-events: none;
}

/* Dải sóng xanh giữ tương phản nhẹ trên nền footer xanh hồ. */
.seigaiha--footer {
	opacity: 0.55;
	filter: hue-rotate(145deg) saturate(0.7);
}

.wall-head {
	margin-bottom: 2.5rem;
	text-align: center;
}

.wall-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: var(--washi-sand);
	color: var(--vermilion);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.wall-badge__icon {
	width: 0.875rem;
	height: 0.875rem;
}

.wall-title {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--ink-deep);
}

.wall-lead {
	max-width: 36rem;
	margin: 0.5rem auto 0;
	font-size: 13px;
	color: var(--ink-soft);
}

.wish-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.wish-empty {
	padding-block: 3.5rem;
	text-align: center;
	font-weight: 600;
	color: var(--ink-faint);
}

.wish-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.wish-pager__btn {
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--ink-faint);
	border-radius: 999px;
	background: transparent;
	color: var(--ink-deep);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.wish-pager__btn:focus-visible {
	outline: 2px solid var(--vermilion);
	outline-offset: 2px;
}

.wish-pager__btn[aria-current="page"] {
	background: var(--ink-deep);
	border-color: var(--ink-deep);
	color: #fff;
}

.wish-pager__btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.wish-pager__gap {
	color: var(--ink-faint);
}

.wish-pager__error {
	margin-top: 0.75rem;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-wine);
}

.wish-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.25rem;
	border-radius: 1rem;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.wish-tile:hover {
	transform: translateY(-0.25rem);
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.wish-tile__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.wish-tile__who {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}

.wish-tile__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--line);
}

.wish-tile__avatar--fallback {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	background: var(--washi-sand);
	color: var(--ink-wine);
	font-size: 1rem;
	font-weight: 800;
}

.wish-tile__meta {
	min-width: 0;
}

.wish-tile__name {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wish-tile__account {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10px;
	font-weight: 500;
	color: #9bb1c0;
}

.wish-tile__sticker {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--vermilion);
	user-select: none;
}

.wish-tile__sticker svg {
	width: 100%;
	height: 100%;
}

.wish-tile__text {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.625;
	color: var(--ink-soft);
	white-space: pre-line;
}

.wish-tile__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--line-soft);
	font-size: 11.5px;
	color: var(--ink-faint);
}

/* ═══════════════ 10 · FOOTER + MODAL ═══════════════ */

.site-footer {
	position: relative;
	padding: 4.5rem 0 2rem;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 0, rgba(255, 220, 111, 0.14), transparent 42%),
		radial-gradient(ellipse at 50% 120%, rgba(79, 164, 195, 0.24), transparent 55%),
		linear-gradient(180deg, #17476a 0%, #123c5b 58%, #0b304d 100%);
	color: #e6f2f8;
}

.site-footer::before {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(180deg, rgba(18, 60, 91, 0.92), rgba(11, 48, 77, 0.44)),
		url('../images/background.webp');
	background-position: center, center 72%;
	background-size: cover;
	content: '';
	opacity: 0.2;
	transform: scaleY(-1);
	pointer-events: none;
}

.footer-band {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	pointer-events: none;
}

.footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"crest"
		"brand"
		"contact";
	justify-items: center;
	gap: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-brand {
	grid-area: brand;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer-logo-lockup {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.625rem;
}

/* Logo nền trong suốt: viền sáng mỏng giữ chữ F/T xanh dễ đọc trên nền đỏ rượu */
.footer-logo {
	display: block;
	height: 44px;
	width: auto;
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 8px rgba(255, 255, 255, 0.28));
}

.footer-logo__text {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	color: #fff;
}

.footer-brand__sub {
	max-width: 22rem;
	font-size: 12px;
	line-height: 1.6;
	color: #c3dce8;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.footer-links a {
	position: relative;
	padding: 0.3125rem 0.875rem;
	border: 1px solid rgba(190, 220, 234, 0.42);
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	color: #e6f2f8;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-links a::before,
.footer-info a::before {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: max(100%, 44px);
	height: 44px;
}

.footer-info a {
	position: relative;
}

.footer-links a:hover,
.footer-links a:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--gold-light);
	color: #fff;
}

.footer-crest {
	grid-area: crest;
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.footer-crest__lantern {
	display: block;
	line-height: 0;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.footer-pill {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 1.5rem;
	border-radius: 9999px;
	border: 1px solid rgba(190, 220, 234, 0.45);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(4px);
}

.footer-pill .brand-name {
	color: #fff;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
}

.footer-pill__mark {
	display: inline-flex;
	line-height: 0;
}

/* Hoạ tiết SVG có sẵn (cành anh đào, sen) ở hai góc footer, chỉ hiện từ 1024px */
.footer-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.branch--footer-l,
.branch--footer-r,
.lotus--footer {
	opacity: 0.3;
}

.branch--footer-l {
	bottom: -1rem;
	left: -1.5rem;
	width: 170px;
}

.branch--footer-r {
	top: 1rem;
	right: -1.5rem;
	width: 170px;
}

.lotus--footer {
	bottom: 1.25rem;
	right: 14%;
	width: 110px;
}

.footer-contact {
	grid-area: contact;
	max-width: 22rem;
	font-style: normal;
	text-align: center;
	font-size: 12px;
	line-height: 1.65;
	color: #c3dce8;
}

.footer-contact__title {
	margin-bottom: 0.25rem;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 800;
	color: var(--gold-light);
}

.footer-info {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	column-gap: 0.875rem;
	margin-top: 0.625rem;
}

.footer-info dt {
	text-align: right;
	color: #a9c9d9;
}

.footer-info dd {
	text-align: left;
	color: #fff;
}

.footer-info a {
	color: inherit;
	text-decoration: none;
}

.footer-info a:hover {
	color: var(--gold-light);
	text-decoration: underline;
}

.footer-heart {
	color: #f2a0b5;
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1.5rem;
	font-size: 12px;
	color: #a9c9d9;
}

@media (max-width: 639px) {
	.site-footer {
		padding-bottom: 4.5rem; /* chừa chỗ cho nút .to-top */
	}
}

.confetti-canvas {
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
}

/* ═══════════════ RESPONSIVE ═══════════════ */

@media (min-width: 640px) {
	.hero__content {
		padding: 76px 1.5rem 3rem;
	}

	.site-header {
		padding-inline: 1.5rem;
	}

	.user-chip__name {
		display: inline;
	}

	.brand-mark {
		width: 1.75rem;
		height: 1.75rem;
	}
	.brand-mark--sm {
		width: 1.25rem;
		height: 1.5rem;
	}
	.brand-name {
		font-size: 1.5rem;
	}
	.brand-name--fpt {
		font-size: 1.25rem;
	}
	.header-actions {
		gap: 0.5rem;
	}

	.pill-toggle {
		display: flex;
	}

	.hero__titles {
		margin-bottom: 1.25rem;
	}
	.title-plaque {
		padding: 0;
	}
	.hero__title {
		font-size: 46px;
	}
	.hero__subtitle {
		font-size: 28px;
	}
	.hero__date {
		font-size: 18px;
	}

	.cask-box {
		max-width: 420px;
	}

	.sake-ruler {
		right: -6px;
	}
	.sake-ruler__tube,
	.sake-ruler__ticks {
		height: 10rem;
	}

	.smash-btn {
		margin-top: 1.25rem;
		padding: 0.875rem 2rem;
		gap: 0.625rem;
		font-size: 15px;
	}

	.smash-btn__icon {
		font-size: 1.125rem;
	}

	.ceremony-done {
		margin-top: 1.25rem;
		padding: 0.875rem 1.75rem;
		font-size: 13px;
	}

	.wish-card {
		padding: 1.5rem;
	}
	.wish-card__title {
		font-size: 28px;
	}

	.quiz-section {
		padding-block: 5rem;
	}
	.section-title {
		font-size: 1.25rem;
	}
	.quiz-layout {
		gap: 1.5rem;
	}
	.omikuji {
		display: block;
	}
	.quiz-card {
		padding: 1.25rem;
	}

	.wall-section {
		padding-block: 5rem;
	}
	.wall-title {
		font-size: 1.875rem;
	}
	.wall-lead {
		font-size: 15px;
	}

	.footer-bottom {
		flex-direction: row;
		padding-right: 3.5rem;
	}
}

@media (min-width: 768px) {
	.wish-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"crest crest"
			"brand contact";
		align-items: start;
	}

	.footer-brand {
		align-items: flex-start;
		text-align: left;
		justify-self: start;
	}

	.footer-links {
		justify-content: flex-start;
	}

	.footer-contact {
		justify-self: end;
		text-align: left;
	}

	.footer-info {
		justify-content: start;
	}

	.footer-info dt {
		text-align: left;
	}
}

@media (min-width: 1024px) {
	/* Cột giữa auto + hai cột 1fr bằng nhau => FJP FHN luôn đúng tâm trang */
	.footer-top {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: "brand crest contact";
		align-items: center;
	}

	.hero {
		display: flex;
		flex-direction: column;
		height: calc(100vh);
		height: calc(100dvh);
		min-height: 0;
	}

	.hero__content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		min-height: 0;
		padding-top: clamp(2rem, calc(5dvh), 4rem);
		padding-bottom: 0.75rem;
	}

	.user-chip__branch {
		display: inline;
	}

	.hero__titles {
		margin-bottom: 0.35rem;
	}
	.title-plaque {
		padding: 0;
	}
	.hero__title {
		font-size: 60px;
	}
	.hero__subtitle {
		font-size: 32px;
	}
	.hero__brand {
		width: 82px;
		height: 52px;
	}
	.hero__date {
		font-size: 20px;
	}

	.stage {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
		flex: 1;
		min-height: 0;
		align-items: center;
	}

	.stage__cask {
		grid-column: 2;
		grid-row: 1;
		min-height: 0;
		justify-content: center;
		width: 100%;
	}

	.cask-box {
		flex: 0 1 auto;
		min-height: 0;
		width: 100%;
		max-width: 540px;
		max-height: none;
		aspect-ratio: auto;
	}

	.cask-art {
		width: min(100%, calc(37.5dvh));
	}

	.campaign-countdown {
		width: min(100%, 27.5rem);
		margin-top: 0.5rem;
		padding: 0.4rem 0.6rem 0.35rem;
	}

	.campaign-countdown__heading {
		font-size: 0.75rem;
	}

	.campaign-countdown__units {
		gap: 0.5rem;
		padding-top: 0.45rem;
	}

	.campaign-countdown__lantern {
		height: 3rem;
		border-radius: 0.75rem;
	}

	.campaign-countdown__units strong {
		font-size: 1.65rem;
		color: #a94712;
	}

	.campaign-countdown__unit small {
		margin-top: 0.3rem;
	}

	.stage__wish {
		grid-column: 3;
		grid-row: 1;
		justify-content: center;
		align-items: center;
	}

	.stage__wish .wish-card {
		padding: clamp(0.75rem, 1.4dvh, 1rem);
	}

	.stage__wish .wish-card__head {
		margin-bottom: clamp(0.35rem, 1dvh, 0.75rem);
	}

	.stage__wish .wish-form {
		gap: clamp(0.4rem, 0.8dvh, 0.625rem);
	}

	.stage__wish .wish-input {
		padding: clamp(0.5rem, 0.8dvh, 0.65rem);
	}

	.stage__wish .wish-name-input {
		min-height: clamp(38px, 5.5dvh, 42px);
		padding: clamp(0.45rem, 0.7dvh, 0.6rem);
	}

	.quiz-grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 2.5rem;
	}

	.quiz-col {
		min-width: 0;
	}

	.quiz-board-col {
		min-width: 0;
	}

	.quiz-brief {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.section-title {
		font-size: 22px;
	}

	.omikuji__art {
		width: 172px;
	}

	.wall-title {
		font-size: 38px;
	}

	.wish-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) and (min-height: 800px) {
	.hero__content {
		padding-top: clamp(0.75rem, calc(1.5dvh), 1.5rem);
	}

	.hero__brand {
		position: absolute;
		top: -2.5rem;
		left: 50%;
		margin: 0;
		transform: translateX(-50%);
	}

	.hero__titles {
		margin-bottom: 0.2rem;
	}

	.hero__subtitle {
		margin-top: 0.4rem;
		font-size: clamp(1.25rem, calc(2.2dvh), 1.5rem);
		line-height: 1.25;
	}

	.hero__date {
		margin-top: 0.55rem;
	}

	.stage {
		align-items: start;
		padding-top: 0;
	}

	.stage__cask,
	.stage__wish {
		align-self: start;
	}

	.stage__cask {
	}

	.quiz-drops-counter {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		line-height: 1.25;
	}

	.cask-art {
		width: min(100%, calc(46dvh));
	}

	.campaign-countdown {
		margin-top: 0.75rem;
	}

	.stage__wish .wish-card {
		padding: clamp(1rem, calc(1.8dvh), 1.5rem);
	}

	.stage__wish .wish-card__head {
		margin-bottom: clamp(0.75rem, calc(1.5dvh), 1rem);
	}

	.stage__wish .wish-card__greeting {
		margin-top: 0.4rem;
	}

	.stage__wish .wish-form {
		gap: clamp(0.75rem, calc(1.2dvh), 1rem);
	}

	.stage__wish .wish-input {
		padding: 0.75rem 0.875rem;
		line-height: 1.8;
	}

	.stage__wish .wish-name-input {
		min-height: clamp(44px, calc(5dvh), 50px);
		padding: 0.7rem 0.8rem;
	}

	.stage__wish .wish-submit {
		padding-block: 1rem;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	.cask-art {
		width: min(100%, calc(30.5dvh));
	}

	.hero__content {
		padding-top: clamp(2rem, calc(4dvh), 3rem);
	}

	.hero__titles {
		margin-bottom: 0.25rem;
	}
}

@media (min-width: 1024px) and (max-height: 700px) {
	.hero__content {
		padding-top: 1.25rem;
		padding-bottom: 0.5rem;
	}

	.hero__brand {
		width: 60px;
		height: 38px;
		margin-bottom: 0.5rem;
	}

	.hero__titles {
		margin-bottom: 0.25rem;
	}

	.hero__title {
		font-size: clamp(40px, 6.5dvh, 46px);
	}

	.hero__subtitle {
		margin-top: 0.15rem;
		font-size: 22px;
	}

	.hero__date {
		margin-top: 0.2rem;
		font-size: 14px;
	}

	.stage {
		gap: 0.5rem;
	}

	.cask-art {
		width: min(100%, 30.5dvh);
	}

	.campaign-countdown {
		margin-top: 0.25rem;
		padding: 0.15rem 0.2rem;
	}

	.campaign-countdown__heading {
		font-size: 0.68rem;
	}

	.campaign-countdown__units {
		gap: 0.25rem;
		padding-top: 0.3rem;
	}

	.campaign-countdown__lantern {
		height: 2rem;
	}

	.campaign-countdown__units strong {
		font-size: 1.25rem;
	}

	.campaign-countdown__unit small {
		margin-top: 0.15rem;
	}

	.stage__wish .wish-card {
		padding: 1rem;
	}

	.stage__wish .wish-card__head {
		margin-bottom: 0.65rem;
	}

	.stage__wish .wish-card__title {
		font-size: 1.1rem;
	}

	.stage__wish .wish-card__greeting {
		margin-top: 0.3rem;
		font-size: 11px;
	}

	.stage__wish .wish-form {
		gap: 0.5rem;
	}

	.stage__wish .wish-input {
		height: 5rem;
		padding: 0.4rem 0.55rem;
	}

	.stage__wish .wish-name-input {
		min-height: 38px;
		padding: 0.4rem 0.5rem;
	}

	.stage__wish .wish-submit {
		min-height: 42px;
		padding: 0.5rem;
	}
}

@media (max-width: 639px) {
	.hero {
		display: flex;
		flex-direction: column;
		height: calc(100vh);
		height: calc(100dvh);
		min-height: 0;
	}

	.hero__content {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: 2.75rem 0.75rem 0.5rem;
	}

	.hero__titles {
		flex: 0 0 auto;
		margin-bottom: 0.5rem;
	}

	.hero__brand {
		width: 54px;
		height: 34px;
		margin-bottom: 0.4rem;
	}

	.hero__title {
		font-size: 28px;
	}

	.hero__subtitle {
		margin-top: 0.1rem;
		font-size: 18px;
	}

	.hero__date {
		margin-top: 0.2rem;
		font-size: 13px;
	}

	.stage {
		flex: 1;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 0.5rem;
		min-height: 0;
		align-content: space-between;
		align-items: center;
	}

	.cask-box {
		max-width: 100%;
	}

	.cask-art {
		width: min(100%, 18.75dvh);
	}

	.quiz-drops-counter {
		margin-top: 0.25rem;
		padding: 0.25rem 0.6rem;
		font-size: 0.7rem;
	}

	.quiz-drops-counter strong {
		font-size: 1rem;
	}

	.campaign-countdown {
		margin-top: 0.25rem;
		padding: 0.15rem 0.25rem 0.1rem;
	}

	.campaign-countdown__heading {
		font-size: 0.68rem;
	}

	.campaign-countdown__units {
		gap: 0.25rem;
		padding-top: 0.25rem;
	}

	.campaign-countdown__lantern {
		height: 1.75rem;
		border-radius: 0.5rem;
	}

	.campaign-countdown__units strong {
		font-size: 1.15rem;
	}

	.campaign-countdown__unit small {
		margin-top: 0.1rem;
		font-size: 0.55rem;
	}

	.stage__wish .wish-card {
		padding: 0.75rem;
	}

	.stage__wish .wish-card__head {
		margin-bottom: 0.5rem;
	}

	.stage__wish .wish-card__title {
		font-size: 1.2rem;
	}

	.stage__wish .wish-card__greeting {
		font-size: 11px;
	}

	.stage__wish .wish-form {
		gap: 0.4rem;
	}

	.stage__wish .wish-input {
		height: 3.5rem;
		padding: 0.4rem 0.55rem;
	}

	.stage__wish .wish-name-input {
		min-height: 38px;
		padding: 0.45rem 0.55rem;
	}

	.stage__wish .wish-submit {
		min-height: 40px;
		padding: 0.5rem;
	}
}

@media (max-width: 639px) and (max-height: 780px) {
	.hero__content {
		padding-top: 1.5rem;
		padding-bottom: 0.25rem;
	}

	.hero__brand {
		width: 48px;
		height: 30px;
	}

	.hero__title {
		font-size: 26px;
	}

	.hero__subtitle {
		font-size: 16px;
	}

	.hero__date {
		font-size: 12px;
	}

	.campaign-countdown__lantern {
		height: 1.5rem;
	}

	.stage__wish .wish-card {
		padding: 0.5rem;
	}

	.stage__wish .wish-card__head {
		margin-bottom: 0.3rem;
	}

	.stage__wish .wish-form {
		gap: 0.3rem;
	}

	.stage__wish .wish-input {
		height: 3rem;
	}

	.stage__wish .wish-name-input {
		min-height: 34px;
	}

	.stage__wish .wish-submit {
		min-height: 38px;
	}
}

@media (max-width: 639px) and (max-height: 680px) {
	.hero__content {
		padding-top: 1rem;
	}

	.hero__brand {
		width: 44px;
		height: 28px;
	}

	.hero__title {
		font-size: 24px;
	}

	.hero__subtitle {
		font-size: 15px;
	}

	.hero__date {
		font-size: 11px;
	}

	.cask-art {
		width: min(100%, 16.5dvh);
	}

	.campaign-countdown__lantern {
		height: 1.35rem;
	}

	.stage__wish .wish-card {
		padding: 0.4rem;
	}

	.stage__wish .wish-card__head {
		margin-bottom: 0.2rem;
	}

	.stage__wish .wish-form {
		gap: 0.25rem;
	}

	.stage__wish .wish-input {
		height: 2.5rem;
	}

	.stage__wish .wish-name-input {
		min-height: 32px;
	}

	.stage__wish .wish-submit {
		min-height: 34px;
	}
}

@media (max-width: 639px) and (max-height: 640px) {
	.hero__content {
		padding-top: 0.75rem;
		padding-bottom: 0;
	}

	.hero__titles {
		margin-bottom: 0.25rem;
	}

	.cask-art {
		width: min(100%, 18.75dvh);
	}

	.stage__wish .wish-card {
		padding: 0.25rem;
	}

	.stage__wish .wish-card__head {
		margin-bottom: 0.1rem;
	}

	.stage__wish .wish-card__title {
		font-size: 1rem;
	}

	.stage__wish .wish-form {
		gap: 0.15rem;
	}

	.stage__wish .wish-input {
		height: 2rem;
	}

	.stage__wish .wish-name-input {
		min-height: 28px;
	}

	.stage__wish .wish-submit {
		min-height: 30px;
	}
}

@media (max-width: 639px) and (max-height: 580px) {
	.hero__content {
		padding-top: 0;
	}

	.hero__titles {
		margin-bottom: 0;
	}

	.hero__brand {
		width: 40px;
		height: 25px;
		margin-bottom: 0.25rem;
	}

	.hero__title {
		font-size: 22px;
	}

	.hero__subtitle {
		margin-top: 0;
		font-size: 14px;
	}

	.hero__date {
		margin-top: 0.1rem;
		font-size: 10px;
	}

	.stage {
		gap: 0.15rem;
	}

	.cask-art {
		width: min(100%, 16.5dvh);
	}

	.campaign-countdown {
		margin-top: 0.15rem;
		padding: 0.1rem 0.15rem;
	}

	.campaign-countdown__heading {
		font-size: 0.6rem;
	}

	.campaign-countdown__units {
		gap: 0.15rem;
		padding-top: 0.2rem;
	}

	.campaign-countdown__lantern {
		height: 1.15rem;
	}

	.campaign-countdown__units strong {
		font-size: 1rem;
	}

	.campaign-countdown__unit small {
		font-size: 0.45rem;
	}
}

/* Hero luôn vừa 100dvh: cỡ chữ và thùng rượu theo chiều cao, cột còn lại co giãn */
@media (min-width: 1024px) {
	.hero__content {
		padding-top: clamp(0.5rem, 2.5dvh, 2rem);
		padding-bottom: clamp(0.5rem, 1.5dvh, 1rem);
	}

	.hero__brand {
		position: absolute;
		top: -2.5rem;
		left: 50%;
		margin: 0;
		transform: translateX(-50%);
	}

	.user-chip__name,
	.header-login {
		font-size: 0.875rem;
	}

	.fjp-language-switch a,
	.pill-toggle {
		font-size: 0.8125rem;
	}

	.hero__title {
		font-size: clamp(3rem, 8.5dvh, 6rem);
	}

	.hero__subtitle {
		margin-top: clamp(0.25rem, 0.6dvh, 0.5rem);
		font-size: clamp(1.375rem, 3.4dvh, 2.5rem);
		line-height: 1.25;
	}

	.hero__date {
		margin-top: clamp(0.25rem, 0.8dvh, 0.5rem);
		font-size: clamp(1rem, 2.2dvh, 1.625rem);
	}

	.stage {
		align-items: stretch;
		gap: clamp(1rem, 2.5dvh, 2rem);
	}

	.stage__cask {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		min-height: 0;
	}

	.cask-box {
		flex: 1 1 0;
		width: auto;
		height: auto;
		min-height: 0;
		max-width: 100%;
		aspect-ratio: 720 / 680;
	}

	.cask-art {
		width: 100%;
		height: 100%;
	}

	.sake-ruler {
		top: 40%;
		bottom: 9%;
		right: -1rem;
		justify-content: space-between;
	}

	.sake-ruler__body {
		flex: 1 1 0;
		min-height: 0;
		align-items: stretch;
	}

	.sake-ruler__label {
		font-size: clamp(0.75rem, 1.4dvh, 0.9375rem);
	}

	.sake-ruler__tube,
	.sake-ruler__ticks {
		height: auto;
	}

	.sake-ruler__pct {
		font-size: clamp(0.875rem, 1.6dvh, 1.125rem);
	}

	.quiz-drops-counter {
		margin-top: clamp(0.5rem, 1.2dvh, 0.875rem);
		padding: clamp(0.3rem, 0.8dvh, 0.5rem) clamp(1rem, 2vw, 1.5rem);
		font-size: clamp(0.9375rem, 1.8dvh, 1.125rem);
	}

	.quiz-drops-counter strong {
		font-size: clamp(1.25rem, 2.8dvh, 1.75rem);
	}

	.campaign-countdown {
		width: min(100%, 36rem);
		margin-top: clamp(0.5rem, 1.4dvh, 1rem);
		padding: clamp(0.5rem, 1dvh, 0.75rem) clamp(0.75rem, 1.5vw, 1.25rem) clamp(0.5rem, 0.9dvh, 0.75rem);
	}

	.campaign-countdown__heading {
		font-size: clamp(0.9375rem, 1.8dvh, 1.125rem);
		margin-bottom: clamp(0.5rem, 1.4dvh, 0.875rem);
	}

	.campaign-countdown__units {
		gap: clamp(0.4rem, 1vw, 0.75rem);
		padding-top: clamp(0.6rem, 1.6dvh, 1rem);
	}

	.campaign-countdown__lantern {
		height: clamp(2.75rem, 6dvh, 5rem);
	}

	.campaign-countdown__units strong {
		font-size: clamp(1.75rem, 4.2dvh, 2.625rem);
	}

	.campaign-countdown__unit small {
		margin-top: clamp(0.25rem, 0.6dvh, 0.5rem);
		font-size: clamp(0.8125rem, 1.6dvh, 1rem);
	}

	.stage__wish {
		align-items: stretch;
		align-self: stretch;
		min-height: 0;
	}

	.wish-card-stack {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-width: 30rem;
	}

	.stage__wish:has(.wish-thanks:not(.hidden)) .wish-card-stack,
	.stage__wish:has(.wish-sent:not(.hidden)) .wish-card-stack {
		height: auto;
		align-self: center;
	}

	.stage__wish:has(.wish-thanks:not(.hidden)) .wish-card,
	.stage__wish:has(.wish-sent:not(.hidden)) .wish-card {
		flex: none;
	}

	.stage__wish .wish-card {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
		padding: clamp(1rem, 2.4dvh, 2rem);
	}

	.stage__wish .wish-card__title {
		font-size: clamp(1.75rem, 4.2dvh, 2.75rem);
	}

	.stage__wish .wish-card__head {
		margin-bottom: clamp(0.5rem, 1.2dvh, 1rem);
	}

	.stage__wish .wish-card__greeting {
		font-size: clamp(0.9375rem, 1.7dvh, 1.125rem);
	}

	.stage__wish .wish-form {
		flex: 1 1 auto;
		min-height: 0;
		gap: clamp(0.5rem, 1.1dvh, 0.875rem);
	}

	.stage__wish .wish-name-field {
		font-size: clamp(0.9375rem, 1.6dvh, 1.0625rem);
	}

	.stage__wish .wish-name-input {
		min-height: clamp(2.5rem, 5.5dvh, 3.25rem);
		padding: clamp(0.5rem, 1dvh, 0.75rem);
		font-size: clamp(0.9375rem, 1.8dvh, 1.125rem);
	}

	.stage__wish .wish-input {
		flex: 1 1 0;
		min-height: clamp(4.5rem, 11dvh, 9rem);
		padding: clamp(0.5rem, 1.1dvh, 0.875rem);
		font-size: clamp(0.9375rem, 1.8dvh, 1.125rem);
		line-height: 1.6;
	}

	.stage__wish .chip-row {
		gap: 0.5rem;
	}

	.stage__wish .chip {
		padding: clamp(0.3rem, 0.7dvh, 0.5rem) clamp(0.6rem, 1.2dvh, 0.8rem);
		font-size: clamp(0.8125rem, 1.6dvh, 1rem);
	}

	.stage__wish .wish-submit {
		min-height: clamp(2.75rem, 6dvh, 3.5rem);
		padding-block: clamp(0.5rem, 1.2dvh, 0.875rem);
		font-size: clamp(0.9375rem, 1.8dvh, 1.125rem);
	}
}

/* Hero trên máy tính bảng và điện thoại: xếp dọc theo nội dung, không ép vừa 100dvh */
@media (max-width: 1023px) {
	.hero {
		display: block;
		height: auto;
		min-height: 0;
	}

	.hero__content {
		display: flex;
		flex: none;
		flex-direction: column;
		height: auto;
		min-height: 0;
		padding: 3rem 1rem 1.5rem;
	}

	.hero__titles {
		flex: none;
		margin-bottom: 1rem;
	}

	.hero__brand {
		width: 4rem;
		height: auto;
		margin-bottom: 0.375rem;
	}

	.hero__title {
		font-size: clamp(2.25rem, 12.5vw, 3.75rem);
	}

	.hero__subtitle {
		margin-top: 0.125rem;
		font-size: clamp(1.125rem, 4.2vw, 1.5rem);
	}

	.hero__date {
		margin-top: 0.25rem;
		font-size: clamp(0.9375rem, 3.2vw, 1.125rem);
	}

	.stage {
		display: flex;
		flex: none;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		height: auto;
		min-height: 0;
	}

	.stage__cask {
		display: flex;
		flex: none;
		flex-direction: column;
		align-items: center;
		width: 100%;
		min-height: 0;
	}

	.cask-box {
		flex: none;
		width: min(100%, 18.75rem);
		height: auto;
		min-height: 0;
		max-width: 100%;
		aspect-ratio: 720 / 680;
	}

	.cask-art {
		width: 100%;
		height: 100%;
	}

	.sake-ruler {
		right: -5rem;
	}

	.sake-ruler__label {
		font-size: 0.75rem;
	}

	.sake-ruler__tube,
	.sake-ruler__ticks {
		height: 6rem;
	}

	.sake-ruler__pct {
		font-size: 0.875rem;
	}

	.quiz-drops-counter {
		margin-top: 0.5rem;
		padding: 0.375rem 0.875rem;
		font-size: 0.9375rem;
	}

	.quiz-drops-counter strong {
		font-size: 1.25rem;
	}

	.campaign-countdown {
		width: min(100%, 26rem);
		margin-top: 0.5rem;
		padding: 0.5rem 0.75rem;
	}

	.campaign-countdown__heading {
		font-size: 0.875rem;
	}

	.campaign-countdown__units {
		gap: 0.5rem;
		padding-top: 0.75rem;
	}

	.campaign-countdown__lantern {
		height: 2.75rem;
		border-radius: 0.5rem;
	}

	.campaign-countdown__units strong {
		font-size: 1.5rem;
	}

	.campaign-countdown__unit small {
		margin-top: 0.25rem;
		font-size: 0.75rem;
	}

	.stage__wish {
		display: flex;
		flex: none;
		justify-content: center;
		align-items: stretch;
		width: 100%;
		height: auto;
		min-height: 0;
	}

	.wish-card-stack {
		width: 100%;
		max-width: 30rem;
		height: auto;
	}

	.stage__wish .wish-card {
		flex: none;
		height: auto;
		padding: 1rem 1.125rem;
	}

	.stage__wish .wish-card__title {
		font-size: 1.75rem;
	}

	.stage__wish .wish-card__head {
		margin-bottom: 0.5rem;
	}

	.stage__wish .wish-card__greeting {
		font-size: 0.9375rem;
	}

	.stage__wish .wish-form {
		flex: none;
		height: auto;
		gap: 0.625rem;
	}

	.stage__wish .wish-name-field {
		font-size: 0.9375rem;
	}

	.stage__wish .wish-name-input {
		min-height: 2.75rem;
		padding: 0.5rem 0.75rem;
		font-size: 16px;
	}

	.stage__wish .wish-input {
		flex: none;
		height: 6rem;
		padding: 0.625rem 0.75rem;
		font-size: 16px;
		line-height: 1.5;
	}

	.stage__wish .chip {
		padding: 0.3rem 0.6rem;
		font-size: 0.8125rem;
	}

	.stage__wish .wish-submit {
		min-height: 3rem;
		padding-block: 0.5rem;
		font-size: 1rem;
	}
}

/* ═══════════════ 11 · HIỆU ỨNG CUỘN TRANG & TƯƠNG TÁC ═══════════════ */

/* --- Hiện dần khi cuộn tới. Chỉ dùng cho các khối DƯỚI hero; hero phải
       thấy ngay từ đầu, không được nhá lên. --- */
/* Gắn vào html.js (app.js bật lên ngay dòng đầu): nếu JS không chạy thì
   không có class này, nội dung hiện bình thường thay vì ẩn vĩnh viễn. */
.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) var(--rv, 0s),
		transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) var(--rv, 0s);
}

/* Phải là .reveal.reveal--in, không được để .reveal--in trần: cổng
   `.js .reveal` ở trên có độ ưu tiên (0,2,0), một class trần (0,1,0) sẽ
   thua và khối ẩn vĩnh viễn. */
.reveal.reveal--in {
	opacity: 1;
	transform: none;
}

/* --- Nét bút lông dưới tiêu đề, tự vẽ ra khi khối hiện --- */
.brush {
	display: block;
	width: 132px;
	height: 12px;
	margin-top: 0.55rem;
	overflow: visible;
}

.brush--center {
	margin-inline: auto;
}

.brush__line {
	fill: none;
	stroke: var(--vermilion);
	stroke-width: 4.5;
	stroke-linecap: round;
	stroke-dasharray: 250;
	stroke-dashoffset: 250;
	transition: stroke-dashoffset 0.95s cubic-bezier(0.3, 0.8, 0.3, 1) 0.2s;
}

.reveal--in .brush__line,
.reveal--in + .brush .brush__line {
	stroke-dashoffset: 0;
}

/* --- Thẻ lời chúc trồi lên mỗi lần lưới vẽ lại (lọc, tìm kiếm) ---
       backwards chứ không phải both: giữ khung cuối thì transform:none
       sẽ đè mất hiệu ứng hover translateY của thẻ. */
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.anim-rise {
	animation: rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) backwards;
}

/* --- Thanh tiến độ cuộn, dùng lại dải màu của thước sake --- */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 78;
	height: 3px;
	background: rgba(122, 85, 64, 0.1);
	pointer-events: none;
}

.scroll-progress__bar {
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(
		to right,
		var(--vermilion),
		var(--gold) 55%,
		var(--gold-light)
	);
}

/* --- Thanh điều hướng gọn, hiện sau khi hero cuộn qua ---
       Dùng visibility để lúc ẩn thì phím Tab không lọt vào được. */
.mini-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 74;
	visibility: hidden;
	transform: translateY(-100%);
	border-bottom: 1px solid var(--line);
	background: rgba(253, 245, 230, 0.9);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 18px -10px rgba(150, 85, 25, 0.5);
	transition:
		transform 0.42s cubic-bezier(0.22, 0.8, 0.3, 1),
		visibility 0.42s;
}

.mini-bar--in {
	visibility: visible;
	transform: none;
}

.mini-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--shell);
	margin-inline: auto;
	padding: 0.5rem 1rem;
}

.mini-bar__countdown {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.25rem;
	margin-inline: auto;
	color: var(--vermilion-dark);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(0.5rem) scale(0.94);
	transition: opacity 0.35s ease, transform 0.48s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mini-bar--in .mini-bar__countdown.mini-countdown--in {
	opacity: 1;
	transform: none;
	transition-delay: 0.1s;
}

.mini-bar__countdown small {
	font-family: 'Be Vietnam Pro', sans-serif;
	font-size: 0.625rem;
}

.mini-bar__countdown-time {
	margin-left: 0.35rem;
	padding-left: 0.55rem;
	border-left: 1px solid var(--gold-deep);
}

@media (max-width: 479px) {
	.sake-ruler { right: -1rem; }
	.mini-bar__inner { gap: 0.35rem; }
	.mini-bar__seconds { display: none; }
	.mini-bar__countdown-time { display: none; }
}

.mini-bar__nav {
	display: none;
	align-items: center;
	gap: 1.25rem;
}

.mini-bar__link {
	position: relative;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-soft);
	text-decoration: none;
	transition: color 0.2s ease;
}

.mini-bar__link::before {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: max(100%, 44px);
	height: 44px;
}

.mini-bar__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 2px;
	border-radius: 2px;
	background: var(--vermilion);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mini-bar__link:hover {
	color: var(--vermilion);
}

.mini-bar__link:hover::after {
	transform: scaleX(1);
}

@media (min-width: 768px) {
	.mini-bar__nav {
		display: flex;
	}
}

/* Chừa chỗ cho thanh gọn khi nhảy tới neo trong trang */
#quiz,
#wish-wall,
#posts {
	scroll-margin-top: 62px;
}

/* --- Bài viết: tab Tin tức / Khoảnh khắc --- */
.posts-section {
	position: relative;
	padding-block: 3.5rem;
	overflow: hidden;
	background: linear-gradient(180deg, #e6f2f7 0%, #f5f9f8 100%);
}

.posts-tabs {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 2rem;
	padding: 0.25rem;
	border: 1px solid var(--line);
	border-radius: 9999px;
	background: var(--washi-sand);
}

.posts-tab {
	padding: 0.5rem 1.25rem;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	transition:
		background 0.2s ease,
		color 0.2s ease;
}

.posts-tab[aria-selected='true'] {
	background: linear-gradient(180deg, var(--vermilion-light), var(--vermilion));
	color: #fff;
	box-shadow: 0 4px 12px rgba(22, 78, 115, 0.25);
}

.posts-tab:focus-visible {
	outline: 2px solid var(--vermilion);
	outline-offset: 2px;
}

.posts-grid,
.moments-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	border-radius: 1rem;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.post-card:hover {
	transform: translateY(-0.25rem);
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.post-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--washi-sand);
}

.post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
}

.post-card__date {
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-faint);
}

.post-card__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.35;
	color: var(--ink-deep);
}

.post-card__title a {
	color: inherit;
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--vermilion);
}

.post-card__excerpt {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-soft);
}

.posts-more {
	margin-top: 2rem;
	text-align: center;
}

.posts-more__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1.5rem;
	border: 1.5px solid var(--vermilion);
	border-radius: 9999px;
	background: #fff;
	color: var(--vermilion-dark);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 6px 16px -8px rgba(22, 78, 115, 0.35);
	transition:
		background 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.posts-more__link::after {
	content: '';
	width: 0.45rem;
	height: 0.45rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.posts-more__link:hover {
	background: linear-gradient(180deg, var(--vermilion-light), var(--vermilion));
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(22, 78, 115, 0.45);
}

.posts-more__link:hover::after {
	transform: translateX(3px) rotate(45deg);
}

.posts-more__link:focus-visible {
	outline: 2px solid var(--vermilion);
	outline-offset: 3px;
}

.moment-tile {
	margin: 0;
	overflow: hidden;
	padding: 0;
	aspect-ratio: 4 / 3;
	border-radius: 1rem;
	background: #0b1d29;
}

.moment-tile img,
.moment-tile video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.moment-tile video {
	object-fit: contain;
}

@media (min-width: 768px) {
	.posts-grid,
	.moments-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.posts-grid,
	.moments-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Nút về đầu trang --- */
.to-top {
	position: fixed;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 74;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid var(--line);
	border-radius: 9999px;
	background: rgba(255, 251, 242, 0.92);
	color: var(--vermilion);
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 18px -8px rgba(150, 85, 25, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 0.32s ease,
		transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1),
		visibility 0.32s;
}

.to-top--in {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.to-top:hover {
	background: var(--vermilion);
	color: #fff;
	border-color: var(--vermilion);
}

.to-top svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* --- Tạm dừng hoạ tiết khi hero ra khỏi tầm nhìn.
       Phải đặt sau các lớp .anim-* vì shorthand `animation` của chúng
       reset play-state về running. --- */
.is-paused,
.is-paused * {
	animation-play-state: paused;
}

@media (max-width: 900px) {
	.timeline-col {
		margin-top: 3.5rem;
		padding-top: 2.5rem;
	}

	.timeline-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
		margin-bottom: 1.5rem;
	}

	.timeline-heading__title {
		font-size: 2.25rem;
	}

	.timeline-heading__intro {
		max-width: 32rem;
		font-size: 13px;
	}

	.timeline-story {
		display: flex;
		flex-direction: column;
	}

	.timeline-story__rail {
		top: 4.2rem;
		z-index: 25;
		margin: 0 -0.25rem 1.25rem;
		padding: 0.6rem 0.25rem 0.5rem;
		border-bottom: 1px solid var(--line);
		background: var(--washi);
		order: 0;
	}

	.timeline-story__rail-head {
		margin-bottom: 0.25rem;
		font-size: 9px;
	}

	.timeline-story__progress {
		display: none;
	}

	.timeline-nav {
		display: flex;
		gap: 0.4rem;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		padding: 0.25rem 0 0.4rem;
		scrollbar-width: thin;
	}

	.timeline-nav__item {
		flex: 0 0 8.75rem;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem;
		min-height: 3.2rem;
		padding: 0.4rem 0.55rem 0.4rem 1rem;
		border: 1px solid var(--line);
		background: rgba(255, 251, 242, 0.75);
	}

	.timeline-nav__item::before {
		left: 0.35rem;
		width: 5px;
		height: 5px;
		border: 0;
	}

	.timeline-nav__item.is-active {
		border-color: var(--vermilion);
		background: #fff8e9;
	}

	.timeline-nav__year {
		font-size: 11px;
	}

	.timeline-nav__label {
		display: -webkit-box;
		overflow: hidden;
		font-size: 9px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.timeline-visual-stage {
		position: sticky;
		top: 9.5rem;
		z-index: 10;
		order: 1;
		width: 100%;
		height: clamp(190px, calc(28vh), 250px);
		min-height: 0;
		margin: 0 0 0.5rem;
	}

	.timeline {
		order: 2;
		width: 100%;
	}

	.timeline__chapter {
		align-items: flex-start;
		min-height: max(calc(80vh), 620px);
		padding: 1rem 0;
		opacity: 0.28;
	}

	.timeline__chapter-copy {
		position: sticky;
		top: calc(9.5rem + clamp(190px, calc(28vh), 250px) + 1rem);
		align-self: flex-start;
	}

	.timeline__chapter:first-child {
		padding-top: 1rem;
	}

	.timeline__chapter-title {
		font-size: 1.65rem;
	}

	.timeline__chapter-desc {
		margin-top: 0.75rem;
	}

	.timeline__metric {
		bottom: 0.65rem;
		left: 0.65rem;
		padding: 0.6rem 0.75rem;
	}

	.timeline__metric strong {
		font-size: 1.45rem;
	}

	.timeline__chapter-number {
		top: 0.65rem;
		font-size: 3rem;
	}

	.timeline-footnote {
		align-items: flex-start;
		line-height: 1.5;
	}
}

/* --- Viền focus bằng bàn phím, cho toàn trang --- */
:focus-visible {
	outline: 2.5px solid var(--vermilion);
	outline-offset: 2px;
	border-radius: 4px;
}

.wish-input:focus-visible {
	outline: none;
}

/* ═══════════════ 12 · THANH CUỘN & GIẢM CHUYỂN ĐỘNG ═══════════════ */

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #f5e7cf;
}

::-webkit-scrollbar-thumb {
	background: #ddbc8a;
	border-radius: 6px;
	border: 2px solid #f5e7cf;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--vermilion);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}

/* Standalone campaign route hardening */
html,
body.fjp-1000-oku-page {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 100% !important;
}
body.fjp-1000-oku-page {
	background: var(--washi) !important;
}
body.fjp-1000-oku-page
	> :where(
		header,
		footer,
		aside,
		.site-header,
		.site-footer,
		#masthead,
		#colophon
	),
body.fjp-1000-oku-page #wpadminbar {
	display: none !important;
}