/* Tao thoi khoa bieu (lib/cc/thoi-khoa-bieu.php + assets/cc/thoi-khoa-bieu.js). Mau tung mau giao dien dat inline tu JS (TPL). */
.tkb-ctl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tkb-step { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 800; font-size: 16px; color: var(--ink); }
.tkb-step span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pri); color: #fff; font-size: 14px; }
.tkb-step small { font-weight: 500; color: var(--ink2); font-size: 13.5px; }
.tkb-step:not(:first-child) { margin-top: 8px; }
.tkb-clear { border-style: dashed; }
.tkb-sets { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; }
.tkb-tg { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.tkb-tg input { width: 18px; height: 18px; accent-color: var(--pri); }
.tkb-num select { padding: 8px 10px; }
.tkb-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.tkb-day { min-width: 0; grid-template-columns: minmax(0, 1fr); background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 10px; display: grid; gap: 6px; align-content: start; }
.tkb-day .dn { font-weight: 800; font-size: 15px; color: var(--ink); text-align: center; }
.tkb-day .ss { font-size: 12.5px; font-weight: 700; color: var(--ink2); margin-top: 2px; }
.tkb-cell { display: flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 8px; }
.tkb-cell:focus-within { border-color: var(--pri); }
.tkb-cell .dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.tkb-cell .tn { font-size: 11px; font-weight: 800; color: var(--ink2); min-width: 8px; }
.tkb-cell input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); padding: 9px 0; }
.tkb-cell input::placeholder { color: #C0B8AE; font-weight: 500; }
@media (max-width: 420px) { .tkb-days { grid-template-columns: 1fr 1fr; gap: 8px; } .tkb-day { padding: 8px; } .tkb-cell { padding: 0 6px; gap: 4px; } .tkb-cell input { font-size: 14px; } }

/* xem truoc */
.tkb-out { margin-top: 18px; }
.tkb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.tkb-view { overflow: hidden; border-radius: 18px; }
.tkb-poster { position: relative; width: 1032px; height: 699px; box-sizing: border-box; padding: 26px 30px 18px; margin: 0 auto; transform-origin: 0 0; display: flex; flex-direction: column; overflow: hidden;
  font-family: 'Be Vietnam Pro', system-ui, sans-serif; border-radius: 18px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); }
