/* Academia — trung tâm dạy văn và sử.
   Luật của phong cách: nền gỗ sồi sẫm, nhấn bằng đồng thau, chữ có chân xuyên suốt,
   đường phân cách có hoa văn. Không ảnh chụp — chất liệu đến từ dải màu và nét kẻ. */

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

:root{
  --go:#1c1714;          /* gỗ gụ sẫm, nền trang */
  --go-2:#251e19;        /* gỗ sồi cũ, một lớp nổi lên */
  --go-3:#2e2620;
  --van:#4a3f35;         /* vân gỗ, dùng làm viền */
  --dong:#c9a962;        /* đồng thau */
  --dong-sang:#d4b872;
  --dong-toi:#b8953f;
  --chu:#ece3d6;
  --chu-2:#b9ab97;
  --chu-3:#8a7d6c;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--go);color:var(--chu-2);
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:15.5px;line-height:1.72;-webkit-font-smoothing:antialiased;
}

.hoa{font-family:"Cormorant Garamond",Georgia,serif}
.sans{font-family:"Be Vietnam Pro",system-ui,sans-serif}

/* nhãn chữ hoa — line-height >= 1.45 để dấu tiếng Việt trên chữ hoa không bị cắt */
.nhan{
  font-family:"Be Vietnam Pro",system-ui,sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  line-height:1.5;color:var(--dong);
}
.nhan-mo{color:var(--chu-3)}

.khung{max-width:1120px;margin:0 auto;padding:0 26px}

.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--dong);color:var(--go);
  padding:10px 16px;text-decoration:none;font-weight:700}
.skip:focus{top:0}

/* đường phân cách có hoa văn: hai nét đồng thau nhạt dần, giữa là một ký hiệu */
.ngan{display:flex;align-items:center;gap:14px;margin:26px 0}
.ngan::before,.ngan::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--van) 22%,var(--dong) 50%,var(--van) 78%,transparent)}
.ngan span{color:var(--dong);font-size:13px;letter-spacing:.3em;line-height:1}

/* ===== đầu trang ===== */
.dau{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 0;
  border-bottom:1px solid var(--van)}
.hieu{font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--chu);line-height:1.3}
.hieu i{color:var(--dong);font-style:normal}
.dieu-huong{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}
.dieu-huong a{text-decoration:none}
.dieu-huong a:hover .nhan,.dieu-huong a:focus-visible .nhan{color:var(--dong-sang)}

/* ===== lời mở ===== */
.mo{padding:52px 0 8px;text-align:center}
.mo h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(38px,6.6vw,76px);line-height:1.1;letter-spacing:-.01em;
  color:var(--chu);margin:16px auto 0;max-width:17ch}
.mo .sapo{margin:20px auto 0;max-width:56ch;font-size:17px;line-height:1.75}

.bai-mo{max-width:66ch;margin:0 auto}
.bai-mo p{margin:0 0 15px}
.bai-mo p:first-of-type::first-letter{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;color:var(--dong);
  float:left;font-size:66px;line-height:.82;padding:6px 11px 0 0;
}

/* ===== mục chung ===== */
.muc{padding:44px 0}
.muc-dau{text-align:center;margin-bottom:30px}
.muc-dau h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(28px,4.2vw,46px);line-height:1.14;color:var(--chu);margin:10px 0 0}
.muc-dau p{margin:11px auto 0;max-width:52ch;color:var(--chu-3);font-size:15px}

/* ===== thẻ gỗ ===== */
.the{background:var(--go-2);border:1px solid var(--van);border-radius:4px;padding:22px 24px}
.the h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:24px;
  line-height:1.24;color:var(--chu);margin:9px 0 8px}
.the p{margin:0;font-size:14.5px;line-height:1.68}

.luoi-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.luoi-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

