/* ===== Phông tự chứa (chép từ @fontsource, giấy phép OFL — xem public/fonts/NGUON.txt) ===== */
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dancing-script-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dancing-script-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dancing-script-vietnamese-700-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dancing-script-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-vietnamese-500-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ===== Biến giao diện: đổi màu/phông ở đây là đổi cả trang ===== */
:root {
  --nen:        #FFF8F3;   /* kem ấm */
  --nen-thẻ:    #FFFFFF;
  --hong:       #E8B4B8;   /* hồng phấn khói, điểm nhấn chính */
  --hong-dao:   #F6D5CC;   /* hồng đào nhạt */
  --hong-dam:   #C98A92;   /* nút, liên kết */
  --chu:        #5A4044;   /* nâu cacao, không dùng đen thuần */
  --chu-phu:    #8C7377;
  --xanh-xo-thom: #A9B8A3; /* sage, cân màu */
  --nen-khoa:   #2B2124;   /* màn khóa tối dịu */

  --phong-tieu-de: "Dancing Script", "Segoe Script", cursive;
  --phong-noi-dung: "Lora", Georgia, "Times New Roman", serif;
  --phong-giao-dien: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bong: 0 6px 20px rgba(90, 64, 68, 0.14), 0 1px 3px rgba(90, 64, 68, 0.1);
  --le-ngang: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--nen);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--phong-noi-dung);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.75;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
body.khoa-cuon { overflow: hidden; }

h1, h2, h3, p { margin: 0; }

/* ===== Nút chung ===== */
.nut {
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--hong-dam);
  color: #fff;
  font: 600 1.0625rem/1 var(--phong-giao-dien);
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(201, 138, 146, 0.35);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nut:active { transform: scale(0.97); }
.nut:disabled { opacity: 0.7; cursor: default; }
.nut:focus-visible, .o-nhap:focus-visible, .nut-nhac:focus-visible, .vung-anh:focus-visible {
  outline: 3px solid var(--hong);
  outline-offset: 3px;
}

