/* =========================================================
   dongquan.net — Design System
   Theme: "Notebook" — vở bài tập, dấu mộc chấm bài
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* Color tokens */
  --paper:        #FBF7EC;
  --paper-line:   #E4DBC2;
  --card-bg:      #FFFFFF;
  --ink:          #1F2A44;
  --ink-soft:     #52607D;
  --ink-faint:    #8B93A8;
  --accent:       #F4B942;
  --accent-dark:  #C9931F;
  --stamp-red:    #C1443C;
  --stamp-red-bg: #FBEAE8;
  --stamp-green:  #3F7D4F;
  --stamp-green-bg:#E7F3EA;
  --stamp-gray:   #8B93A8;
  --stamp-gray-bg:#EEF0F4;

  /* Type */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 2px 0 var(--paper-line), 0 8px 20px -12px rgba(31,42,68,0.25);
  --shadow-pop: 0 12px 28px -10px rgba(31,42,68,0.35);
  --max-width: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px);
  background-size: 100% 42px;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 .4em;
  line-height: 1.2;
  color: var(--ink);
}
h1{ font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; }
h2{ font-size: clamp(1.5rem, 3vw, 2rem); }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1em; color: var(--ink-soft); }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 600;
}

/* ---------------- Header / "spiral notebook" binding ---------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  padding-top: 10px;
}
.spiral-strip{
  display: flex;
  gap: 18px;
  justify-content: center;
  padding: 6px 0 2px;
  overflow: hidden;
}
.spiral-strip span{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 2px 2px rgba(0,0,0,.35);
  flex-shrink: 0;
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 16px;
  max-width: var(--max-width);
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
.brand{
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
}
.brand-icon{ font-size: 1.1em; }

.main-nav{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.main-nav a{
  font-size: .92rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  color: #cfd6e6;
  transition: background .15s, color .15s;
}
.main-nav a:hover,
.main-nav a.active{
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ---------------- Hero ---------------- */
.hero{
  padding: 56px 24px 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.hero-card{
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 40px clamp(20px, 5vw, 56px);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.hero-card::after{
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: var(--accent);
  opacity: .18;
  border-radius: 50%;
}
.hero p.lead{
  font-size: 1.1rem;
  max-width: 560px;
}

/* ---------------- Section module cards on homepage ---------------- */
.module-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 8px 24px 64px;
  max-width: var(--max-width);
  margin: 0 auto;
}
@media (min-width: 1024px){
  .module-grid{ grid-template-columns: repeat(4, 1fr); }
}
.module-card{
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .15s ease;
}
.module-card:hover{ transform: translateY(-3px); }
.module-card .icon{ font-size: 1.8rem; margin-bottom: 6px; }
.module-card .go{
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--accent-dark);
  font-weight: 600;
}

/* ---------------- Generic page header (non-home pages) ---------------- */
.page-head{
  padding: 40px 24px 20px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.back-home-link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 10px;
}
.back-home-link:hover{ text-decoration: underline; }

/* ---------------- Week grid (KMH) ---------------- */
.week-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 8px 24px 64px;
  max-width: var(--max-width);
  margin: 0 auto;
}
@media (min-width: 768px){
  .week-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .week-grid{ grid-template-columns: repeat(4, 1fr); }
}
.week-card{
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-body);
  transition: transform .15s ease;
}
.week-card:hover{ transform: translateY(-3px); }
.week-card .week-num{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-faint);
}
.week-card .week-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.week-card.add-card{
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  border: 2px dashed var(--paper-line);
  box-shadow: none;
  background: transparent;
}
.week-card.add-card:hover{ color: var(--accent-dark); border-color: var(--accent); }
.week-card.add-card .plus{ font-size: 2rem; line-height: 1; }

/* Stamp badge */
.stamp{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  border: 2px solid currentColor;
}
.stamp.pending{ color: var(--stamp-red); background: var(--stamp-red-bg); }
.stamp.finish{ color: var(--stamp-green); background: var(--stamp-green-bg); }
.stamp.empty{ color: var(--stamp-gray); background: var(--stamp-gray-bg); border-style: dashed; }

