/* =================================================================
   css/trang-con.css — riêng cho hai trang con: gui.html (điền & gửi)
   và tuong.html (kho lời chúc).

   Trang chính KHÔNG nạp file này. Nó không cần biết gì về máy ghi âm
   hay bộ lọc, và mấy trăm người mở trang chính không phải tải thêm
   một dòng CSS nào mà họ không dùng tới.

   Nền, màu, font, nút đều thừa hưởng từ css/style.css — hai trang con
   phải trông như cùng một cuốn sổ với trang chính chứ không phải một
   biểu mẫu lạc vào.
   ================================================================= */

/* ---------- thanh trên cùng --------------------------------------- */
.dau{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px max(clamp(16px,5vw,72px),calc((100% - 1200px) / 2));
  background:var(--cream-2);border-bottom:var(--edge);
}
.dau__ve{
  font-family:var(--font-display);font-weight:700;font-size:14px;
  color:var(--ink);text-decoration:none;border:3px solid var(--ink);
  border-radius:30px;padding:6px 16px;background:var(--cream);
  box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s;
}
.dau__ve:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.dau__ten{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.06em;margin:0}
.dau__phai{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.trang{
  padding:26px max(clamp(16px,5vw,72px),calc((100% - 1200px) / 2)) 90px;
}
.trang--hep{padding-bottom:40px}
.trang__deo{
  font-family:var(--font-body);font-style:italic;font-size:clamp(15px,2vw,18px);
  opacity:.72;margin:0 0 30px;max-width:62ch;
}

/* ---------- các bước --------------------------------------------- */
.buoc{
  position:relative;
  border:var(--edge);border-radius:14px;background:var(--cream-2);
  box-shadow:var(--shadow);
  padding:26px 22px 22px;margin:0 0 30px;
}
.buoc__so{
  position:absolute;top:-20px;left:20px;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:20px;
  background:var(--yellow);border:4px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
}
.buoc__ten{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,3.4vw,27px);margin:6px 0 4px;padding-left:36px;
}
.buoc__phu{font-family:var(--font-body);font-style:italic;font-size:14px;opacity:.66;margin:0 0 20px;padding-left:36px}