/* ===== lớp học ===== */
.lop-chan{margin-top:16px;padding-top:14px;border-top:1px solid var(--van);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hoc-phi{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-weight:600;font-size:17px;
  color:var(--dong);font-variant-numeric:tabular-nums;white-space:nowrap}
.hoc-phi small{font-weight:400;font-size:12.5px;color:var(--chu-3)}
.con-cho{margin-left:auto;font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:12px;
  color:var(--chu-3);white-space:nowrap}
.day-cho{color:var(--dong-toi)}

.gach{margin:14px 0 0;padding:0;list-style:none}
.gach li{position:relative;padding-left:19px;margin-bottom:7px;font-size:14px;line-height:1.6}
.gach li:last-child{margin-bottom:0}
.gach li::before{content:"—";position:absolute;left:0;color:var(--dong);opacity:.75}

/* ===== người dạy ===== */
.thay{display:flex;gap:18px;align-items:flex-start}
.chu-cai{width:58px;height:58px;flex:none;border-radius:4px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--dong-sang) 0%,var(--dong) 50%,var(--dong-toi) 100%);
  color:var(--go);font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:26px;
  line-height:1}
.thay h3{margin:0 0 3px}
.thay .chuc{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.5;color:var(--dong);margin-bottom:9px}

/* ===== bảng kết quả ===== */
.bang{width:100%;border-collapse:collapse;background:var(--go-2);
  border:1px solid var(--van);border-radius:4px;overflow:hidden}
.bang th{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;line-height:1.5;text-align:left;
  padding:13px 18px;border-bottom:1px solid var(--van);color:var(--dong)}
.bang th.p{text-align:right}
.bang td{padding:13px 18px;border-bottom:1px solid rgba(74,63,53,.5);font-size:14.5px}
.bang td.p{text-align:right;font-family:"Be Vietnam Pro",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--chu)}
.bang tr:last-child td{border-bottom:0}
.bang tr:hover td{background:var(--go-3)}
.bang .mon{font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;color:var(--chu)}

/* ===== ghi danh ===== */
.ghi{background:var(--go-2);border:1px solid var(--van);border-radius:4px;
  padding:34px 30px;text-align:center}
.ghi h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(26px,3.8vw,40px);line-height:1.16;color:var(--chu);margin:10px auto 0;max-width:20ch}
.ghi p{margin:14px auto 0;max-width:52ch}
.nut{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 30px;
  margin-top:22px;border-radius:4px;text-decoration:none;font-family:"Be Vietnam Pro",system-ui,sans-serif;
  font-weight:700;font-size:14.5px;letter-spacing:.04em;
  background:linear-gradient(180deg,var(--dong-sang) 0%,var(--dong) 50%,var(--dong-toi) 100%);
  color:var(--go)}
.nut:hover,.nut:focus-visible{filter:brightness(1.08)}
.nut-vien{background:transparent;border:2px solid var(--dong);color:var(--dong);margin-left:10px}
.nut-vien:hover,.nut-vien:focus-visible{background:rgba(201,169,98,.1);filter:none}

.chan{padding:26px 0 46px;border-top:1px solid var(--van);display:flex;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--chu-3)}
.chan .r{margin-left:auto}

/* ===== điện thoại ===== */
@media (max-width:800px){
  .luoi-3,.luoi-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .khung{padding:0 16px}
  .dau{padding:16px 0;gap:12px}
  .hieu{font-size:21px}
  .dieu-huong{margin-left:0;width:100%;gap:16px}
  .mo{padding:34px 0 6px}
  .mo .sapo{font-size:16.5px}
  .bai-mo p:first-of-type::first-letter{font-size:56px}
  .muc{padding:32px 0}
  .the{padding:19px 18px}
  .thay{gap:14px}
  .lop-chan{gap:8px}
  .con-cho{margin-left:0;width:100%}

  /* bảng thành danh sách, không cuộn ngang, không xén chữ */
  .bang{display:block;border:0;background:transparent}
  .bang thead{display:none}
  .bang tbody,.bang tr,.bang td{display:block;width:100%}
  .bang tr{background:var(--go-2);border:1px solid var(--van);border-radius:4px;
    padding:15px 17px;margin-bottom:10px}
  .bang tr:hover td{background:transparent}
  .bang td{border:0;padding:0}
  .bang td + td{margin-top:5px}
  .bang td.p{text-align:left}

  .ghi{padding:26px 18px}
  .nut{width:100%;margin-left:0}
  .nut-vien{margin-left:0;margin-top:10px}
  .chan{gap:6px}
  .chan .r{margin-left:0;width:100%}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}