/* ---------------- Modal ---------------- */
.modal-overlay{
  position: fixed; inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 8% 18%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 22% 62%, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 30%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 48% 82%, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 14%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 78% 58%, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 32%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 15% 88%, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 80%, #fff 60%, transparent 100%),
    linear-gradient(160deg, #1b2242 0%, #262f57 45%, #171d38 100%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  overflow: hidden;
}
.modal-overlay.open{ display: flex; }
.space-deco{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.space-deco .deco{
  position: absolute;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.4));
  opacity: .9;
}
.space-deco .planet{ top: 6%; left: 5%; font-size: 4.2rem; animation: deco-float 7s ease-in-out infinite; }
.space-deco .astronaut{ bottom: 8%; right: 6%; font-size: 3.6rem; animation: deco-float 6s ease-in-out infinite reverse; }
.space-deco .moon{ top: 10%; right: 10%; font-size: 2.1rem; animation: deco-float 8s ease-in-out infinite; }
.space-deco .star{ color: #fff; font-size: 1rem; opacity: .7; animation: deco-twinkle 2.4s ease-in-out infinite; }
.space-deco .star-1{ top: 26%; left: 34%; }
.space-deco .star-2{ bottom: 30%; left: 16%; animation-delay: 1.1s; }
@keyframes deco-float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-12px) rotate(5deg); }
}
@keyframes deco-twinkle{
  0%,100%{ opacity: .3; }
  50%{ opacity: .9; }
}
.modal-box{
  background: var(--card-bg);
  border-radius: var(--radius);
  max-width: min(1180px, 94vw);
  width: 100%;
  padding: 36px 40px;
  box-shadow: var(--shadow-pop);
  position: relative;
  z-index: 1;
  max-height: 92vh;
  overflow-y: auto;
}
.modal-close{
  position: absolute; top: 14px; right: 16px;
  font-size: 1.3rem; color: var(--ink-faint);
  background: none; border: none; cursor: pointer;
  line-height: 1;
}
.field{ margin-bottom: 16px; }
.field label{
  display: block;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field .row{ display:flex; gap:8px; }
.field input[type="url"], .field input[type="text"]{
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .92rem;
  background: var(--paper);
  color: var(--ink);
}
.field input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }

