/* Tỉnh — trang chờ ra mắt. Chữ và màu theo app: Cormorant cho tiêu đề, Be Vietnam Pro cho chữ đọc, nền giấy của tranh thuỷ mặc. */
@font-face{font-family:Cormorant;src:url(fonts/cormorant-regular.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-medium.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-italic.woff) format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url(fonts/be-vietnam-400.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url(fonts/be-vietnam-500.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}

:root{
  --giay:#fdfaf0;          /* đúng màu giấy của tranh chính (ink-046); đổi tranh thì đo lại màu này */
  --giay-dam:#f3ecdf;
  --muc:#1e2320;
  --muc-vua:#3f443f;
  --muc-nhat:#6d6c63;
  --vien:#ddd3c1;
  --loi:#8a3b2e;
  --serif:Cormorant,'Cormorant Garamond',Georgia,serif;
  --sans:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--giay);color:var(--muc);font:400 17px/1.75 var(--sans);font-variant-numeric:lining-nums} /* Cormorant mặc định dùng số kiểu cổ (101 trông như ıoı) */
img{max-width:100%;display:block}
a{color:inherit}

.dau{display:flex;justify-content:space-between;align-items:center;max-width:980px;margin:0 auto;padding:18px 22px;font-size:14px}
.ten-nho{font-family:var(--serif);font-size:24px;font-weight:500;text-decoration:none;letter-spacing:.01em}
.doi-ngon-ngu{color:var(--muc-vua);text-decoration:none;border-bottom:1px solid var(--vien);padding-bottom:1px}
.doi-ngon-ngu:hover{border-color:var(--muc-vua)}

.khung{max-width:640px;margin:0 auto;padding:0 22px}

/* Mở đầu */
.mo-dau{text-align:center;padding-top:4px;padding-bottom:76px}
.tranh{width:min(78vw,360px);height:auto;aspect-ratio:1;margin:0 auto 6px;object-fit:cover;
  filter:brightness(1.12);mix-blend-mode:multiply} /* giấy trắng hẳn rồi nhân màu với nền: không lộ khung, không lộ vân giấy */
.mo-dau h1{font-family:var(--serif);font-weight:500;font-size:clamp(76px,19vw,132px);line-height:1;margin:0;letter-spacing:.01em}
.phu{font-family:var(--serif);font-size:clamp(27px,6.4vw,36px);line-height:1.2;margin:10px 0 0}
.tagline{font-family:var(--serif);font-style:italic;font-size:clamp(21px,4.9vw,26px);line-height:1.35;color:var(--muc-vua);margin:16px 0 0}
.mo-ta{max-width:30em;margin:24px auto 0;font-weight:500}
.tac-gia{margin:26px 0 0;font-family:var(--serif);font-style:italic;font-size:21px;color:var(--muc-nhat)}

.nut{display:inline-block;margin-top:30px;background:var(--muc);color:var(--giay);text-decoration:none;border:0;border-radius:999px;padding:15px 28px;font:500 16px/1.2 var(--sans);cursor:pointer;transition:background .25s}
.nut:hover{background:#000}
.nut:disabled{opacity:.55;cursor:default}
.nut:focus-visible,input:focus-visible,.doi-ngon-ngu:focus-visible{outline:2px solid var(--muc);outline-offset:3px}

/* Các mục */
.muc{padding-top:64px;padding-bottom:64px;border-top:1px solid var(--vien)} /* chỉ lề trên-dưới: lề hai bên do .khung giữ */
.muc h2,.cho h2{font-family:var(--serif);font-weight:500;font-size:clamp(31px,7.2vw,42px);line-height:1.2;margin:0 0 30px;text-align:center}
.buoc{display:grid;grid-template-columns:8em 1fr;gap:4px 20px;align-items:baseline;margin:0 0 24px}
.buoc h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:27px;line-height:1.2;margin:0}
.buoc p{margin:0}
.chot{text-align:center;font-family:var(--serif);font-size:clamp(24px,5.6vw,29px);line-height:1.35;margin:40px 0 0}
.giua{text-align:center}
.tim-theo{font-family:var(--serif);font-size:clamp(23px,5.4vw,27px);margin:0 0 20px}
.dong{margin:0 0 8px}
.anh-con{width:min(72vw,300px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:22px;margin:0 auto 28px}
.gia-lon{font-family:var(--serif);font-size:clamp(25px,6vw,31px);line-height:1.35;margin:12px 0}
.ngon-ngu{color:var(--muc-vua);margin-top:18px}

/* Danh sách chờ */
.cho{background:var(--giay-dam);border-radius:20px;padding:46px 24px;margin:8px 0 64px;text-align:center}
.cho h2{margin-bottom:14px}
.cho .loi-moi{max-width:26em;margin:0 auto 26px}
.o-email{width:100%;max-width:380px;padding:14px 16px;border:1px solid #cdc2ad;border-radius:12px;background:#fffdf8;font:16px var(--sans);color:var(--muc)}
.dong-y{display:flex;gap:10px;align-items:flex-start;justify-content:center;text-align:left;max-width:380px;margin:16px auto 0;font-size:15px;line-height:1.55;cursor:pointer}
.dong-y input{flex:none;width:18px;height:18px;margin-top:3px;accent-color:var(--muc)}
.bay{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.loi{min-height:1.6em;margin:14px 0 0;color:var(--loi);font-size:15px}
.cam-on h2{margin-bottom:10px}
.cam-on p{margin:0}
.ghi-chu{font-size:13.5px;color:var(--muc-nhat);margin:22px auto 0;max-width:28em}

.cuoi{text-align:center;color:var(--muc-nhat);font-size:14px;padding:0 22px 52px}
.cuoi .ten{font-family:var(--serif);font-size:20px;color:var(--muc)}

.an{display:none!important}

/* Hiện dần khi cuộn tới — chỉ khi có JavaScript, để không có JS thì chữ vẫn hiện đủ */
.js .hien{opacity:0;transform:translateY(10px);transition:opacity .8s ease,transform .8s ease}
.js .hien.ro{opacity:1;transform:none}

@media (max-width:540px){
  body{font-size:16.5px}
  .buoc{grid-template-columns:1fr;gap:2px;margin-bottom:26px}
  .muc{padding-top:54px;padding-bottom:54px}
}