.tp-hd { position: relative; text-align: center; margin-bottom: 14px; }
.tp-ttl { font-size: 46px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.tp-sub { font-size: 17px; font-weight: 600; margin-top: 4px; }
.tp-deco { position: absolute; right: 0; top: 0; font-size: 34px; letter-spacing: 6px; opacity: .9; }
.tp-grid { flex: 1; min-height: 0; display: grid; gap: 5px; }
.tp-none { place-items: center; font-weight: 700; opacity: .6; }
.tp-c { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 10px; padding: 2px 6px; line-height: 1.15; font-weight: 700; min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.tp-day, .tp-corner { font-weight: 800; font-size: 1.05em; }
.tp-corner { font-size: .8em; }
.tp-no { font-weight: 800; }
.tp-strip { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; border-radius: 8px; letter-spacing: .02em; }
.tp-ft { text-align: center; font-size: 12px; font-weight: 500; margin-top: 10px; }

/* tung mau */
.t-keo .tp-c { border-radius: 14px; }
.t-keo .tp-ttl { color: #E0457B; }
.t-keo::before, .t-la::before { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; left: -120px; top: -150px; background: rgba(255,143,184,.16); pointer-events: none; }
.t-keo::after, .t-la::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; right: -110px; bottom: -150px; background: rgba(255,200,87,.2); pointer-events: none; }
.t-la::before { background: rgba(47,125,70,.08); } .t-la::after { background: rgba(140,200,90,.16); }
.t-la .tp-c { border-radius: 16px 4px 16px 4px; }
.t-la .tp-ttl { color: #2F7D46; }
.t-hs .tp-c { border-radius: 3px; box-shadow: inset 0 0 0 1px #9FB0CC; }
.t-hs .tp-s { box-shadow: inset 5px 0 0 var(--a), inset 0 0 0 1px #9FB0CC; padding-left: 10px; }
.t-hs .tp-strip { border-radius: 3px; }
.t-hs .tp-hd { border-bottom: 3px double #13284B; padding-bottom: 8px; }
.t-vutru { background-color: #0B1026; }
.t-vutru::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image: radial-gradient(1.5px 1.5px at 8% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 40%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 35% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 28%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 62% 6%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 77% 18%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 5% 70%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 96% 60%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 96%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 15% 94%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 92%, #fff 50%, transparent 51%); }
.t-vutru .tp-s { box-shadow: inset 0 0 0 1.5px var(--a); }
.t-vutru .tp-ttl { color: #FFD36E; text-shadow: 0 0 18px rgba(255,211,110,.35); }
.t-vutru > * { position: relative; }
.t-toigian { box-shadow: 0 0 0 1px #E6E6E6, 0 30px 60px -40px rgba(0,0,0,.35); }
.t-toigian .tp-c { box-shadow: inset 0 0 0 1px #E6E6E6; border-radius: 8px; }
.t-toigian .tp-day { box-shadow: inset 0 -2px 0 #111; border-radius: 0; }
.t-toigian .tp-corner { box-shadow: none; }
.t-toigian .tp-s { flex-direction: column; gap: 4px; }
.t-toigian .tp-s::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
.t-toigian .tp-ttl { font-weight: 800; letter-spacing: -.03em; }
.t-toigian .tp-strip { justify-content: flex-start; padding-left: 4px; text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }

.tkb-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
@media (max-width: 600px) { .tkb-acts .btn { flex: 1 1 100%; } }

/* loi moi Zalo */
.tkb-cta { margin-top: 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; background: linear-gradient(135deg, #EAF2FF, #FFF3E6); border: 1px solid var(--line); border-radius: 26px; padding: clamp(20px, 4vw, 38px); }
.tkb-cta h2 { font-size: clamp(22px, 3vw, 32px); margin: 12px 0 10px; }
.tkb-cta p { color: var(--ink2); margin: 0 0 10px; font-size: 16px; }
.tkb-cta ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 6px; }
.tkb-cta li { display: flex; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 600; }
.tkb-cta li::before { content: '✓'; color: #0068FF; font-weight: 900; }
.tkb-cta-chat { display: grid; gap: 10px; background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.4); }
.tkb-cta-chat .b { max-width: 88%; background: #F1F3F7; border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; color: #1D2233; }
.tkb-cta-chat .b.me { justify-self: end; background: #0068FF; color: #fff; border-radius: 16px 16px 4px 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tkb-cta-chat .b.me .ph { background: rgba(255,255,255,.2); border-radius: 8px; padding: 4px 8px; font-weight: 600; font-size: 13px; }
.tkb-cta-chat .b.t { background: #FFF6D8; }
@media (max-width: 760px) { .tkb-cta { grid-template-columns: 1fr; } }

/* SEO */
.tkb-seo { margin-top: 44px; }
.tkb-seo p { color: var(--ink2); font-size: 16px; margin: 0 0 12px; }
.tkb-faq { display: grid; gap: 10px; }
.tkb-faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.tkb-faq summary { font-weight: 700; cursor: pointer; }
.tkb-faq details p { margin: 8px 0 0; font-size: 15.5px; }

/* in A4 ngang (JS chen @page landscape luc in) */
@page tkb { size: A4 landscape; margin: 12mm; }
@media print {
  .tkb-out { margin: 0; page: tkb; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tkb-view { height: auto !important; overflow: visible !important; border-radius: 0; }
  .tkb-poster { transform: none !important; margin: 0 !important; width: 273mm; height: 184mm; box-shadow: none; border-radius: 0; break-inside: avoid; }
}