.btn{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .88rem;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
}
.btn:hover{ background: #101828; }
.btn.accent{ background: var(--accent); color: var(--ink); }
.btn.accent:hover{ background: var(--accent-dark); color: #fff; }
.btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.link-preview{
  font-size: .82rem;
  color: var(--ink-faint);
  word-break: break-all;
  margin-top: 4px;
}
.link-preview a{ color: var(--accent-dark); text-decoration: underline; }

/* ---------------- Items table (nhiều bài tập / tuần) ---------------- */
.items-table-wrap{
  overflow-x: auto;
  margin: 4px 0 14px;
  border-radius: var(--radius-sm);
}
.items-table{
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: .95rem;
}
.items-table th, .items-table td{
  padding: 14px 12px;
  border-bottom: 1px solid var(--paper-line);
  text-align: left;
  vertical-align: middle;
}
.items-table th{
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.items-table input[type="url"]{
  width: 100%;
  min-width: 170px;
  padding: 10px 12px;
  border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .92rem;
  background: var(--paper);
  color: var(--ink);
}
.items-table input[type="url"]:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.items-table .link-cell{
  display: flex;
  align-items: center;
  gap: 6px;
}
.items-table .link-cell input[type="url"]{ min-width: 150px; }
.items-table .open-link{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  transition: background .15s, transform .15s;
}
.items-table .open-link:hover{ background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.items-table .open-link.disabled{
  background: var(--stamp-gray-bg);
  color: var(--ink-faint);
  pointer-events: none;
  cursor: default;
}
.items-table .cell-attach{ min-width: 260px; }
.items-table .attach-block{ margin-bottom: 10px; }
.items-table .attach-block:last-child{ margin-bottom: 0; }
.items-table .attach-row{
  display: flex;
  align-items: center;
  gap: 6px;
}
.items-table .attach-tag{
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink-faint);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
}
.items-table .attach-link{ min-width: 120px; }
.items-table .attach-open, .items-table .attach-upload{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  cursor: pointer;
}
.items-table .attach-open{
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  border: none;
  transition: background .15s, transform .15s;
}
.items-table .attach-open:hover{ background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.items-table .attach-open.disabled{
  background: var(--stamp-gray-bg);
  color: var(--ink-faint);
  pointer-events: none;
  cursor: default;
}
.items-table .attach-upload{
  background: transparent;
  border: 1.5px solid var(--paper-line);
  color: var(--ink-soft);
}
.items-table .attach-upload:hover{ border-color: var(--accent); color: var(--accent-dark); }
.items-table .attach-upload[disabled]{ opacity: .55; cursor: wait; }
.items-table .attach-error{
  margin: 4px 0 0;
  font-size: .68rem;
  color: var(--stamp-red);
}
.items-table .cell-status{ white-space: nowrap; }
.items-table .stamp{ font-size: .66rem; padding: 4px 10px; }
.items-table .row-del-btn{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink-faint);
  padding: 4px;
}
.items-table .row-del-btn:hover{ color: var(--stamp-red); }

.btn.outline{
  background: transparent;
  border: 1.5px dashed var(--paper-line);
  color: var(--ink-soft);
}
.btn.outline:hover{ border-color: var(--accent); color: var(--accent-dark); }

.week-progress{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-faint);
}

/* ---------------- List pages (grammar / extra / blog) ---------------- */
.item-list{
  display: grid;
  gap: 14px;
  padding: 8px 24px 64px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.item-card{
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: transform .15s ease;
}
.item-card:hover{ transform: translateX(3px); }
.item-card .meta{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-faint);
}
.item-card .arrow{ color: var(--accent-dark); font-size: 1.2rem; }
.item-card .file-tag{
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--stamp-red-bg);
  color: var(--stamp-red);
  border: 1px solid var(--stamp-red);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.empty-state{
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

/* ---------------- Footer ---------------- */
.site-footer{
  background: var(--ink);
  color: #cfd6e6;
  padding: 28px 24px;
  text-align: center;
  font-size: .85rem;
  margin-top: 40px;
}
.footer-email{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: .01em;
  padding: 6px 4px;
  transition: color .15s;
}
.footer-email:hover{ color: var(--accent); text-decoration: underline; }

/* Loading / status text */
.status-line{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--ink-faint);
  padding: 4px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ---------------- Timetable (Thời khoá biểu) ---------------- */
.tt-page{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px 24px 64px;
  display: flex;
  flex-direction: column;
}
.tt-info{ order: 1; }
.tt-legend{ order: 2; }
#tt-tables{ order: 3; }
.tt-day-section{ order: 4; }
.tt-gloss-card{ order: 5; }
/* Trên điện thoại: xem theo ngày dễ đọc hơn bảng lưới phải vuốt ngang */
@media (max-width: 699px){
  .tt-day-section{ order: 3; }
  #tt-tables{ order: 4; }
}

.tt-card{
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
}

.tt-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.tt-meta-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  flex: 1 1 320px;
}
@media (min-width: 768px){
  .tt-meta-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tt-meta-item{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tt-meta-key{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tt-meta-val{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.tt-print-btn{ flex-shrink: 0; }

/* Legend */
.tt-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 16px 4px 4px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-soft);
}
.tt-legend-item{ display: inline-flex; align-items: center; gap: 7px; }
.tt-swatch{
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--paper-line);
  flex-shrink: 0;
}
.tt-swatch-home{ background: var(--card-bg); }
.tt-swatch-special{ background: #FDF2D6; border-color: var(--accent); }
.tt-swatch-off{ background: var(--stamp-gray-bg); border-style: dashed; }
.tt-legend-note{ color: var(--ink-faint); }

/* Session block */
.tt-session{ margin-top: 26px; }
.tt-session-title{
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.tt-session-icon{ font-size: 1.1em; }
.tt-scroll-hint{
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
@media (min-width: 900px){ .tt-scroll-hint{ display: none; } }

/* Grid table */
.tt-table-wrap{
  overflow-x: auto;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 6px;
}
.tt-table{
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 6px;
}
.tt-table thead th{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  white-space: nowrap;
}
.tt-table thead th.is-today{
  background: var(--ink);
  color: #fff;
}
.tt-table th.tt-corner{
  width: 58px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
}
.tt-table th.tt-period{
  width: 58px;
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-align: center;
  background: transparent;
  vertical-align: middle;
}
.tt-table td{
  padding: 0;
  vertical-align: top;
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.tt-table td.tt-empty{
  background: var(--stamp-gray-bg);
  color: var(--ink-faint);
  text-align: center;
  font-family: var(--font-mono);
  padding: 14px 8px;
}

.tt-cell{
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--paper-line);
  background: var(--card-bg);
}
.tt-table td.is-today .tt-cell{ box-shadow: 0 0 0 2px var(--ink); }
.tt-table td.tt-empty.is-today{ box-shadow: inset 0 0 0 2px var(--ink); }
.tt-cell.is-special{
  background: #FDF2D6;
  border-left-color: var(--accent-dark);
}
.tt-subject{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  line-height: 1.25;
}
.tt-meta{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-faint);
  line-height: 1.35;
}

/* Day-by-day cards */
.tt-day-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px){
  .tt-day-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .tt-day-grid{ grid-template-columns: repeat(3, 1fr); }
}
.tt-day-card{
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px 20px;
}
.tt-day-card.is-today{ box-shadow: var(--shadow-card), inset 0 0 0 2px var(--accent); }
.tt-day-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.tt-day-head h3{ margin: 0; }
.tt-today-flag{
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: #FDF2D6;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
}
.tt-day-session{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 14px 0 6px;
}
.tt-day-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tt-day-list li{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border-left: 4px solid var(--paper-line);
}
.tt-day-list li.is-special{
  background: #FDF2D6;
  border-left-color: var(--accent-dark);
}
.tt-day-period{
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--ink-faint);
  width: 44px;
}
.tt-day-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Glossary */
.tt-gloss-card{ margin-top: 26px; }
.tt-gloss-card .tt-session-title{ margin-bottom: 14px; }
.tt-glossary{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
  margin: 0;
}
@media (min-width: 700px){
  .tt-glossary{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .tt-glossary{ grid-template-columns: repeat(3, 1fr); }
}
.tt-gloss-item{ min-width: 0; }
.tt-glossary dt{
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .78rem;
  color: var(--accent-dark);
}
.tt-glossary dd{
  margin: 0;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* Print: cả tuần gọn trong 1 trang A4 ngang/dọc */
@media print{
  @page{ margin: 10mm; }
  .site-header, .site-footer, .tt-print-btn, .tt-scroll-hint,
  .back-home-link, .tt-day-section{ display: none !important; }
  body{ background: #fff; font-size: 11px; }
  .page-head{ padding: 0 0 6px; }
  .page-head h1{ font-size: 1.5rem; margin-bottom: .15em; }
  .page-head p{ font-size: .74rem; margin-bottom: 0; }
  .tt-page{ padding: 0; display: block; }
  .tt-card, .tt-table-wrap{ box-shadow: none; border: 1px solid #ccc; }
  .tt-info{ padding: 10px 14px; }
  .tt-meta-grid{ grid-template-columns: repeat(4, 1fr); gap: 6px 16px; }
  .tt-meta-val{ font-size: .82rem; }
  .tt-legend{ padding: 8px 2px 2px; font-size: .62rem; gap: 4px 14px; }
  .tt-session{ margin-top: 12px; break-inside: avoid; }
  .tt-session-title{ font-size: 1rem; margin-bottom: 6px; }
  .tt-table{ min-width: 0; border-spacing: 3px; }
  .tt-table thead th{ font-size: .74rem; padding: 5px 4px; }
  .tt-table thead th.is-today{ background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .tt-table th.tt-period{ width: 28px; font-size: .74rem; }
  .tt-table th.tt-corner{ width: 28px; font-size: .56rem; }
  .tt-cell{ padding: 5px 6px; border-left-width: 3px; gap: 1px; }
  .tt-table td.is-today .tt-cell{ box-shadow: none; }
  .tt-subject{ font-size: .74rem; }
  .tt-meta{ font-size: .56rem; }
  .tt-table td.tt-empty{ padding: 6px 4px; font-size: .7rem; }
  .tt-gloss-card{ margin-top: 12px; padding: 10px 14px; break-inside: avoid; }
  .tt-gloss-card .tt-session-title{ margin-bottom: 6px; }
  .tt-glossary{ grid-template-columns: repeat(3, 1fr); gap: 2px 16px; }
  .tt-glossary dt{ font-size: .62rem; }
  .tt-glossary dd{ font-size: .68rem; margin-bottom: 1px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; animation: none !important; }
}