/* =========================================================
   TRUNG TÂM GIA SƯ — bảng phấn & sổ điểm
   Palette: xanh bảng đen, kem giấy, vàng phấn
   ========================================================= */

:root{
  --chalkboard: #24352B;
  --chalkboard-dark: #1B2921;
  --paper: #F7F3E8;
  --paper-line: #E3DCC8;
  --ink: #24302A;
  --chalk-white: #F5F1E8;
  --chalk-yellow: #E8B93F;
  --chalk-yellow-dark: #C99A28;
  --coral: #D9634B;
  --green-ok: #4C7A5A;
  --muted: #6F7A72;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}

a{ color: inherit; }

img{ max-width:100%; display:block; }

/* ---------------- layout shells ---------------- */
.site-header{
  background: var(--chalkboard);
  color: var(--chalk-white);
  padding: 22px 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration:none;
  color: var(--chalk-white);
}
.brand span.chalk-dot{
  width:9px;height:9px;border-radius:50%;
  background: var(--chalk-yellow);
  display:inline-block;
}
.site-nav a{
  color: var(--chalk-white);
  text-decoration:none;
  font-size:.92rem;
  margin-left: 22px;
  opacity:.85;
  border-bottom: 1px solid transparent;
  padding-bottom:2px;
}
.site-nav a:hover{ opacity:1; border-color: var(--chalk-yellow); }

main{ max-width: 980px; margin: 0 auto; padding: 0 6vw 80px; }

.site-footer{
  text-align:center;
  color: var(--muted);
  font-size:.82rem;
  padding: 30px 6vw 50px;
}

/* ---------------- hero ---------------- */
.hero{
  background: var(--chalkboard);
  color: var(--chalk-white);
  padding: 64px 6vw 78px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(245,241,232,.05) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events:none;
}
.hero-inner{ max-width: 720px; position:relative; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chalk-yellow);
  margin-bottom: 14px;
  display:block;
}
.hero h1{
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 18px;
}
.hero h1 .underline-wrap{ position:relative; display:inline-block; }
.hero h1 .underline-wrap svg{
  position:absolute; left:0; bottom:-6px; width:100%; height:10px;
}
.hero p.lede{
  font-size: 1.08rem;
  color: rgba(245,241,232,.82);
  max-width: 56ch;
  margin: 0 0 30px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 26px;
  border-radius: 3px;
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: var(--chalk-yellow);
  color: var(--chalkboard-dark);
}
.btn-primary:hover{ box-shadow: 0 6px 0 var(--chalk-yellow-dark); }
.btn-ghost{
  background: transparent;
  color: var(--chalk-white);
  border-color: rgba(245,241,232,.4);
}
.btn-ghost:hover{ border-color: var(--chalk-white); }

/* ---------------- section blocks on landing ---------------- */
.strip{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: -34px;
  position:relative;
  z-index: 2;
}
.strip-card{
  background: var(--chalk-white);
  border: 1px solid var(--paper-line);
  padding: 22px 22px;
}
.strip-card .num{
  font-family: var(--font-mono);
  color: var(--chalk-yellow-dark);
  font-size: .8rem;
  margin-bottom: 8px;
  display:block;
}
.strip-card h3{
  font-family: var(--font-display);
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.strip-card p{ margin:0; color: var(--muted); font-size: .92rem; }

.section-title{
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 64px 0 6px;
}
.section-sub{ color: var(--muted); margin: 0 0 30px; }

/* ---------------- form card (notebook look) ---------------- */
.notebook{
  background: var(--chalk-white);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: 40px clamp(20px, 5vw, 56px);
  position: relative;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 43px,
    var(--paper-line) 44px
  );
  background-position: 0 76px;
}
.notebook::before{
  content:"";
  position:absolute; top:0; bottom:0; left: 34px;
  width:1px;
  background: rgba(217, 99, 75, .28);
}
@media (max-width: 640px){ .notebook::before{ display:none; } }

fieldset{
  border: 0;
  padding: 0;
  margin: 0 0 34px;
}
legend{
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--chalk-yellow-dark);
  padding: 0 0 14px;
}

