/* ===========================================================
   LÀM ĐƯỢC VỚI AI — bộ áo "lá thư cổ"
   Giấy ngà, mực nâu, triện son. Không dùng font ngoài:
   chọn font hệ thống có đủ dấu tiếng Việt.
   =========================================================== */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --giay:#F3E9D6;
  --giay-sang:#F8F1E2;
  --giay-toi:#E6D8BC;
  --muc:#3B3024;
  --muc-nhat:#6E5D47;
  --muc-mo:#8B7B63;
  --son:#A63A2E;
  --son-toi:#7E2A20;
  --vien:#C9B78F;
  --ban:#241C14;
  --chu-thuong:Georgia,'Palatino Linotype','Book Antiqua','Times New Roman',serif;
}

body{
  font-family:var(--chu-thuong);
  color:var(--muc);
  line-height:1.78;
  font-size:17.5px;
  -webkit-font-smoothing:antialiased;
  /* mặt bàn gỗ sẫm */
  background:
    radial-gradient(ellipse at 50% 0%, #33281c 0%, var(--ban) 70%),
    var(--ban);
  background-attachment:fixed;
  padding:0 16px;
}

/* ---------- TỜ GIẤY ---------- */
.thu{
  max-width:820px;
  margin:0 auto;
  background:
    /* vết ố nhẹ */
    radial-gradient(ellipse 60% 40% at 12% 8%, rgba(176,146,94,.13), transparent 60%),
    radial-gradient(ellipse 45% 30% at 88% 30%, rgba(176,146,94,.10), transparent 60%),
    radial-gradient(ellipse 70% 45% at 70% 92%, rgba(160,130,80,.12), transparent 65%),
    /* nếp gấp ngang mờ */
    linear-gradient(180deg, transparent 32%, rgba(140,115,72,.09) 33%, transparent 34%),
    linear-gradient(180deg, transparent 66%, rgba(140,115,72,.07) 67%, transparent 68%),
    linear-gradient(160deg, var(--giay-sang), var(--giay) 45%, var(--giay-toi));
  box-shadow:
    0 2px 3px rgba(0,0,0,.35),
    0 20px 50px rgba(0,0,0,.55),
    inset 0 0 90px rgba(150,120,72,.16);
  padding:clamp(30px,5.5vw,72px) clamp(24px,6vw,84px) 60px;
  position:relative;
}
/* mép giấy hơi răng cưa */
.thu::before,.thu::after{
  content:'';position:absolute;left:0;right:0;height:10px;
  background-image:radial-gradient(circle at 6px -3px, transparent 6px, var(--giay-toi) 6.5px);
  background-size:12px 10px;opacity:.55;
}
.thu::before{top:0;transform:scaleY(-1)}
.thu::after{bottom:0}

/* ---------- ĐẦU THƯ ---------- */
.dau-thu{text-align:center;padding-bottom:8px}
.hieu{
  font-size:clamp(19px,2.9vw,25px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muc);
  text-decoration:none;
  display:inline-block;
  font-weight:400;
}
.hieu b{font-weight:700}
.hieu i{color:var(--son);font-style:normal;letter-spacing:0}
.khau-hieu{
  font-style:italic;color:var(--muc-nhat);font-size:15.5px;margin-top:8px;letter-spacing:.02em;
}
.ngay-thu{
  text-align:right;font-style:italic;color:var(--muc-mo);font-size:15px;margin:26px 0 30px;
}

/* đường kẻ hoa văn */
.ke{
  border:0;height:1px;background:var(--vien);
  position:relative;margin:40px 0;
}
.ke::after{
  content:'❦';
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--giay);padding:0 18px;
  color:var(--son);font-size:17px;line-height:1;
}

.ke-doi{
  border:0;border-top:1px solid var(--vien);border-bottom:1px solid var(--vien);
  height:4px;margin:30px 0;
}

/* ---------- THÂN THƯ ---------- */
.chao{font-size:clamp(21px,3vw,27px);margin-bottom:20px;letter-spacing:.01em}
p{margin-bottom:19px;text-align:justify;hyphens:auto}
p.dau-doan::first-letter{
  float:left;font-size:4.1em;line-height:.82;
  padding:6px 12px 0 0;color:var(--son);
  font-weight:700;
}
em{font-style:italic}
strong{font-weight:700;color:var(--muc)}
a{color:var(--son-toi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--son)}

h2{
  font-size:clamp(20px,2.8vw,25px);font-weight:400;letter-spacing:.05em;
  margin:38px 0 16px;color:var(--muc);
}
h2 .so{color:var(--son);font-style:italic;margin-right:6px}

/* danh sách kiểu ghi tay */
ul.chep{list-style:none;margin:0 0 22px}
ul.chep li{
  position:relative;padding-left:30px;margin-bottom:13px;text-align:justify;
}
ul.chep li::before{
  content:'—';position:absolute;left:0;top:0;color:var(--son);
}
ol.dieu{list-style:none;counter-reset:d;margin:0 0 22px}
ol.dieu li{
  counter-increment:d;position:relative;padding-left:44px;margin-bottom:18px;text-align:justify;
}
ol.dieu li::before{
  content:counter(d,upper-roman) '.';
  position:absolute;left:0;top:0;width:34px;text-align:right;
  color:var(--son);font-style:italic;
}