/* ---------- ô nhập (dùng lại lớp .wish-form của trang chính) -------- */
.chip-hang{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.chip span{
  display:block;font-family:var(--font-display);font-weight:700;font-size:13px;
  border:3px solid var(--ink);border-radius:30px;padding:5px 14px;background:var(--cream);
  transition:transform .12s,box-shadow .12s,background .12s;
}
.chip:hover span{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.chip input:checked + span{background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.chip input:focus-visible + span{outline:3px dashed var(--blue);outline-offset:3px}

/* ---------- chọn kiểu lời chúc ------------------------------------ */
.kieu{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin:0 0 22px}
.kieu__o{position:relative;cursor:pointer}
.kieu__o input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.kieu__hop{
  height:100%;display:flex;flex-direction:column;gap:4px;
  border:4px solid var(--ink);border-radius:12px;background:var(--cream);
  padding:16px 14px;transition:transform .12s,box-shadow .12s,background .12s;
}
.kieu__o:hover .kieu__hop{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.kieu__o input:checked + .kieu__hop{background:var(--yellow);box-shadow:5px 5px 0 var(--ink);transform:translate(-2px,-2px)}
.kieu__o input:focus-visible + .kieu__hop{outline:3px dashed var(--blue);outline-offset:4px}
.kieu__bieu{font-size:26px;line-height:1}
.kieu__ten{font-family:var(--font-display);font-weight:700;font-size:16px}
.kieu__phu{font-family:var(--font-body);font-size:12px;opacity:.66;line-height:1.4}

/* ---------- máy ghi ----------------------------------------------- */
.ghi{border:4px dashed var(--ink);border-radius:14px;padding:18px;background:var(--cream)}
.ghi__khung{
  position:relative;border:4px solid var(--ink);border-radius:10px;overflow:hidden;
  background:#12121a;display:grid;place-items:center;
  /* margin ngang auto: khung video bị max-height bó lại nên hẹp hơn hộp
     chứa, không tự căn giữa thì nó dính lề trái và chừa một mảng trống
     bên phải. */
  margin:0 auto 16px;
}
.ghi__khung--hinh{aspect-ratio:4/3;max-height:min(52vh,420px)}
.ghi__khung--tieng{min-height:150px}
.ghi__xem{width:100%;height:100%;object-fit:cover;display:block;background:#12121a}
/* Lật gương phần XEM TRƯỚC thôi. Bản ghi giữ nguyên chiều thật, vì
   video lật ngược sẽ khiến mọi chữ trong khung đọc thành ngược. */
.ghi__xem--guong{transform:scaleX(-1)}
.ghi__loi{
  position:absolute;inset:0;display:grid;place-items:center;padding:22px;text-align:center;
  color:var(--cream);font-family:var(--font-body);font-weight:700;font-size:15px;line-height:1.5;
  background:#12121ae6;
}
.ghi__loi b{color:var(--yellow);display:block;font-size:17px;margin-bottom:6px}

/* cột sóng lúc đang ghi âm — chiều cao do JS đặt qua --m */
.ghi__song{display:flex;align-items:center;justify-content:center;gap:5px;height:96px;width:100%;padding:0 18px}
.ghi__song i{
  flex:1;max-width:9px;border-radius:6px;background:#ffffff33;
  height:calc(8% + var(--m,0) * 84%);transition:height .07s linear;
}
.ghi.is-ghi .ghi__song i{background:var(--yellow)}

.ghi__dong{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ghi__gio{
  font-family:var(--font-display);font-weight:800;font-size:24px;
  font-variant-numeric:tabular-nums;min-width:96px;
}
.ghi__gio b{color:var(--red-chu)}
.ghi__gio small{font-family:var(--font-body);font-weight:700;font-size:13px;opacity:.5}
.ghi__vach{flex:1;min-width:120px;height:10px;border:3px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--cream-2)}
.ghi__vach i{display:block;height:100%;width:0;background:var(--red);transition:width .1s linear}
.btn--do{background:var(--red);color:#fff}
.btn--nho{font-size:13px;padding:7px 16px;border-width:3px}
.ghi__mach{
  display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;
  background:var(--red);margin-right:6px;vertical-align:-1px;
}
.ghi.is-ghi .ghi__mach{animation:mach 1s ease-in-out infinite}
@keyframes mach{50%{opacity:.25}}
.ghi__dem3{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:clamp(70px,18vw,150px);
  color:var(--cream);background:#12121aa8;
}

/* ---------- xem lại ----------------------------------------------- */
.xemlai{
  border:5px solid var(--ink);border-radius:6px;overflow:hidden;position:relative;
  padding:26px 22px;display:flex;justify-content:center;
  /* Không dùng min-height 260px của .wall-surface: ở đây chỉ có ĐÚNG một
     tờ, để nguyên sẽ thừa ra một mảng gạch trống nhìn như lỗi. */
  min-height:0;
}
.xemlai .note{margin:0;position:relative}

/* ---------- gửi ---------------------------------------------------- */
.gui-cuoi{text-align:center;padding:10px 0 0}
.btn--to{font-size:clamp(17px,3vw,22px);padding:16px 40px;border-width:5px;box-shadow:6px 6px 0 var(--ink)}
.btn--to:hover{box-shadow:9px 9px 0 var(--ink)}
.tien{max-width:520px;margin:20px auto 0}
.tien__vach{height:16px;border:4px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--cream-2)}
.tien__vach i{display:block;height:100%;width:0;background:var(--green);transition:width .25s}
.tien__chu{font-family:var(--font-body);font-weight:700;font-size:14px;margin:8px 0 0;opacity:.75}
.bao-loi{
  color:var(--red-chu);font-weight:800;font-family:var(--font-body);
  border:3px solid var(--red-chu);border-radius:10px;background:#fff0f3;
  padding:12px 16px;margin:16px auto 0;max-width:560px;text-align:left;
}

/* ---------- trang tường ------------------------------------------- */
.loc{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 22px;align-items:center}
.tuong-so{
  font-family:var(--font-body);font-style:italic;font-size:16px;opacity:.68;margin:0 0 18px;
}
.tuong-day{min-height:340px}
.tuong-day .wall-surface__notes{gap:22px;padding:30px 24px}
.them-nua{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:26px 0 0}
/* position:relative là BẮT BUỘC, không phải để trang trí: lớp gạch
   .wall-surface__bricks là position:absolute, mà phần tử có định vị luôn
   vẽ đè lên phần tử tĩnh cùng tầng. Thiếu dòng này thì ô "tường còn
   trống" nằm dưới lớp gạch và không ai nhìn thấy — đúng lỗi đã gặp. */
.trong-tron{
  position:relative;
  text-align:center;padding:60px 20px;color:#ffffffdd;
  font-family:var(--font-body);font-style:italic;font-size:18px;
}
.trong-tron p{margin:0 0 20px;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.trong-tron .btn{display:inline-block;text-decoration:none;font-style:normal}

/* ---------- lời chào sau khi gửi ---------------------------------- */
.xong-bang{
  border:5px solid var(--ink);border-radius:14px;background:var(--green);color:#fff;
  box-shadow:var(--shadow);padding:20px 22px;margin:0 0 26px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.xong-bang h2{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,3.6vw,30px);margin:0}
.xong-bang p{margin:4px 0 0;font-family:var(--font-body);font-weight:700;font-size:14px;opacity:.92}
.xong-bang__bieu{font-size:38px;line-height:1}

@media (max-width:620px){
  .dau{gap:10px;padding-top:10px;padding-bottom:10px}
  .dau__ten{font-size:13px;order:3;flex-basis:100%;opacity:.7}
  .dau__phai{margin-left:auto}
  .dau__ve{font-size:13px;padding:5px 13px}
  .buoc{padding:24px 16px 18px}
  .buoc__ten,.buoc__phu{padding-left:0;margin-top:16px}
  .buoc__so{top:-18px;left:14px;width:36px;height:36px;font-size:17px}
  .ghi{padding:14px}
  .ghi__gio{font-size:20px;min-width:78px}
}