/* ===== Khung màn toàn trang ===== */
.man {
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(var(--le-ngang), env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(var(--le-ngang), env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ===== 1. Màn khóa ===== */
.man-khoa { background: var(--nen-khoa); color: #F3E4E2; }
.khung-khoa {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
}
.tieu-de-khoa {
  font: 700 2.4rem/1.25 var(--phong-tieu-de);
  text-align: center;
  color: var(--hong);
  margin-bottom: 28px;
}
.nhan {
  font: 500 0.95rem/1.4 var(--phong-giao-dien);
  color: #CDB9B8;
  margin: 14px 0 6px;
}
.o-nhap {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid #54444A;
  border-radius: 14px;
  background: #382C30;
  color: #FBEFEC;
  font: 400 1.0625rem/1.2 var(--phong-giao-dien); /* 17px: iPhone không tự phóng to khi chạm vào ô */
  -webkit-appearance: none;
  appearance: none;
}
.o-nhap:focus { border-color: var(--hong); outline: none; }
.thong-bao-khoa {
  min-height: 3em;
  margin: 14px 0 6px;
  font: 400 1rem/1.5 var(--phong-giao-dien);
  color: var(--hong-dao);
  text-align: center;
}
.nut-khoa { width: 100%; background: var(--hong-dam); }

/* ===== Cánh hoa rơi (CSS thuần, chỉ transform + opacity) ===== */
.lop-hoa {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.canh-hoa {
  position: absolute;
  top: -30px;
  left: var(--x);
  width: var(--co);
  height: calc(var(--co) * 1.3);
  background: var(--hong);
  opacity: 0.55;
  border-radius: 80% 0 80% 0;
  animation: roi var(--roi) linear var(--tre) infinite;
  will-change: transform;
}
@keyframes roi {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.55; }
  50%  { transform: translate3d(var(--lac), 55dvh, 0) rotate(calc(var(--xoay) / 2)); }
  92%  { opacity: 0.5; }
  100% { transform: translate3d(calc(var(--lac) * -0.6), 110dvh, 0) rotate(var(--xoay)); opacity: 0; }
}

/* ===== 2. Mở quà ===== */
.man-mo-qua {
  background:
    radial-gradient(ellipse at 50% 18%, var(--hong-dao) 0%, rgba(246, 213, 204, 0) 62%),
    var(--nen);
}
.khung-chao {
  position: relative;
  width: 100%;
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tieu-de-chao { font: 700 3rem/1.2 var(--phong-tieu-de); color: var(--hong-dam); }
.chao-phu { font-size: 1.125rem; color: var(--chu); margin-bottom: 14px; }
.nut-qua { min-height: 56px; padding: 0 36px; font-size: 1.125rem; }
.nhac-am-thanh {
  margin-top: 18px;
  font: 400 0.875rem/1.5 var(--phong-giao-dien); /* chú thích */
  color: var(--chu-phu);
}

/* ===== Trang chính ===== */
.muc { position: relative; }

/* ===== 3. Mở đầu ===== */
.muc-mo-dau {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(24px, env(safe-area-inset-top)) var(--le-ngang) 24px;
  background:
    radial-gradient(ellipse at 50% 30%, var(--hong-dao) 0%, rgba(246, 213, 204, 0) 65%),
    var(--nen);
  overflow: hidden;
}
.khung-mo-dau { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dong-nho { font: 700 1.9rem/1.3 var(--phong-tieu-de); color: var(--hong-dam); }
.so-lon {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--phong-tieu-de);
  color: var(--chu);
}
#so-ngay { font-size: clamp(5rem, 28vw, 8rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.don-vi-ngay { font-size: 2.2rem; color: var(--hong-dam); }
.dem-truc-tiep { display: flex; gap: 10px; margin-top: 12px; font-family: var(--phong-giao-dien); }
.o-dem {
  min-width: 72px;
  padding: 10px 8px 8px;
  background: var(--nen-thẻ);
  border-radius: 14px;
  box-shadow: var(--bong);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.o-dem b { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.o-dem i { font-style: normal; font-size: 0.875rem; color: var(--chu-phu); }
.goi-cuon {
  margin-top: 40px;
  font: 400 0.875rem/1.4 var(--phong-giao-dien);
  color: var(--chu-phu);
  animation: nhap-nho 3s ease-in-out infinite;
}
@keyframes nhap-nho { 0%, 100% { opacity: 0.5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(5px); } }

/* ===== 4. Dòng thời gian — thẻ polaroid ===== */
.muc-dong-thoi-gian { padding: 24px var(--le-ngang) 48px; }
.dong-thoi-gian {
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.the {
  --nghieng: -1.2deg;
  position: relative;
  background: var(--nen-thẻ);
  padding: 12px 12px 18px;
  border-radius: 3px;
  box-shadow: var(--bong);
  transform: translateY(26px) rotate(var(--nghieng));
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.the.chan { --nghieng: 1.1deg; }
.the.hien { opacity: 1; transform: translateY(0) rotate(var(--nghieng)); }
/* Miếng băng dính ở mép trên */
.the::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 78px;
  height: 22px;
  margin-left: -39px;
  background: rgba(169, 184, 163, 0.55);
  transform: rotate(-3deg);
  border-radius: 2px;
}
.the.chan::before { background: rgba(232, 180, 184, 0.6); transform: rotate(2.5deg); }

.vung-anh {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: var(--hong-dao);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  font: inherit;
  color: var(--chu-phu);
}
.anh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.vung-anh.da-co-anh .anh { opacity: 1; }
.anh-thong-bao {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font: 400 0.9375rem/1.5 var(--phong-giao-dien);
}
.vung-anh.da-co-anh .anh-thong-bao { display: none; }

.vung-khong-anh {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0) 55%),
    var(--xanh-xo-thom);
}
.khong-anh-ngay { font: 700 2.2rem/1.2 var(--phong-tieu-de); color: #fff; text-shadow: 0 1px 6px rgba(90, 64, 68, 0.25); }

.chu-thich { padding: 14px 6px 0; }
.ngay-moc { display: block; font: 500 0.875rem/1.4 var(--phong-giao-dien); color: var(--chu-phu); letter-spacing: 0.03em; }
.tieu-de-moc { font: 700 1.7rem/1.3 var(--phong-tieu-de); color: var(--hong-dam); margin: 2px 0 6px; }
.loi-ke { font-size: 1.0625rem; color: var(--chu); }

/* ===== 5. Thư ===== */
.muc-thu { padding: 32px var(--le-ngang) 56px; }
.khung-thu { max-width: 440px; margin: 0 auto; }
.tieu-de-thu { font: 700 2.4rem/1.3 var(--phong-tieu-de); color: var(--hong-dam); margin-bottom: 18px; text-align: center; }
.giay-thu {
  padding: 28px 22px;
  background: var(--nen-thẻ);
  border-radius: 6px;
  box-shadow: var(--bong);
  border-top: 5px solid var(--hong-dao);
}
.doan-thu { font-size: 1.125rem; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.doan-thu + .doan-thu { margin-top: 1.1em; }
.chua-go { color: transparent; user-select: none; }

/* ===== 6. Video ===== */
.muc-video { padding: 16px var(--le-ngang) 56px; }
.khung-video { max-width: 440px; margin: 0 auto; }
.tieu-de-video { font: 700 2rem/1.3 var(--phong-tieu-de); color: var(--hong-dam); text-align: center; margin-bottom: 14px; }
.hop-video {
  background: var(--nen-thẻ);
  padding: 10px;
  border-radius: 6px;
  box-shadow: var(--bong);
}
.hop-video video { display: block; width: 100%; max-height: 80dvh; background: var(--nen-khoa); border-radius: 3px; }
.video-thong-bao {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font: 400 1rem/1.5 var(--phong-giao-dien);
  color: var(--chu-phu);
  background: var(--hong-dao);
  border-radius: 3px;
}
.video-thong-bao.bam-duoc { cursor: pointer; }

/* ===== 7. Màn cuối ===== */
.muc-cuoi {
  min-height: 80dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px var(--le-ngang) max(56px, env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(to bottom, var(--nen) 0%, var(--hong-dao) 100%);
}
.khung-cuoi { max-width: 400px; opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease, transform 1.2s ease; }
.khung-cuoi.hien { opacity: 1; transform: none; }
.tieu-de-cuoi { font: 700 2.6rem/1.3 var(--phong-tieu-de); color: var(--hong-dam); margin-bottom: 14px; }
.noi-dung-cuoi { font-size: 1.1875rem; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ===== Nút nhạc nền cố định góc ===== */
.nut-nhac {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 20;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--hong-dam);
  box-shadow: var(--bong);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gach-cheo {
  position: absolute;
  width: 30px;
  height: 2.5px;
  background: var(--chu-phu);
  border-radius: 2px;
  transform: rotate(-45deg);
  opacity: 0;
}
.nut-nhac.tat { color: var(--chu-phu); }
.nut-nhac.tat .gach-cheo { opacity: 1; }

/* ===== Xem ảnh to ===== */
.xem-anh {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(64px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(43, 33, 36, 0.93);
}
.xem-anh-lon { max-width: 100%; max-height: 100%; object-fit: contain; border: 8px solid #fff; border-radius: 2px; background: #fff; }
.xem-anh-dong {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  background: rgba(255, 255, 255, 0.92);
  color: var(--chu);
  box-shadow: none;
}

/* ===== Người dùng chọn giảm chuyển động: tắt hiệu ứng ===== */
@media (prefers-reduced-motion: reduce) {
  .the, .khung-cuoi { opacity: 1; transform: none; transition: none; }
  .the { transform: rotate(var(--nghieng)); }
  .anh { transition: none; }
  .goi-cuon { animation: none; }
  .canh-hoa { display: none; }
}