.field-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.field-grid .full{ grid-column: 1 / -1; }
@media (max-width: 640px){ .field-grid{ grid-template-columns: 1fr; } }

.field label{
  display:block;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.field .hint{ color: var(--muted); font-weight:400; font-size:.82rem; }

input[type=text],
input[type=email],
input[type=tel],
input[type=date],
input[type=file],
input[type=number],
select,
textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: .96rem;
  padding: 11px 13px;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
}
textarea{ resize: vertical; min-height: 100px; }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--chalk-yellow-dark);
  box-shadow: 0 0 0 3px rgba(232,185,63,.28);
}

.check-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  gap: 10px 14px;
}
.check-item{
  display:flex; align-items:center; gap:8px;
  font-size: .92rem;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  padding: 9px 11px;
}
.check-item input{ width:auto; }

.required::after{
  content: " *";
  color: var(--coral);
}

.form-actions{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 16px;
}
.form-note{ font-size: .82rem; color: var(--muted); }

.alert{
  border-radius: 4px;
  padding: 14px 18px;
  font-size: .92rem;
  margin-bottom: 26px;
}
.alert-error{ background:#FBEAE5; color:#9A3A24; border:1px solid #F1C3B4; }
.alert-success{ background:#EAF3EC; color:#2E5B3D; border:1px solid #C3E1CC; }

.success-card{
  text-align:center;
  padding: 60px 30px;
}
.success-card .chalk-check{
  width:64px; height:64px; margin: 0 auto 20px;
}
.success-card h2{ font-family: var(--font-display); margin: 0 0 10px; }
.success-card p{ color: var(--muted); max-width: 46ch; margin: 0 auto 24px; }

/* ---------------- admin: login ---------------- */
.login-shell{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  background: var(--chalkboard);
}
.login-card{
  background: var(--chalk-white);
  width: 100%; max-width: 380px;
  padding: 40px 34px;
  border-radius: 6px;
  margin: 20px;
}
.login-card h1{
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 4px;
}
.login-card p.sub{ color: var(--muted); font-size: .88rem; margin: 0 0 26px; }
.login-card .field{ margin-bottom: 16px; }
.login-card .btn-primary{ width:100%; text-align:center; margin-top: 6px; }

/* ---------------- admin: ledger/dashboard ---------------- */
.ledger-header{
  background: var(--chalkboard-dark);
  color: var(--chalk-white);
  padding: 20px 4vw;
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
}
.ledger-wrap{ padding: 0 4vw 60px; }

.ledger-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap: 14px;
  margin: 28px 0 18px;
}
.chip-filters a{
  text-decoration:none;
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: 7px 13px;
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  margin-right: 8px;
  color: var(--ink);
  display: inline-block;
}
.chip-filters a.active{
  background: var(--chalkboard);
  color: var(--chalk-white);
  border-color: var(--chalkboard);
}
.stat-inline{ font-family: var(--font-mono); font-size:.85rem; color: var(--muted); }

table.ledger{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: .9rem;
}
table.ledger th{
  text-align:left;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
  padding: 10px 12px;
  white-space: nowrap;
}
table.ledger td{
  padding: 12px;
  border-bottom: 1px solid var(--paper-line);
  vertical-align: top;
}
table.ledger tr:hover td{ background: var(--paper); }

.badge{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
}
.badge-pending{ background:#FCEFD3; color:#8A5A00; }
.badge-approved{ background:#DCEEDF; color: var(--green-ok); }
.badge-rejected{ background:#FBE1DB; color:#A13F26; }

.row-actions form{ display:inline; }
.row-actions button{
  font-family: var(--font-mono);
  font-size: .74rem;
  border: 1px solid var(--paper-line);
  background: #fff;
  border-radius: 4px;
  padding: 5px 9px;
  cursor:pointer;
  margin-right:4px;
}
.row-actions button.approve:hover{ border-color: var(--green-ok); color: var(--green-ok); }
.row-actions button.reject:hover{ border-color: var(--coral); color: var(--coral); }
.row-actions button.delete:hover{ border-color: #a00; color:#a00; }

.subjects-cell span{
  display:inline-block;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  font-size: .74rem;
  padding: 2px 7px;
  border-radius: 3px;
  margin: 0 4px 4px 0;
}

.empty-state{
  text-align:center;
  padding: 70px 20px;
  color: var(--muted);
}
.empty-state h3{ font-family: var(--font-display); color: var(--ink); }

.portrait-thumb{
  width: 42px; height:42px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--paper-line);
}

/* =========================================================
   TRANG CHỦ — nội dung mở rộng
   ========================================================= */

/* --- dải số liệu --- */
.stats-band{
  background: var(--chalk-white);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  padding: 46px 6vw;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align:center;
}
@media (max-width: 720px){ .stats-band{ grid-template-columns: repeat(2, 1fr); } }
.stat-num{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--chalkboard);
  display:block;
  line-height:1;
}
.stat-num .unit{ font-size:.5em; color: var(--chalk-yellow-dark); font-family: var(--font-mono); }
.stat-label{ font-size:.84rem; color: var(--muted); margin-top:8px; }

/* --- lưới lợi ích --- */
.benefits-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 760px){ .benefits-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .benefits-grid{ grid-template-columns: 1fr; } }
.benefit-card{
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: 24px 22px;
  background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.benefit-card:hover{ border-color: var(--chalk-yellow-dark); transform: translateY(-2px); }
.benefit-icon{
  width: 38px; height: 38px;
  margin-bottom: 14px;
  color: var(--chalkboard);
}
.benefit-card h3{
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.benefit-card p{ margin:0; color: var(--muted); font-size:.9rem; }

/* --- môn học nổi bật --- */
.subjects-showcase{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 6px;
}
.subject-pill{
  font-family: var(--font-mono);
  font-size: .84rem;
  padding: 9px 16px;
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  background: var(--chalk-white);
  color: var(--ink);
}
.subject-pill.accent{
  background: var(--chalkboard);
  color: var(--chalk-white);
  border-color: var(--chalkboard);
}

/* --- cảm nhận từ gia sư --- */
.testimonials{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 760px){ .testimonials{ grid-template-columns: 1fr; } }
.testimonial-card{
  background: var(--chalkboard);
  color: var(--chalk-white);
  border-radius: 6px;
  padding: 26px 24px;
  position: relative;
}
.testimonial-card .quote-mark{
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--chalk-yellow);
  line-height: 1;
  display:block;
  margin-bottom: 6px;
}
.testimonial-card p.quote{
  font-size: .95rem;
  color: rgba(245,241,232,.9);
  margin: 0 0 18px;
  min-height: 96px;
}
.testimonial-who{
  display:flex; align-items:center; gap:10px;
  font-size: .85rem;
}
.testimonial-avatar{
  width:34px; height:34px; border-radius:50%;
  background: var(--chalk-yellow);
  color: var(--chalkboard-dark);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:600;
  flex-shrink:0;
}
.testimonial-who .name{ font-weight:600; display:block; }
.testimonial-who .role{ color: rgba(245,241,232,.65); font-size:.8rem; }

/* --- câu hỏi thường gặp --- */
.faq-list{ max-width: 760px; }
.faq-item{
  border-bottom: 1px solid var(--paper-line);
  padding: 4px 0;
}
.faq-item summary{
  cursor:pointer;
  list-style: none;
  padding: 18px 30px 18px 0;
  font-weight: 600;
  position: relative;
  font-size: .98rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content: "+";
  position:absolute; right: 4px; top: 14px;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--chalk-yellow-dark);
  transition: transform .15s ease;
}
.faq-item[open] summary::after{ content: "–"; }
.faq-item p{
  margin: 0 0 20px;
  color: var(--muted);
  font-size: .92rem;
  max-width: 68ch;
}

/* --- dải kêu gọi hành động cuối trang --- */
.cta-band{
  background: var(--chalkboard);
  color: var(--chalk-white);
  border-radius: 8px;
  padding: 50px clamp(24px, 5vw, 60px);
  margin-top: 70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(245,241,232,.05) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events:none;
}
.cta-band-text{ position:relative; max-width: 50ch; }
.cta-band h2{
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0 0 8px;
}
.cta-band p{ margin:0; color: rgba(245,241,232,.8); font-size:.95rem; }
.cta-band .btn{ position:relative; }