/* ---------- MẨU DÁN (video mới nhất) ---------- */
.mau-dan{
  background:linear-gradient(150deg,#FBF6EA,#F0E5CE);
  border:1px solid var(--vien);
  padding:24px 28px;margin:30px 0;
  box-shadow:2px 3px 0 rgba(120,96,58,.14);
  position:relative;
}
.mau-dan .nhan{
  font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--son);margin-bottom:9px;
}
.mau-dan h3{font-size:20px;font-weight:700;margin-bottom:10px;line-height:1.4}
.mau-dan p{margin-bottom:14px;font-size:16.5px}
/* băng dính hai đầu */
.mau-dan::before,.mau-dan::after{
  content:'';position:absolute;width:76px;height:22px;
  background:rgba(214,192,143,.5);
  border-left:1px dashed rgba(150,124,74,.35);border-right:1px dashed rgba(150,124,74,.35);
}
.mau-dan::before{top:-11px;left:-14px;transform:rotate(-6deg)}
.mau-dan::after{bottom:-11px;right:-14px;transform:rotate(-6deg)}

/* ---------- NÚT ---------- */
.nut{
  display:inline-block;font-family:var(--chu-thuong);
  border:1px solid var(--son);color:var(--son-toi);
  background:transparent;text-decoration:none;
  padding:11px 26px;letter-spacing:.09em;font-size:15.5px;
  text-transform:uppercase;cursor:pointer;transition:.18s;
}
.nut:hover{background:var(--son);color:#F8F1E2}
.nut.dam{background:var(--son);color:#F8F1E2}
.nut.dam:hover{background:var(--son-toi)}

/* ---------- PHIẾU HỒI ÂM ---------- */
.phieu{
  border:1px dashed var(--muc-mo);
  padding:30px clamp(20px,4vw,34px) 28px;
  margin:40px 0 34px;
  background:rgba(255,252,244,.45);
  position:relative;
}
.phieu .keo{
  position:absolute;top:-13px;left:22px;background:var(--giay);
  padding:0 9px;color:var(--muc-mo);font-size:16px;
}
.phieu h2{margin-top:0}
form{margin-top:18px}
.hang-o{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.o{flex:1;min-width:210px;position:relative}
.o label{
  display:block;font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muc-mo);margin-bottom:5px;
}
input[type=text],input[type=email]{
  width:100%;font-family:var(--chu-thuong);font-size:17px;color:var(--muc);
  background:transparent;border:0;border-bottom:1px solid var(--muc-mo);
  padding:7px 2px;outline:none;
}
input:focus{border-bottom-color:var(--son)}
input::placeholder{color:#A2937B}
.ketqua{margin-top:15px;font-style:italic;min-height:26px;font-size:16px}
.rieng{font-size:14px;color:var(--muc-mo);margin-top:16px;font-style:italic}

/* ---------- CHÚ THÍCH CHÂN THƯ ---------- */
.chu-thich{
  font-size:15px;color:var(--muc-nhat);
  border-left:2px solid var(--vien);padding-left:20px;margin:32px 0;
}
.chu-thich .tieu{font-style:italic;color:var(--son);margin-bottom:6px;display:block}
.chu-thich p{font-size:15px;margin-bottom:9px;text-align:left}

/* ---------- KÝ TÊN & TRIỆN ---------- */
.ky{margin-top:44px;display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
.ky .loi{font-style:italic;color:var(--muc-nhat);font-size:16.5px}
.ky .ten{
  font-size:27px;font-style:italic;margin-top:6px;color:var(--muc);letter-spacing:.02em;
}
.ky .gach{display:block;width:190px;height:9px;margin-top:2px}
.trien{
  flex:0 0 96px;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #C4493A, var(--son) 45%, var(--son-toi) 100%);
  box-shadow:0 3px 7px rgba(80,25,18,.4), inset 0 -3px 8px rgba(0,0,0,.28), inset 0 3px 8px rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  color:#F6E4DC;transform:rotate(-7deg);
}
.trien span{font-size:23px;letter-spacing:.06em;line-height:1;font-weight:700}
.trien small{font-size:10.5px;letter-spacing:.2em;margin-top:4px;opacity:.9}

/* ---------- CHÂN TRANG ---------- */
.chan{
  max-width:820px;margin:0 auto;padding:26px 10px 60px;
  text-align:center;color:#9E8C6E;font-size:14.5px;font-style:italic;
}
.chan a{color:#C2AC84;text-decoration:none;border-bottom:1px solid rgba(194,172,132,.4)}
.chan a:hover{color:#E6D3AC}
.chan .dong{margin-bottom:7px}

/* ---------- TRANG PHỤ ---------- */
.ve-lai{display:inline-block;margin-bottom:22px;font-style:italic;font-size:15.5px}
.ngay-cap-nhat{font-style:italic;color:var(--muc-mo);font-size:15px;margin-bottom:26px}
.khoi-en{
  border:1px solid var(--vien);background:rgba(255,252,244,.5);
  padding:26px 30px;margin-top:38px;
}
.khoi-en h2{margin-top:0;font-size:20px}
.khoi-en p,.khoi-en li{font-size:16px}

@media(max-width:620px){
  body{font-size:16.5px;padding:0 10px}
  p{text-align:left}
  .ky{flex-direction:column-reverse;align-items:flex-start}
  .trien{transform:rotate(-7deg) scale(.85);margin-bottom:6px}
}