/*
Theme Name: Cong Cu Dem Ngay
Theme URI: https://congcudemngay.com
Author: Cong Cu Dem Ngay
Description: Independent date-calculation workbench theme. Custom build, no page builder, no SEO plugin dependency.
Version: 0.1.0
Text Domain: ccdn
*/

:root {
  --ccdn-primary: #1D4ED8;
  --ccdn-primary-deep: #1E40AF;
  --ccdn-ink: #0F172A;
  --ccdn-body: #1E293B;
  --ccdn-muted: #475569;
  --ccdn-accent: #DC2626;
  --ccdn-success: #16A34A;
  --ccdn-warning: #D97706;
  --ccdn-bg: #F8FAFC;
  --ccdn-surface: #FFFFFF;
  --ccdn-border: #E2E8F0;
  --ccdn-border-strong: #CBD5E1;

  --ccdn-radius-lg: 12px;
  --ccdn-radius-md: 10px;
  --ccdn-radius-input: 8px;
  --ccdn-radius-sm: 6px;

  --ccdn-max: 1100px;
  --ccdn-gutter: 20px;

  --ccdn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ccdn-shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 8px 20px -12px rgba(15,23,42,0.18);
}

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

.ccdn-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ccdn-bg);
  color: var(--ccdn-body);
  font-family: var(--ccdn-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ccdn-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ccdn-ink); font-weight: 700; margin: 0 0 12px; line-height: 1.2; }

h1 {
  font-size: 32px;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { h1 { font-size: 40px; } }

h2 { font-size: 24px; }
@media (min-width: 768px) { h2 { font-size: 28px; } }

p { margin: 0 0 12px; }


/* focus visibility — never removed without a replacement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ccdn-primary);
  outline-offset: 2px;
}

/* ===== Layout ===== */
.ccdn-wrap {
  max-width: var(--ccdn-max);
  margin: 0 auto;
  padding: 0 var(--ccdn-gutter);
}

.ccdn-section {
  padding: 32px 0;
}

/* ===== Header ===== */
.ccdn-header {
  background: var(--ccdn-surface);
  border-bottom: 1px solid var(--ccdn-border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.ccdn-header-inner {
  max-width: var(--ccdn-max);
  margin: 0 auto;
  padding: 0 var(--ccdn-gutter);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ccdn-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ccdn-ink);
  font-weight: 700;
  font-size: 17px;
}
.ccdn-brand:hover { text-decoration: none; }

.ccdn-brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.ccdn-nav {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 1120px) { .ccdn-nav { display: flex; } } /* SILO-2: 1024 -> 1120, the 7-group labels need the width */

.ccdn-nav a {
  white-space: nowrap;
  color: var(--ccdn-body);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: var(--ccdn-radius-sm);
}
.ccdn-nav a:hover { background: var(--ccdn-bg); text-decoration: none; }
.ccdn-nav a[aria-current="page"] { color: var(--ccdn-primary); background: #EFF4FF; }

.ccdn-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ccdn-border);
  border-radius: var(--ccdn-radius-input);
  background: var(--ccdn-surface);
}
@media (min-width: 1120px) { .ccdn-nav-toggle { display: none; } }

.ccdn-nav-mobile {
  display: none;
  border-top: 1px solid var(--ccdn-border);
  background: var(--ccdn-surface);
}
.ccdn-nav-mobile.is-open { display: block; }
@media (min-width: 1120px) { .ccdn-nav-mobile { display: none !important; } }

.ccdn-nav-mobile { max-height: calc(100vh - 60px); overflow-y: auto; }
.ccdn-nav-mobile ul { list-style: none; margin: 0; padding: 4px var(--ccdn-gutter) 12px; }
.ccdn-nav-mobile a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 9px 4px;
  color: var(--ccdn-body);
  border-bottom: 1px solid var(--ccdn-border);
  min-height: 52px;
}
.ccdn-nav-mobile a strong { font-weight: 700; color: var(--ccdn-ink); }
.ccdn-nav-mobile a span { font-size: 13px; font-weight: 400; color: var(--ccdn-muted); }
.ccdn-nav-mobile a[aria-current="page"] strong { color: var(--ccdn-primary); }

/* ===== Footer ===== */
.ccdn-footer {
  border-top: 1px solid var(--ccdn-border);
  background: var(--ccdn-surface);
  margin-top: 48px;
}
.ccdn-footer-inner {
  max-width: var(--ccdn-max);
  margin: 0 auto;
  padding: 28px var(--ccdn-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
  align-items: flex-start;
}
.ccdn-footer-brand { font-weight: 700; color: var(--ccdn-ink); }
.ccdn-footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.ccdn-footer-links a { color: var(--ccdn-body); font-size: 14px; font-weight: 600; display: inline-block; padding: 7px 0; }
.ccdn-footer-copy { width: 100%; color: var(--ccdn-muted); font-size: 13px; padding-top: 16px; border-top: 1px solid var(--ccdn-border); }

/* ===== Hero / page intro ===== */
.ccdn-page-intro { padding: 28px 0 8px; }
.ccdn-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ccdn-primary);
  margin-bottom: 8px;
}
.ccdn-page-intro p { color: var(--ccdn-body); max-width: 640px; }

/* ===== Tool shell / workbench container ===== */
.ccdn-tool {
  background: var(--ccdn-surface);
  border: 1px solid var(--ccdn-border);
  border-radius: var(--ccdn-radius-lg);
  box-shadow: var(--ccdn-shadow-card);
  padding: 24px;
}
@media (min-width: 640px) { .ccdn-tool { padding: 32px; } }

/* ===== Form primitives ===== */
.ccdn-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ccdn-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ccdn-ink);
}
.ccdn-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}
@media (min-width: 560px) {
  .ccdn-field-row { grid-template-columns: 1fr auto 1fr; }
}

.ccdn-input {
  font-family: var(--ccdn-font);
  font-size: 16px;
  color: var(--ccdn-ink);
  background: var(--ccdn-surface);
  border: 1px solid var(--ccdn-border-strong);
  border-radius: var(--ccdn-radius-input);
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}
.ccdn-input:focus { border-color: var(--ccdn-primary); }

.ccdn-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ccdn-body);
}
.ccdn-checkbox-row input { width: 18px; height: 18px; }

.ccdn-swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ccdn-radius-input);
  border: 1px solid var(--ccdn-border-strong);
  background: var(--ccdn-surface);
  color: var(--ccdn-primary);
  font-size: 18px;
  cursor: pointer;
}
.ccdn-swap-btn:hover { background: var(--ccdn-bg); }

/* ===== Buttons ===== */
.ccdn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ccdn-font);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--ccdn-radius-input);
  padding: 11px 20px;
  min-height: 44px;
  border: 1px solid transparent;
  cursor: pointer;
}
.ccdn-btn-primary { background: var(--ccdn-primary); color: #fff; }
.ccdn-btn-primary:hover { background: var(--ccdn-primary-deep); text-decoration: none; }
.ccdn-btn-secondary { background: var(--ccdn-surface); color: var(--ccdn-primary); border-color: var(--ccdn-primary); }
.ccdn-btn-secondary:hover { background: #EFF4FF; text-decoration: none; }
.ccdn-btn-text { background: transparent; color: var(--ccdn-primary); border: none; padding: 8px 4px; }
.ccdn-btn-text:hover { text-decoration: underline; }

/* ===== Result primitives ===== */
.ccdn-result { border-top: 1px solid var(--ccdn-border); margin-top: 20px; padding-top: 20px; }
.ccdn-result-metric { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ccdn-border); font-size: 14px; }
.ccdn-result-metric .v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ccdn-ink); }

/* ===== Notices ===== */
.ccdn-notice { border-radius: var(--ccdn-radius-sm); padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.ccdn-notice-info { background: #EFF4FF; color: var(--ccdn-primary-deep); border: 1px solid #C7D9FB; }
.ccdn-notice-warning { background: #FEF3E2; color: #92400E; border: 1px solid #FCE2B8; }
.ccdn-notice-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ===== Calculator: mode toggle ===== */
.ccdn-mode-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.ccdn-mode-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ccdn-body);
  border: 1px solid var(--ccdn-border-strong);
  border-radius: var(--ccdn-radius-sm);
  padding: 7px 12px;
  cursor: pointer;
}
.ccdn-mode-option input { width: 16px; height: 16px; margin: 0; }
.ccdn-mode-option.is-active { border-color: var(--ccdn-primary); background: #EFF4FF; color: var(--ccdn-primary-deep); }

/* ===== Calculator: result ===== */
.ccdn-result-primary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ccdn-result-number {
  font-size: 48px;
  font-weight: 800;
  color: var(--ccdn-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ccdn-result-label { font-size: 14px; font-weight: 700; color: var(--ccdn-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ccdn-result-mode-note { font-size: 13px; color: var(--ccdn-muted); margin-top: 6px; }

.ccdn-breakdown-line { font-size: 20px; font-weight: 700; color: var(--ccdn-ink); margin: 14px 0 0; }
.ccdn-breakdown-line .n { color: var(--ccdn-primary); font-variant-numeric: tabular-nums; }

.ccdn-context-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 18px 0;
}
@media (min-width: 560px) { .ccdn-context-grid { grid-template-columns: 1fr 1fr; } }
.ccdn-context-item {
  background: var(--ccdn-bg);
  border: 1px solid var(--ccdn-border);
  border-radius: var(--ccdn-radius-sm);
  padding: 10px 12px;
}
.ccdn-context-item .l { font-size: 12px; font-weight: 700; color: var(--ccdn-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ccdn-context-item .v { font-size: 14px; font-weight: 700; color: var(--ccdn-ink); margin-top: 2px; }


/* ===== Calculator: quick actions ===== */
.ccdn-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.ccdn-chip {
  font-size: 13px;
  font-weight: 700;
  color: var(--ccdn-primary-deep);
  background: #EFF4FF;
  border: 1px solid #C7D9FB;
  border-radius: var(--ccdn-radius-sm);
  padding: 7px 12px;
  cursor: pointer;
}
.ccdn-chip:hover { background: #E1EBFD; }

.ccdn-context-links { display: flex; flex-direction: column; gap: 6px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--ccdn-border); }
.ccdn-context-links a { font-size: 14px; font-weight: 600; }

.ccdn-copy-row { margin-top: 16px; }
.ccdn-copy-row .is-copied { color: var(--ccdn-success); }

/* ===== Add / subtract calculator (/cong-tru-ngay/) ===== */
.ccdn-as-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 860px) {
  .ccdn-as-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; }
}
.ccdn-as-inputs .ccdn-mode-group { margin-bottom: 0; }
/* Page-scoped touch targets; units share one row on narrow screens */
.ccdn-as-grid .ccdn-mode-option,
.ccdn-as-grid .ccdn-chip { min-height: 40px; }
.ccdn-as-grid .ccdn-btn-text { padding: 8px 6px; }
.ccdn-as-result-col .ccdn-context-links a { padding: 7px 0; }
@media (max-width: 559px) {
  .ccdn-as-inputs .ccdn-mode-group[aria-labelledby="ccdn-as-unit-label"] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ccdn-as-inputs .ccdn-mode-group[aria-labelledby="ccdn-as-unit-label"] .ccdn-mode-option { justify-content: center; padding: 7px 4px; }
}
.ccdn-as-inputs .ccdn-btn-primary { width: 100%; }
.ccdn-preset-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ccdn-border); }
.ccdn-preset-block .ccdn-quick-actions { margin-top: 8px; }

.ccdn-as-result-col { border-top: 1px solid var(--ccdn-border); padding-top: 20px; }
@media (min-width: 860px) {
  .ccdn-as-result-col { border-top: 0; padding-top: 0; border-left: 1px solid var(--ccdn-border); padding-left: 32px; }
}
.ccdn-as-weekday { font-size: 18px; font-weight: 700; color: var(--ccdn-primary); margin-top: 6px; }
.ccdn-as-date {
  font-size: 44px;
  font-weight: 800;
  color: var(--ccdn-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .ccdn-as-date { font-size: 52px; } }
.ccdn-as-expr { margin: 14px 0 0; font-size: 15px; font-weight: 700; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-as-context { margin: 4px 0 14px; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-as-result-body[hidden] { display: none; }
#ccdn-as-error { margin: 0 0 14px; }

/* ===== Working-day calculator (/tinh-ngay-lam-viec/) ===== */
.ccdn-wd-ranges { margin: 0 0 16px; }
.ccdn-wd-fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.ccdn-wd-fieldset legend { padding: 0; margin-bottom: 6px; }
.ccdn-wd-check { min-height: 40px; font-weight: 600; color: var(--ccdn-ink); }
.ccdn-wd-check input { width: 20px; height: 20px; }
.ccdn-wd-hint { margin: 2px 0 0; font-size: 14px; color: var(--ccdn-muted); }
/* Secondary result notes (coverage / overlap): plain text with a quiet rule, not a boxed alert */
.ccdn-result-note { margin: 12px 0 0; padding-left: 12px; border-left: 3px solid #C7D9FB; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-wd-custom { border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); padding: 0 14px; margin: 14px 0 0; background: var(--ccdn-surface); }
.ccdn-wd-custom > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ccdn-body); padding: 12px 0; min-height: 44px; }
.ccdn-wd-custom[open] > summary { border-bottom: 1px solid var(--ccdn-border); margin-bottom: 12px; }
.ccdn-wd-custom-block { margin-bottom: 16px; }
.ccdn-wd-add-row { display: flex; gap: 8px; margin-top: 8px; }
.ccdn-wd-add-row .ccdn-input { flex: 1; min-width: 0; }
.ccdn-wd-msg { min-height: 18px; margin: 6px 0 0; font-size: 13px; color: var(--ccdn-body); }
.ccdn-wd-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ccdn-wd-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-bg); padding: 0 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-wd-chip button { min-width: 40px; min-height: 36px; border: 0; background: transparent; color: var(--ccdn-accent); font-size: 18px; line-height: 1; cursor: pointer; border-radius: var(--ccdn-radius-sm); }
.ccdn-wd-chip button:hover { background: #FEF2F2; }
.ccdn-wd-rows { margin: 16px 0 4px; }
.ccdn-result-metric.is-sub { font-size: 13px; color: var(--ccdn-muted); padding-left: 12px; }
.ccdn-wd-detail { margin-top: 14px; }
.ccdn-wd-detail .ccdn-btn-text { min-height: 40px; }
.ccdn-wd-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.ccdn-wd-table th { text-align: left; font-weight: 700; color: var(--ccdn-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; padding: 6px 8px; border-bottom: 1px solid var(--ccdn-border-strong); }
.ccdn-wd-table td { padding: 7px 8px; border-bottom: 1px solid var(--ccdn-border); color: var(--ccdn-ink); }
.ccdn-wd-table tr.is-off td { background: var(--ccdn-bg); color: var(--ccdn-body); }
#ccdn-wd-error { margin: 0 0 14px; }
#ccdn-wd-result-body[hidden] { display: none; }
#ccdn-wd-result-body .ccdn-notice { margin: 12px 0 0; }
@media (max-width: 559px) { .ccdn-wd-table th, .ccdn-wd-table td { padding: 7px 4px; } }
.ccdn-wd-table td:nth-child(1), .ccdn-wd-table td:nth-child(2) { white-space: nowrap; }

/* ===== FAQ ===== */
.ccdn-faq-item { border-bottom: 1px solid var(--ccdn-border); padding: 2px 0; }
.ccdn-faq-item summary { font-weight: 700; color: var(--ccdn-ink); cursor: pointer; list-style: none; padding: 10px 0; }
.ccdn-faq-item summary::-webkit-details-marker { display: none; }
.ccdn-faq-item summary::after { content: '+'; float: right; color: var(--ccdn-primary); font-weight: 700; }
.ccdn-faq-item[open] summary::after { content: '−'; }
.ccdn-faq-item p { margin: 10px 0 0; color: var(--ccdn-body); }

/* ===== Accessibility ===== */
.ccdn-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ccdn-surface); color: var(--ccdn-primary); font-weight: 700;
  padding: 12px 18px; border: 2px solid var(--ccdn-primary); border-radius: var(--ccdn-radius-input);
}
.ccdn-skip-link:focus { left: 16px; top: 8px; outline: 2px solid var(--ccdn-ink); outline-offset: 2px; }
.ccdn-mode-option:focus-within { outline: 2px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-checkbox-row:focus-within { outline: 2px solid var(--ccdn-primary); outline-offset: 2px; border-radius: var(--ccdn-radius-sm); }
.ccdn-plain-links { list-style: none; margin: 0; padding: 0; }
.ccdn-plain-links a { display: inline-block; padding: 9px 0; font-weight: 600; }

/* ===== Progressive enhancement: result panels start hidden (no fake numbers before JS runs).
   With JS available their space is reserved so revealing them does not shift the page. ===== */
html.ccdn-js .ccdn-result[hidden] { display: block; visibility: hidden; min-height: 330px; }
html.ccdn-js .ccdn-as-result-col[hidden] { display: block; visibility: hidden; min-height: 330px; }

/* ===== Supporting pages (about / contact / privacy) ===== */
.ccdn-prose .ccdn-page-intro,
.ccdn-prose .ccdn-section { max-width: 720px; }
.ccdn-prose .ccdn-section { padding: 20px 0; }
.ccdn-prose ul { margin: 0 0 12px; padding-left: 22px; }
.ccdn-prose li { margin: 0 0 8px; }
.ccdn-prose .ccdn-plain-links { padding: 0; }
.ccdn-prose .ccdn-plain-links li { margin: 0 0 6px; }
.ccdn-prose code { font-size: 0.92em; background: #F1F5F9; padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.ccdn-footer-links-info a { font-weight: 500; }
.ccdn-prose .ccdn-plain-links a { display: inline; padding: 0; }
.ccdn-prose .ccdn-plain-links li { margin: 0 0 10px; }

/* Business-day presets: six short chips share two even rows on phones (no orphan chip) */
@media (max-width: 559px) {
  #ccdn-bd-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #ccdn-bd-presets .ccdn-chip { text-align: center; padding-left: 4px; padding-right: 4px; }
}

/* ===== Homepage result depth: weeks (level 2), composition (level 3), conversions (level 4) ===== */
.ccdn-weeks-line { margin: 4px 0 0; font-size: 16px; font-weight: 600; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-composition { margin: 16px 0 0; }
.ccdn-composition[hidden] { display: none; }
.ccdn-composition-line { margin: 0; font-size: 15px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-composition-line strong { color: var(--ccdn-ink); }
.ccdn-composition-note { color: var(--ccdn-muted); font-size: 13px; }
.ccdn-weekday-detail { margin: 2px 0 0; }
.ccdn-weekday-detail > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ccdn-primary); padding: 9px 0; min-height: 40px; box-sizing: border-box; }
.ccdn-weekday-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-weekday-list strong { color: var(--ccdn-ink); margin-left: 2px; }
.ccdn-conversions { margin: 14px 0 0; font-size: 14px; color: var(--ccdn-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ===== Working days: month / year module (secondary to the range calculator) ===== */
.ccdn-period { padding-top: 8px; }
.ccdn-pd-intro { max-width: 640px; color: var(--ccdn-body); margin: 0 0 14px; }
.ccdn-period h2 { font-size: 22px; }
@media (min-width: 768px) { .ccdn-period h2 { font-size: 24px; } }
.ccdn-pd-panel { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-lg); padding: 18px; }
@media (min-width: 640px) { .ccdn-pd-panel { padding: 22px 24px; } }
.ccdn-pd-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; }
.ccdn-pd-row .ccdn-field { margin: 0; min-width: 130px; }
.ccdn-pd-row .ccdn-input { width: 100%; }
.ccdn-pd-fs { margin: 0; }
.ccdn-pd-fs .ccdn-mode-group, .ccdn-pd-rules .ccdn-mode-group { margin-bottom: 0; }
.ccdn-pd-quick { margin: 12px 0 0; }
.ccdn-pd-rules { margin: 14px 0 0; }
.ccdn-pd-rules .ccdn-wd-check { margin-top: 6px; }
.ccdn-pd-month-field[hidden] { display: none; }
.ccdn-pd-result { border-top: 1px solid var(--ccdn-border); margin-top: 16px; padding-top: 16px; }
.ccdn-pd-result[hidden] { display: none; }
/* reserve the height of the default (current-month) result so revealing it does not shift the content below */
html.ccdn-js .ccdn-pd-result[hidden] { display: block; visibility: hidden; min-height: 490px; }
@media (max-width: 639px) { html.ccdn-js .ccdn-pd-result[hidden] { min-height: 530px; } }
@media (max-width: 479px) { html.ccdn-js .ccdn-pd-result[hidden] { min-height: 610px; } }
.ccdn-pd-primary .ccdn-result-number { font-size: 38px; }
.ccdn-pd-back { margin: 0 0 4px; }
.ccdn-pd-back .ccdn-btn-text { padding-left: 0; min-height: 40px; }
.ccdn-pd-table th.num, .ccdn-pd-table td.num { text-align: right; }
.ccdn-pd-table tbody th { text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--ccdn-ink); padding: 0 8px 0 0; border-bottom: 1px solid var(--ccdn-border); text-align: left; }
.ccdn-pd-table .ccdn-pd-month-btn { padding: 8px 4px 8px 0; font-size: 13px; font-weight: 600; min-height: 38px; text-align: left; white-space: nowrap; }
.ccdn-pd-table tbody th { white-space: nowrap; }
.ccdn-pd-table tr.is-total th, .ccdn-pd-table tr.is-total td { font-weight: 700; border-top: 2px solid var(--ccdn-border-strong); background: var(--ccdn-bg); padding-left: 8px; }
.ccdn-pd-flag { color: var(--ccdn-accent); margin-left: 2px; }
.ccdn-pd-plus { color: var(--ccdn-muted); font-size: 12px; white-space: nowrap; }
.ccdn-pd-yeartable { margin-top: 14px; }
.ccdn-pd-holidays { margin: 12px 0 0; }
.ccdn-pd-holidays > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ccdn-primary); padding: 9px 0; min-height: 40px; box-sizing: border-box; }
.ccdn-pd-hlist { margin: 0 0 4px; padding-left: 18px; font-size: 14px; color: var(--ccdn-body); }
.ccdn-pd-hlist li { margin: 3px 0; }
.ccdn-pd-hlist li.is-makeup { color: var(--ccdn-ink); font-weight: 600; }
.ccdn-pd-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 559px) {
  .ccdn-pd-row .ccdn-field { flex: 1 1 130px; }
  .ccdn-pd-table th, .ccdn-pd-table td { padding-left: 3px; padding-right: 3px; }
  .ccdn-pd-table th.num { font-size: 10px; }
}
.ccdn-pd-result .ccdn-context-links a { padding: 7px 0; }

/* ===== Holiday calendar hub (/lich-nghi-le/) ===== */
.ccdn-hl-panel { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-lg); box-shadow: var(--ccdn-shadow-card); padding: 24px; }
@media (min-width: 640px) { .ccdn-hl-panel { padding: 32px; } } /* Phase 8C.1: the same panel padding as .ccdn-tool (was 20px / 24px 28px) */
.ccdn-hl-controls { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.ccdn-hl-controls .ccdn-field { margin: 0; }
.ccdn-hl-year { min-width: 110px; }
.ccdn-hl-step { min-height: 44px; }
.ccdn-hl-controls .ccdn-chip { min-height: 44px; }
.ccdn-hl-controls .ccdn-chip[aria-pressed="true"] { background: #DBE7FD; border-color: var(--ccdn-primary); }
.ccdn-hl-controls button:disabled { opacity: 0.45; cursor: not-allowed; }
.ccdn-hl-result { border-top: 1px solid var(--ccdn-border); margin-top: 18px; padding-top: 18px; }
.ccdn-hl-result[hidden] { display: none; }
html.ccdn-js .ccdn-hl-result[hidden] { display: block; visibility: hidden; min-height: 760px; }
.ccdn-hl-title { font-size: 24px; margin: 0 0 10px; }
@media (min-width: 768px) { .ccdn-hl-title { font-size: 28px; } }
.ccdn-hl-notice { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid #C7D9FB; font-size: 14px; color: var(--ccdn-body); }
.ccdn-hl-notice.is-incomplete { border-left-color: #F2B84B; }
.ccdn-hl-summary { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 4px; font-size: 15px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-hl-summary strong { color: var(--ccdn-ink); }
.ccdn-hl-summary [hidden] { display: none; }
.ccdn-hl-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ccdn-border); }
.ccdn-hl-event { border-bottom: 1px solid var(--ccdn-border); }
.ccdn-hl-event > details > summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline; cursor: pointer; padding: 12px 22px 12px 0; position: relative; list-style: none; min-height: 44px; box-sizing: border-box; }
.ccdn-hl-event > details > summary::-webkit-details-marker { display: none; }
.ccdn-hl-event > details > summary::after { content: '+'; position: absolute; right: 2px; top: 12px; color: var(--ccdn-primary); font-weight: 700; }
.ccdn-hl-event > details[open] > summary::after { content: '−'; }
.ccdn-hl-name { font-weight: 700; color: var(--ccdn-ink); font-size: 16px; }
.ccdn-hl-badge { justify-self: end; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--ccdn-radius-sm); white-space: nowrap; }
.ccdn-hl-badge.is-official { background: #EFF4FF; color: var(--ccdn-primary-deep); border: 1px solid #C7D9FB; }
.ccdn-hl-badge.is-statutory { background: var(--ccdn-bg); color: var(--ccdn-body); border: 1px solid var(--ccdn-border-strong); }
.ccdn-hl-badge.is-incomplete { background: #FEF3E2; color: #92400E; border: 1px solid #FCE2B8; }
.ccdn-hl-dates { grid-column: 1; font-size: 15px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-hl-meta { grid-column: 1; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-hl-count { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: center; font-size: 14px; font-weight: 700; color: var(--ccdn-primary); white-space: nowrap; }
.ccdn-hl-count.is-past { color: var(--ccdn-muted); font-weight: 600; }
.ccdn-hl-count.is-today, .ccdn-hl-count.is-ongoing { color: var(--ccdn-accent); }
.ccdn-hl-detail { padding: 2px 0 14px; font-size: 14px; color: var(--ccdn-body); }
.ccdn-hl-h { font-weight: 700; color: var(--ccdn-ink); margin: 6px 0 4px; }
.ccdn-hl-dates-list { margin: 0 0 8px; padding-left: 18px; }
.ccdn-hl-dates-list li { margin: 3px 0; }
.ccdn-hl-dates-list li.is-work { color: var(--ccdn-ink); font-weight: 600; }
.ccdn-hl-tag { color: var(--ccdn-muted); font-weight: 400; }
.ccdn-hl-line { margin: 6px 0; }
.ccdn-hl-scope { color: var(--ccdn-muted); }
.ccdn-hl-links { display: flex; flex-direction: column; margin-top: 8px; }
.ccdn-hl-links a { font-weight: 600; padding: 11px 0; }
.ccdn-hl-sources-list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--ccdn-body); }
.ccdn-hl-sources-list li { margin: 6px 0; }
.ccdn-hl-sources > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ccdn-primary); padding: 9px 0; min-height: 40px; box-sizing: border-box; }
@media (max-width: 559px) {
  .ccdn-hl-event > details > summary { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .ccdn-hl-name { grid-column: 1; grid-row: 1; }
  .ccdn-hl-count { grid-column: 2; grid-row: 1; justify-self: end; align-self: baseline; }
  .ccdn-hl-dates { grid-column: 1 / -1; grid-row: 2; }
  .ccdn-hl-meta { grid-column: 1 / -1; grid-row: 3; }
  .ccdn-hl-badge { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin-top: 2px; }
  .ccdn-hl-step { flex: 1 1 40%; }
}
/* Six navigation items: the inline desktop nav starts at 1120px (brand ~239 + nav 803, leaving a 38px gap; the five-item nav had 43px at 1024 and 134px at 1280); below that the menu button opens the task list */

/* keyboard focus for disclosure summaries (FAQ, accordions, holiday events) */
summary:focus-visible { outline: 2px solid var(--ccdn-primary); outline-offset: 2px; }

/* ===== Phase 8A: compact single-date facts + range presets ===== */
.ccdn-facts { display: block; margin: 16px 0 0; }
.ccdn-facts-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ccdn-facts-table thead th { text-align: left; font-size: 12px; font-weight: 700; color: var(--ccdn-body); text-transform: uppercase; letter-spacing: 0.03em; padding: 0 6px 6px 0; }
.ccdn-facts-table tbody th { text-align: left; font-weight: 600; color: var(--ccdn-body); padding: 7px 8px 7px 0; border-top: 1px solid var(--ccdn-border); width: 28%; }
.ccdn-facts-table td { padding: 7px 6px 7px 0; border-top: 1px solid var(--ccdn-border); color: var(--ccdn-ink); font-weight: 700; vertical-align: top; }
.ccdn-facts-note { margin: 8px 0 0; font-size: 13px; color: var(--ccdn-body); }
.ccdn-home-ranges { margin: 10px 0 2px; }
@media (max-width: 559px) { .ccdn-facts-table { font-size: 13.5px; } .ccdn-facts-table tbody th { width: 24%; } }
.ccdn-as-facts { margin: 6px 0 0; font-size: 14px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-as-rule { margin: 8px 0 0; font-size: 14px; color: var(--ccdn-body); }
.ccdn-as-rule:empty, .ccdn-as-facts:empty { display: none; }
.ccdn-why { margin: 10px 0 0; }
.ccdn-why > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ccdn-primary); padding: 9px 0; min-height: 40px; box-sizing: border-box; }
.ccdn-why-body p { margin: 0 0 8px; font-size: 14px; color: var(--ccdn-body); }
.ccdn-why-list { list-style: none; margin: 0 0 6px; padding: 0; font-size: 13.5px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-why-list li { padding: 5px 0; border-top: 1px solid var(--ccdn-border); }
.ccdn-roll { margin: 0 0 8px; font-size: 14px; }
.ccdn-roll > div { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--ccdn-border); }
.ccdn-roll dt { flex: 0 0 74px; font-weight: 700; color: var(--ccdn-body); }
.ccdn-roll dd { margin: 0; color: var(--ccdn-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ccdn-hl-next { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--ccdn-primary); background: var(--ccdn-bg); font-size: 14px; color: var(--ccdn-ink); }
.ccdn-hl-line2 { margin: 8px 0 0; font-size: 14px; color: var(--ccdn-body); }
.ccdn-hl-line2 strong { color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-hl-line2 a { font-weight: 600; white-space: nowrap; }
.ccdn-home-ranges .ccdn-chip { flex: 1 1 calc(50% - 8px); min-height: 40px; text-align: center; padding-left: 8px; padding-right: 8px; }
@media (min-width: 700px) { .ccdn-home-ranges .ccdn-chip { flex: 0 0 auto; } }
/* A hidden button must be hidden: .ccdn-btn sets display:flex, which beat the [hidden] attribute
   (the 12-month "Xuất CSV" button showed in month view although it can only export a year). */
.ccdn-btn[hidden], .ccdn-chip[hidden], .ccdn-btn-text[hidden] { display: none; }
.ccdn-pd-explain { margin: 4px 0 0; } .ccdn-pd-explain a { display: inline-block; padding: 11px 0; font-weight: 600; }
.ccdn-preset-label { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--ccdn-body); text-transform: uppercase; letter-spacing: 0.03em; }
.ccdn-preset-label + .ccdn-home-ranges { margin-top: 6px; }

/* ===== Phase 8B: /tinh-thoi-han/ ===== */
.ccdn-dl-units { flex-wrap: wrap; }
.ccdn-dl-summary dt { flex: 0 0 142px; }
@media (max-width: 559px) { .ccdn-dl-summary dt { flex-basis: 112px; } }
.ccdn-dl-steps { margin: 0 0 8px; padding-left: 20px; font-size: 14px; color: var(--ccdn-ink); }
.ccdn-dl-steps li { padding: 4px 0; }
.ccdn-dl-source a { font-weight: 600; } /* Phase 8C.1: the block is also .ccdn-result-note, the site's one provenance-note style */
.ccdn-dl-limit { margin-top: 10px; }
.ccdn-dl-rules { padding-left: 20px; }
.ccdn-dl-rules li { padding: 3px 0; }
#ccdn-dl-restnotice .ccdn-btn-text { display: inline-block; margin-top: 6px; padding: 8px 0; font-weight: 700; }
.ccdn-dl-sched { margin-top: 12px; }
.ccdn-dl-rulepanel .ccdn-mode-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ccdn-dl-rulepanel .ccdn-mode-option { justify-content: center; text-align: center; padding: 7px 6px; }
.ccdn-dl-units .ccdn-mode-option { flex: 1 1 28%; justify-content: center; padding: 7px 6px; }
.ccdn-dl-essential .ccdn-quick-actions { flex-wrap: nowrap; }
.ccdn-dl-essential .ccdn-chip { flex: 1 1 0; justify-content: center; text-align: center; padding-left: 4px; padding-right: 4px; }
@media (max-width: 859px) {
  /* On phones the answer must come right after the three essential inputs: the rule options (still visible) follow it. */
  .ccdn-dl-form { display: contents; }
  .ccdn-dl-essential { order: 1; }
  .ccdn-as-grid > .ccdn-as-result-col { order: 2; }
  .ccdn-dl-rulepanel { order: 3; padding-top: 4px; border-top: 1px solid var(--ccdn-border); }
}

/* ===== Phase 8C.1: product discovery + hierarchy ===== */

/* Homepage "Bạn cần tính gì?": compact job rows, one box, not six cards */
.ccdn-chooser-section { padding: 4px 0 8px; }
.ccdn-chooser-h { font-size: 20px; margin: 0 0 10px; }
.ccdn-chooser { list-style: none; margin: 0; padding: 0; background: var(--ccdn-surface); border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-lg); overflow: hidden; }
.ccdn-chooser li + li { border-top: 1px solid var(--ccdn-border); }
.ccdn-chooser-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; min-height: 56px; color: var(--ccdn-ink); }
a.ccdn-chooser-row:hover { background: #F4F8FF; text-decoration: none; }
a.ccdn-chooser-row:focus-visible { outline-offset: -3px; }
.ccdn-chooser-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ccdn-chooser-text strong { font-size: 15px; color: var(--ccdn-ink); }
.ccdn-chooser-text span { font-size: 14px; color: var(--ccdn-body); }
.ccdn-chooser-go { flex: none; color: var(--ccdn-primary); font-weight: 700; font-size: 18px; }
.ccdn-chooser-here { flex: none; font-size: 12px; font-weight: 700; color: var(--ccdn-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ccdn-chooser-row.is-current { background: var(--ccdn-bg); }
@media (min-width: 720px) {
  /* two columns that follow the product's own groups: calendar tools | working-day tools + reference */
  .ccdn-chooser { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; }
  .ccdn-chooser li + li { border-top: 0; }
  .ccdn-chooser li:not(:nth-child(3n+1)) { border-top: 1px solid var(--ccdn-border); }
  .ccdn-chooser li:nth-child(n+4) { border-left: 1px solid var(--ccdn-border); }
}

/* "when to use which" line (add/subtract <-> time limit) */
.ccdn-which { margin: 10px 0 0; padding: 7px 12px; border-left: 3px solid var(--ccdn-primary); background: var(--ccdn-surface); font-size: 14px; color: var(--ccdn-ink); max-width: 640px; }
.ccdn-which a { font-weight: 700; white-space: nowrap; }

/* invalid shared-link values were reset: say so */
.ccdn-share-note { margin: 0 0 16px; }

/* working-day page: one tool, two modes (accessible tabs). Without JS both panels stay in the document. */
.ccdn-modetabs { display: none; }
html.ccdn-js .ccdn-modetabs { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--ccdn-border); }
.ccdn-modetab { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 52px; margin-bottom: -1px; padding: 7px 10px; text-align: left; font-family: var(--ccdn-font); background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0 0; color: var(--ccdn-body); cursor: pointer; }
.ccdn-modetab strong { font-size: 15px; color: var(--ccdn-ink); }
.ccdn-modetab span { font-size: 13px; color: var(--ccdn-muted); }
.ccdn-modetab:hover { background: var(--ccdn-bg); }
.ccdn-modetab[aria-selected="true"] { background: #EFF4FF; border-bottom-color: var(--ccdn-primary); }
.ccdn-modetab[aria-selected="true"] strong { color: var(--ccdn-primary-deep); }
.ccdn-tabpanel .ccdn-pd-panel { border: 0; border-radius: 0; padding: 0; }
.ccdn-tabpanel.ccdn-period { padding-top: 0; scroll-margin-top: 150px; } /* the browser's own #ccdn-period scroll stops below the sticky header AND the tab bar */
.ccdn-tabpanel .ccdn-period-h { font-size: 20px; margin: 0 0 6px; }
@media (max-width: 479px) { .ccdn-modetab span { font-size: 12.5px; } .ccdn-modetab { padding-left: 8px; padding-right: 6px; } }

/* deadline page: the source line is a provenance note like the other result notes; verbatim quotes are one disclosure */
.ccdn-dl-quotes { margin: 8px 0 0; }
.ccdn-dl-quotes > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ccdn-primary); padding: 9px 0; min-height: 40px; box-sizing: border-box; }

/* Phone order for the three long forms (same pattern /tinh-thoi-han/ shipped in Phase 8B): essential inputs and the Calculate
   button, then the answer, then the options (rules, presets, custom dates). The active rule is repeated in the result itself.
   On wide screens the two blocks simply stack inside the form column. */
.ccdn-form-later { margin-top: 14px; }
@media (max-width: 859px) {
  .ccdn-form-stack { display: contents; }
  .ccdn-form-first { order: 1; }
  .ccdn-form-later { order: 3; margin-top: 0; padding-top: 4px; border-top: 1px solid var(--ccdn-border); }
}

/* ---- Universal SEO page factory (Phase 9B): scoped to .ccdn-fa / .ccdn-crumbs, reuses the design tokens ---- */
.ccdn-crumbs { margin: 14px 0 0; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.ccdn-crumbs li + li::before { content: "›"; margin: 0 5px; color: var(--ccdn-muted); }
.ccdn-crumbs a { color: var(--ccdn-primary); display: inline-flex; align-items: center; min-height: 32px; }
.ccdn-crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.ccdn-fa-head { padding-bottom: 0; }
.ccdn-fa-answer { margin: 14px 0 0; padding: 16px; border: 1px solid var(--ccdn-border); border-radius: 12px; background: #fff; text-align: center; }
.ccdn-fa-lead { margin: 0; font-size: 17px; font-weight: 600; color: var(--ccdn-ink); }
.ccdn-fa-source { margin: 8px 0 0; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-fa-stale { margin: 8px 0 0; font-size: 14px; color: var(--ccdn-ink); font-weight: 600; }
.ccdn-fa-sec { margin-top: 22px; }
.ccdn-fa-sec h2 { font-size: 18px; margin: 0 0 8px; }
.ccdn-fa-table { margin: 0; }
.ccdn-fa-grid tbody th { width: auto; }
.ccdn-fa-note { margin-top: 14px; }
.ccdn-fa-lab { margin: 10px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ccdn-body); }
.ccdn-fa-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ccdn-fa-tools { list-style: none; margin: 0; padding: 0; }
.ccdn-fa-tools li { border-top: 1px solid var(--ccdn-border); }
.ccdn-fa-tools a { display: block; padding: 10px 0; min-height: 24px; }
.ccdn-fa-method p { margin: 0 0 8px; font-size: 14px; color: var(--ccdn-body); }

.ccdn-fa-list { margin: 0; padding-left: 20px; font-size: 14px; }
.ccdn-fa-list li { padding: 4px 0; }
.ccdn-fa-plain { margin: 0; font-size: 14px; color: var(--ccdn-body); }
.ccdn-fa-muted { color: var(--ccdn-muted); font-weight: 400; }
.ccdn-fa-status-warn { border-left-color: #E0A100; color: var(--ccdn-ink); }
.ccdn-fa-nonwork { border-left-color: #E0A100; color: var(--ccdn-ink); font-weight: 600; }
.ccdn-fa-actions { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ccdn-fa-act { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ccdn-border); border-radius: 10px; background: #fff; color: var(--ccdn-primary); font-size: 14px; font-weight: 600; text-decoration: none; }
.ccdn-fa-act-primary { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-fa-nrow { display: flex; gap: 8px 12px; padding: 7px 0; border-top: 1px solid var(--ccdn-border); align-items: baseline; }
.ccdn-fa-nlab { flex: 0 0 76px; font-size: 12px; font-weight: 700; color: var(--ccdn-body); text-transform: uppercase; letter-spacing: 0.03em; }
.ccdn-fa-nchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ccdn-fa-nchips a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 8px; border: 1px solid var(--ccdn-border); border-radius: 8px; font-size: 14px; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ccdn-primary); background: #fff; }
.ccdn-fa-hubform { margin: 12px 0 0; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ccdn-fa-hubform[hidden] { display: none; }
.ccdn-fa-hubform label { font-size: 14px; font-weight: 600; }
.ccdn-fa-hubform input { width: 120px; min-height: 40px; padding: 0 10px; border: 1px solid var(--ccdn-border); border-radius: 8px; font-size: 16px; }
.ccdn-fa-grid td, .ccdn-fa-grid tbody th { font-variant-numeric: tabular-nums; }
@media (max-width: 559px) { .ccdn-fa-table th[scope="row"] { width: 34%; } .ccdn-fa-nlab { flex-basis: 64px; } }
.ccdn-fa-flow { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--ccdn-primary); font-variant-numeric: tabular-nums; }
.ccdn-fa-reverse { margin: 10px 0 0; font-size: 14px; color: var(--ccdn-body); }
.ccdn-fa-reverse a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ccdn-primary); font-weight: 600; }
/* ---- Age tools (Phase 9F): scoped to .ccdn-at-* ---- */
.ccdn-at-form { margin: 0; }
.ccdn-at-fields { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
.ccdn-at-form .ccdn-field { margin-bottom: 12px; }
.ccdn-at-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ccdn-at-actions .ccdn-btn { min-height: 44px; }
.ccdn-at-result:focus { outline: none; }
@media (max-width: 420px) { .ccdn-at-fields { grid-template-columns: 1fr 1fr; } .ccdn-at-fm { grid-column: 1 / -1; } }

/* ===== Phase 10A: specific-date calendar silo (date page, month grid, year hub, explorer) ===== */
.ccdn-cd .ccdn-fa-sec { margin-top: 18px; }
.ccdn-cal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ccdn-cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; background: #fff; border: 1px solid var(--ccdn-border); }
.ccdn-cal th, .ccdn-cal td { border: 1px solid var(--ccdn-border); padding: 0; text-align: center; vertical-align: top; }
.ccdn-cal thead th { background: var(--ccdn-bg); color: var(--ccdn-ink); font-size: 13px; font-weight: 700; padding: 8px 0; }
.ccdn-cal thead th:nth-child(7), .ccdn-cal thead th:nth-child(8) { color: var(--ccdn-accent); }
.ccdn-cal .ccdn-cal-w { width: 15%; font-size: 11px; font-weight: 600; color: var(--ccdn-muted); background: var(--ccdn-bg); padding: 4px 2px; }
.ccdn-cal td.ccdn-cal-d { height: 56px; position: relative; }
.ccdn-cal td.ccdn-cal-x { background: var(--ccdn-bg); }
.ccdn-cal .ccdn-cal-n { display: block; padding: 7px 0 0; font-size: 16px; font-weight: 700; color: var(--ccdn-ink); text-decoration: none; line-height: 1.2; }
.ccdn-cal a.ccdn-cal-n { color: var(--ccdn-primary); min-height: 36px; }
.ccdn-cal a.ccdn-cal-n:hover { background: #EFF6FF; }
.ccdn-cal .ccdn-cal-l { display: block; font-size: 11px; color: var(--ccdn-muted); line-height: 1.2; padding-bottom: 4px; }
.ccdn-cal td.ccdn-cal-we .ccdn-cal-n { color: var(--ccdn-accent); }
.ccdn-cal td.ccdn-cal-we a.ccdn-cal-n { color: var(--ccdn-accent); }
.ccdn-cal td.ccdn-cal-hol { background: #FEF2F2; box-shadow: inset 0 -3px 0 var(--ccdn-accent); }
.ccdn-cal td.ccdn-cal-holu { background: #FFFBEB; box-shadow: inset 0 -3px 0 var(--ccdn-warning); }
.ccdn-cal td.ccdn-cal-mk { background: #F0FDF4; box-shadow: inset 0 -3px 0 var(--ccdn-success); }
.ccdn-cal-legend { margin: 8px 0 0; font-size: 13px; color: var(--ccdn-muted); line-height: 1.6; }
.ccdn-cal-k { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--ccdn-border-strong); vertical-align: -1px; margin: 0 2px 0 8px; }
.ccdn-cal-k.ccdn-cal-hol { background: #FEF2F2; border-color: var(--ccdn-accent); } .ccdn-cal-k.ccdn-cal-holu { background: #FFFBEB; border-color: var(--ccdn-warning); } .ccdn-cal-k.ccdn-cal-mk { background: #F0FDF4; border-color: var(--ccdn-success); }
.ccdn-cd-form { margin: 8px 0 0; }
.ccdn-cd-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ccdn-cd-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ccdn-ink); }
.ccdn-cd-fields input { height: 44px; width: 84px; padding: 0 10px; border: 1px solid var(--ccdn-border-strong); border-radius: 6px; font-size: 16px; font-variant-numeric: tabular-nums; }
.ccdn-cd-fields label:nth-child(3) input { width: 104px; }
.ccdn-cd-fields button { height: 44px; padding: 0 20px; border: 0; border-radius: 6px; background: var(--ccdn-primary); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.ccdn-cd-result { margin-top: 14px; border-top: 1px solid var(--ccdn-border); padding-top: 10px; }
@media (max-width: 559px) { .ccdn-cal .ccdn-cal-n { font-size: 15px; } .ccdn-cal td.ccdn-cal-d { height: 52px; } .ccdn-cd-fields input { width: 72px; } .ccdn-cd-fields label:nth-child(3) input { width: 92px; } }
/* Phase 10A touch targets (scoped to the calendar silo; existing families untouched) */
.ccdn-cd .ccdn-fa-inline { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; padding: 0; margin: 4px 0 0; }
.ccdn-cd .ccdn-fa-inline li { margin: 0; }
.ccdn-cd .ccdn-fa-inline a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--ccdn-border); border-radius: 6px; background: #fff; text-decoration: none; }
.ccdn-cd .ccdn-fa-grid th a, .ccdn-cd .ccdn-fa-grid td a { display: inline-flex; align-items: center; min-height: 32px; }
.ccdn-cd .ccdn-fa-grid tbody th, .ccdn-cd .ccdn-fa-grid tbody td { padding-top: 5px; padding-bottom: 5px; }

/* =====================================================================
   Phase 13 — homepage workbench (tabs, result, timeline, calendars, quick lookup, discovery)
   Scoped to .ccdn-home so no other page is affected. One bordered surface, no card-in-card.
   ===================================================================== */
.ccdn-home { max-width: 1100px; }
.ccdn-home-intro { padding: 22px 0 14px; }
.ccdn-home-intro h1 { font-size: 30px; margin-bottom: 8px; }
.ccdn-home-intro p { font-size: 16px; max-width: 760px; margin: 0; }
@media (min-width: 768px) { .ccdn-home-intro { padding: 28px 0 18px; } .ccdn-home-intro h1 { font-size: 36px; } }

.ccdn-wb { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; }
.ccdn-wb-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: #F1F5F9; border-bottom: 1px solid var(--ccdn-border-strong); }
.ccdn-wb-tab {
  appearance: none; background: transparent; border: 0; border-right: 1px solid var(--ccdn-border-strong); border-bottom: 3px solid transparent; margin-bottom: -1px;
  min-height: 48px; padding: 6px 4px; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ccdn-body); cursor: pointer; text-align: center;
}
.ccdn-wb-tab:last-child { border-right: 0; }
.ccdn-wb-tab:hover { background: #E8EEF6; }
.ccdn-wb-tab.is-active { background: var(--ccdn-surface); color: var(--ccdn-primary); border-bottom-color: var(--ccdn-primary); }
.ccdn-wb-tab:focus-visible, .ccdn-chip:focus-visible, .ccdn-btn:focus-visible, .ccdn-input:focus-visible, .ccdn-swap-btn:focus-visible,
.ccdn-ql a:focus-visible, .ccdn-disc a:focus-visible, .ccdn-res-actions a:focus-visible, .ccdn-detail summary:focus-visible, .ccdn-opts summary:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
@media (min-width: 640px) { .ccdn-wb-tab { font-size: 15px; min-height: 52px; } }

.ccdn-wb .ccdn-share-note, .ccdn-wb > .ccdn-notice { margin: 12px 20px 0; }
.ccdn-wb-panel { padding: 18px 16px 20px; }
@media (min-width: 640px) { .ccdn-wb-panel { padding: 22px 24px 24px; } }
.ccdn-wb-panel[hidden], .ccdn-res[hidden], .ccdn-notice[hidden], .ccdn-result-note[hidden] { display: none; }
.ccdn-wb .ccdn-field { margin-bottom: 12px; }
.ccdn-wb .ccdn-label { font-size: 13px; }
.ccdn-wb .ccdn-input { height: 46px; min-height: 46px; }
.ccdn-wb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 4px 0 0; }
.ccdn-wb-controls .ccdn-mode-group { margin: 0; }
.ccdn-wb-controls .ccdn-btn-primary { min-height: 46px; margin-left: auto; }
@media (max-width: 559px) { .ccdn-wb-controls .ccdn-btn-primary { width: 100%; margin-left: 0; } }
.ccdn-wb .ccdn-mode-option { min-height: 40px; border-radius: var(--ccdn-radius-sm); }

.ccdn-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.ccdn-presets-l { font-size: 13px; font-weight: 700; color: var(--ccdn-muted); margin-right: 2px; }
.ccdn-wb .ccdn-chip { min-height: 36px; border-radius: var(--ccdn-radius-sm); padding: 0 12px; font-size: 13px; font-weight: 700; cursor: pointer; }

.ccdn-hx-row3 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 720px) { .ccdn-hx-row3 { grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: end; } .ccdn-hx-row3 .ccdn-hx-amt { } }
#ccdn-panel-deadline .ccdn-hx-row3 { }
@media (min-width: 720px) { #ccdn-panel-deadline .ccdn-hx-row3 { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.ccdn-seg { display: flex; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); overflow: hidden; height: 46px; }
.ccdn-seg label { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; cursor: pointer; background: var(--ccdn-surface); position: relative; }
.ccdn-seg label + label { border-left: 1px solid var(--ccdn-border-strong); }
.ccdn-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ccdn-seg label.is-active { background: var(--ccdn-primary); color: #fff; }
.ccdn-seg label:focus-within { outline: 3px solid var(--ccdn-primary); outline-offset: -3px; }
.ccdn-seg label.is-active:focus-within { outline-color: var(--ccdn-ink); }

.ccdn-opts { margin: 14px 0 0; border-top: 1px solid var(--ccdn-border); padding-top: 10px; font-size: 14px; }
.ccdn-opts summary, .ccdn-detail summary { cursor: pointer; font-weight: 700; color: var(--ccdn-primary); min-height: 36px; display: flex; align-items: center; }
.ccdn-check { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; color: var(--ccdn-body); }
.ccdn-check input { margin-top: 3px; width: 16px; height: 16px; }
.ccdn-opts-set { border: 0; padding: 0; margin: 8px 0 0; }
.ccdn-opts-set legend { font-weight: 700; padding: 0; color: var(--ccdn-ink); }
.ccdn-opts-note { margin: 8px 0 0; color: var(--ccdn-muted); font-size: 13px; }

/* ---- result: answer first ---- */
.ccdn-wb .ccdn-res { border-top: 1px solid var(--ccdn-border); margin-top: 20px; padding-top: 18px; }
.ccdn-res-main .ccdn-result-number { font-size: 56px; letter-spacing: -0.02em; }
@media (max-width: 559px) { .ccdn-res-main .ccdn-result-number { font-size: 48px; } }
.ccdn-res-sub { margin: 8px 0 0; font-size: 20px; font-weight: 700; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-res-sub2 { margin: 6px 0 0; font-size: 15px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-res-sub2 strong { color: var(--ccdn-ink); }
.ccdn-res-main .ccdn-composition-note { color: var(--ccdn-muted); font-size: 13px; }
.ccdn-res-date { font-size: 34px; font-weight: 800; line-height: 1.15; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ccdn-res-date .wd { display: block; font-size: 15px; font-weight: 700; color: var(--ccdn-primary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
@media (min-width: 640px) { .ccdn-res-date { font-size: 42px; } }
.ccdn-res-main .ccdn-result-note { margin-top: 10px; }
.ccdn-caveat { margin: 14px 0 0; font-size: 13px; color: var(--ccdn-muted); border-left: 3px solid var(--ccdn-warning); padding-left: 10px; }

/* ---- timeline ---- */
.ccdn-tl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 20px 0 4px; }
.ccdn-tl-end { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; min-width: 0; }
.ccdn-tl-end strong { font-size: 16px; color: var(--ccdn-ink); line-height: 1.2; }
.ccdn-tl-end span { font-size: 13px; color: var(--ccdn-muted); font-weight: 600; }
.ccdn-tl-end.is-b { text-align: right; align-items: flex-end; }
.ccdn-tl-bar { position: relative; height: 28px; }
.ccdn-tl-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--ccdn-primary); border-radius: 2px; }
.ccdn-tl-bar::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 14px; margin-top: -7px; border-left: 4px solid var(--ccdn-primary); border-right: 4px solid var(--ccdn-primary); }
.ccdn-tl-len { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); background: var(--ccdn-surface); padding: 0 8px; font-size: 13px; font-weight: 800; color: var(--ccdn-primary-deep); white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ccdn-tl-tick { position: absolute; top: 50%; width: 2px; height: 12px; margin-top: 2px; background: var(--ccdn-ink); opacity: .55; }
@media (max-width: 479px) { .ccdn-tl { gap: 8px; } .ccdn-tl-end strong { font-size: 14px; } .ccdn-tl-end span { font-size: 12px; } }

/* ---- calendars ---- */
.ccdn-mcs { margin: 18px 0 0; }
.ccdn-mcs:empty { display: none; }
.ccdn-mcs.has-two { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .ccdn-mcs.has-two { grid-template-columns: 1fr 1fr; } }
.ccdn-mcs.has-two .ccdn-mc-gap, .ccdn-mcs .ccdn-mc-legend { grid-column: 1 / -1; }
.ccdn-mc-gap { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-mc table { width: 100%; border-collapse: separate; border-spacing: 0 2px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.ccdn-mc caption { text-align: left; font-weight: 800; font-size: 15px; color: var(--ccdn-ink); padding: 0 0 6px; }
.ccdn-mc th, .ccdn-mc td { border: 0; background: none; }
.ccdn-mc th { font-size: 12px; font-weight: 700; color: var(--ccdn-muted); padding: 4px 0; text-align: center; }
.ccdn-mc th.is-we { color: var(--ccdn-ink); }
.ccdn-mc td { height: 36px; text-align: center; vertical-align: middle; font-size: 14px; color: var(--ccdn-body); padding: 0; }
.ccdn-mc td.is-we { color: var(--ccdn-muted); }
.ccdn-mc td.is-in { background: #DBEAFE; color: var(--ccdn-ink); font-weight: 600; }
.ccdn-mc td.is-in.is-we { color: var(--ccdn-ink); }
.ccdn-mc td.is-start, .ccdn-mc td.is-end { background: var(--ccdn-primary); color: #fff; font-weight: 800; }
.ccdn-mc td.is-start { border-radius: var(--ccdn-radius-sm) 0 0 var(--ccdn-radius-sm); }
.ccdn-mc td.is-end { border-radius: 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0; }
.ccdn-mc td.is-start.is-end { border-radius: var(--ccdn-radius-sm); }
.ccdn-mc td.is-off { background: repeating-linear-gradient(135deg, #E2E8F0 0 4px, #F1F5F9 4px 8px); color: var(--ccdn-ink); }
.ccdn-mc td.is-work { background: #DCFCE7; color: var(--ccdn-ink); font-weight: 600; }
.ccdn-mc td.is-start.is-off, .ccdn-mc td.is-end.is-off, .ccdn-mc td.is-start.is-work, .ccdn-mc td.is-end.is-work { background: var(--ccdn-primary); color: #fff; }
.ccdn-mc td.is-hol { box-shadow: inset 0 -3px 0 var(--ccdn-accent); font-weight: 800; }
.ccdn-mc td.is-hol:not(.is-start):not(.is-end) { color: #B91C1C; }
.ccdn-mc td.is-mk { box-shadow: inset 0 -3px 0 var(--ccdn-warning); }
.ccdn-mc td.is-today span { outline: 2px solid var(--ccdn-ink); outline-offset: 1px; border-radius: 4px; padding: 0 3px; }
.ccdn-mc-note { margin: 6px 0 0; font-size: 12px; color: var(--ccdn-muted); }
.ccdn-mc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; font-size: 13px; color: var(--ccdn-body); }
.ccdn-mc-legend li { display: flex; align-items: center; gap: 6px; }
.ccdn-mc-legend .k { display: inline-block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--ccdn-border-strong); }
.k-start, .k-end { background: var(--ccdn-primary); border-color: var(--ccdn-primary); }
.k-start { border-radius: 8px 0 0 8px; } .k-end { border-radius: 0 8px 8px 0; }
.k-in { background: #DBEAFE; } .k-work { background: #DCFCE7; }
.k-off { background: repeating-linear-gradient(135deg, #CBD5E1 0 3px, #F1F5F9 3px 6px); }
.k-we { background: var(--ccdn-surface); position: relative; } .k-we::after { content: "T7"; position: absolute; inset: 0; font: 700 7px/14px var(--ccdn-font); text-align: center; color: var(--ccdn-muted); }
.k-hol { background: var(--ccdn-surface); box-shadow: inset 0 -3px 0 var(--ccdn-accent); }

/* ---- details / actions ---- */
.ccdn-detail { margin: 16px 0 0; border-top: 1px solid var(--ccdn-border); padding-top: 6px; }
.ccdn-detail .ccdn-breakdown-line { font-size: 17px; margin-top: 8px; }
.ccdn-detail .ccdn-facts { margin-top: 12px; }
.ccdn-detail .ccdn-facts-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ccdn-detail .ccdn-facts-table th, .ccdn-facts-table td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--ccdn-border); color: var(--ccdn-ink); }
.ccdn-detail .ccdn-facts-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ccdn-muted); }
.ccdn-detail .ccdn-facts-table tbody th { font-weight: 700; width: 28%; }
.ccdn-detail .ccdn-facts-note { font-size: 13px; color: var(--ccdn-muted); margin: 8px 0 0; }
.ccdn-detail .ccdn-weekday-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 12px 0 0; font-size: 14px; }
.ccdn-detail .ccdn-weekday-list strong { font-variant-numeric: tabular-nums; }
.ccdn-detail .ccdn-conversions { margin: 10px 0 0; font-size: 14px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
@media (max-width: 559px) { .ccdn-detail .ccdn-facts-table { font-size: 13px; } .ccdn-facts-table tbody th { width: 24%; } }
.ccdn-res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--ccdn-border); }
.ccdn-res-actions a { font-weight: 700; font-size: 14px; }
.ccdn-wb .ccdn-btn-secondary { min-height: 40px; }

/* ---- Tra nhanh một ngày ---- */
.ccdn-ql { margin: 32px 0 0; }
.ccdn-ql h2, .ccdn-disc h2 { font-size: 22px; margin-bottom: 12px; }
.ccdn-ql-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: var(--ccdn-surface); overflow: hidden; }
@media (min-width: 900px) { .ccdn-ql-grid { grid-template-columns: repeat(6, 1fr); } .ccdn-ql-row { grid-column: span 2; } .ccdn-ql-row:nth-child(n+4) { grid-column: span 3; } }
.ccdn-ql-row { padding: 14px 16px; border-bottom: 1px solid var(--ccdn-border); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (min-width: 900px) { .ccdn-ql-row { border-bottom: 0; border-right: 1px solid var(--ccdn-border); } .ccdn-ql-row:nth-child(n+4) { border-top: 1px solid var(--ccdn-border); } .ccdn-ql-row:nth-child(3), .ccdn-ql-row:nth-child(5) { border-right: 0; } }
.ccdn-ql-row:last-child { border-bottom: 0; }
.ccdn-ql-row > label { font-weight: 700; font-size: 14px; color: var(--ccdn-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccdn-ql .ccdn-input { height: 42px; min-height: 42px; }
.ccdn-ql .ccdn-ql-n { width: 96px; flex: none; }
.ccdn-ql-ans { margin: 0; font-size: 14px; color: var(--ccdn-body); min-height: 20px; font-variant-numeric: tabular-nums; }
.ccdn-ql-ans strong { color: var(--ccdn-ink); }
.ccdn-ql-ans a { font-weight: 700; }

/* ---- Tính tuổi + Tra cứu lịch ---- */
.ccdn-disc { margin: 32px 0 0; display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .ccdn-disc { grid-template-columns: 1fr 1fr; gap: 40px; } }
.ccdn-disc-form { margin: 0 0 14px; }
.ccdn-disc-l { display: block; font-size: 14px; font-weight: 700; color: var(--ccdn-ink); margin-bottom: 6px; }
.ccdn-disc-inline { display: flex; gap: 8px; }
.ccdn-disc .ccdn-input { height: 42px; min-height: 42px; width: 100%; min-width: 0; }
.ccdn-disc-inline .ccdn-input { flex: 1 1 0; }
.ccdn-disc-inline .ccdn-disc-y { flex: 1.3 1 0; }
.ccdn-disc .ccdn-btn { min-height: 42px; padding: 0 14px; white-space: nowrap; }
.ccdn-disc-msg { margin: 6px 0 0; font-size: 13px; color: #B91C1C; min-height: 0; }
.ccdn-disc-msg:empty { display: none; }
.ccdn-disc-list { list-style: none; margin: 0; padding: 0; }
.ccdn-disc-list li { border-bottom: 1px solid var(--ccdn-border); }
.ccdn-disc-list a { display: block; padding: 10px 2px; font-weight: 600; font-size: 15px; }
.ccdn-disc-links { margin: 8px 0 0; font-size: 14px; line-height: 1.9; color: var(--ccdn-muted); }
.ccdn-disc-links a { font-weight: 600; }
.ccdn-disc-h3 { font-size: 15px; margin: 18px 0 2px; }

.ccdn-nav-mobile a.ccdn-nav-sub { min-height: 40px; padding-left: 20px; }
.ccdn-nav-mobile li > a.ccdn-nav-sub strong { font-weight: 600; font-size: 14px; }

/* mobile: dates side by side with the swap button between them, compact controls (result higher on screen) */
@media (max-width: 559px) {
  .ccdn-wb-panel .ccdn-field-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 0 6px; align-items: end; }
  .ccdn-wb-panel .ccdn-field-row .ccdn-swap-btn { width: 36px; height: 46px; margin: 0 0 12px; padding: 0; align-self: end; }
  .ccdn-wb-panel .ccdn-field-row .ccdn-input[type="date"] { padding-left: 8px; padding-right: 6px; font-size: 14px; }
  .ccdn-wb-panel .ccdn-hx-row3 { display: block; }
  .ccdn-wb-controls .ccdn-mode-group { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .ccdn-wb .ccdn-mode-option { padding: 6px 8px; font-size: 13px; line-height: 1.2; min-height: 44px; }
  .ccdn-presets { gap: 6px; }
  .ccdn-presets-l { width: 100%; }
  .ccdn-wb .ccdn-chip { padding: 0 9px; }
}
.ccdn-wb .ccdn-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 24px; }
.ccdn-wb .ccdn-label .ccdn-btn-text { padding: 0; min-height: 24px; font-size: 13px; font-weight: 600; }
@media (max-width: 559px) { .ccdn-wb .ccdn-chip { padding: 0 8px; } .ccdn-presets { gap: 6px; } }
.ccdn-mc td.is-in.is-we { background: #BFD3F9; }
.k-we { background: #BFD3F9; } .k-we::after { color: var(--ccdn-ink); }
@media (min-width: 900px) {
  .ccdn-res-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .ccdn-res-main > .ccdn-result-primary, .ccdn-res-main > .ccdn-res-date { grid-column: 1; grid-row: 1; }
  .ccdn-res-main > .ccdn-res-sub { grid-column: 1; grid-row: 2; }
  .ccdn-res-main > .ccdn-res-sub2 { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; padding-left: 20px; border-left: 3px solid var(--ccdn-border); }
  .ccdn-res-main > .ccdn-result-mode-note, .ccdn-res-main > .ccdn-result-note { grid-column: 1 / -1; }
  .ccdn-res-main > .ccdn-res-sub:last-child, .ccdn-res-main > .ccdn-res-sub:nth-last-child(2) { }
}
.ccdn-mc td.is-in.is-off { background: repeating-linear-gradient(135deg, #CBD5E1 0 4px, #F1F5F9 4px 8px); }
.ccdn-mc td.is-in.is-work { background: #DCFCE7; }
.ccdn-mc td.is-start, .ccdn-mc td.is-end, .ccdn-mc td.is-in.is-start, .ccdn-mc td.is-in.is-end { background: var(--ccdn-primary); }
.ccdn-res-main .ccdn-res-line { font-size: 16px; font-weight: 600; line-height: 1.45; max-width: 640px; }
@media (min-width: 900px) { .ccdn-res-main > .ccdn-res-sub.ccdn-res-line { grid-column: 1 / -1; grid-row: auto; margin-top: 10px; } }
@media (max-width: 559px) {
  .ccdn-wb .ccdn-label { gap: 4px; font-size: 12px; }
  .ccdn-wb .ccdn-label .ccdn-btn-text { font-size: 12px; }
  .ccdn-disc-form:first-of-type .ccdn-disc-inline { flex-wrap: wrap; }
  .ccdn-disc-form:first-of-type .ccdn-disc-inline .ccdn-input { flex: 1 1 28%; }
  .ccdn-disc-form:first-of-type .ccdn-disc-inline .ccdn-btn { flex: 1 1 100%; }
}
@media (max-width: 479px) {
  .ccdn-tl { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .ccdn-tl-bar { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
  .ccdn-tl-len { top: -10px; }
}
html:not(.ccdn-js) .ccdn-wb-tabs { display: none; }
.ccdn-nav-mobile a.ccdn-nav-sub { min-height: 48px; }

/* =====================================================================
   Phase 14 / 14.1 — product discovery (Công cụ của bạn / phổ biến / Mốc sắp tới / Khám phá) + header dropdowns
   One width system: every block lives in .ccdn-home (same 1100px box as the workbench). Text: #0F172A primary, #475569 secondary (>=14px for anything explanatory).
   ===================================================================== */
.ccdn-home .ccdn-band h2, .ccdn-up h2, .ccdn-disc2 h2 { font-size: 22px; margin: 0 0 4px; }
.ccdn-sec-note { margin: 0 0 14px; font-size: 15px; color: var(--ccdn-muted); }
.ccdn-band, .ccdn-up, .ccdn-disc2 { margin: 36px 0 0; }
html:not(.ccdn-js) .ccdn-js-only { display: none; }

/* ---- band: Công cụ của bạn | Công cụ phổ biến (two bordered panels, same top, same height) ---- */
.ccdn-band { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 900px) { .ccdn-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 24px; } }
.ccdn-mine, .ccdn-pop { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); padding: 20px 22px; display: flex; flex-direction: column; min-width: 0; }
.ccdn-sub-h { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ccdn-muted); margin: 16px 0 8px; }
.ccdn-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ccdn-recent li { min-width: 0; max-width: 100%; }
.ccdn-recent a { display: block; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); padding: 8px 12px; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--ccdn-ink); background: var(--ccdn-bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; line-height: 22px; }
.ccdn-recent a:hover { background: #EFF4FF; border-color: var(--ccdn-primary); text-decoration: none; }
.ccdn-mine-hint { margin: 8px 0 0; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-saved { list-style: none; margin: 0; padding: 0; }
.ccdn-saved li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ccdn-border); }
.ccdn-saved li.is-empty { display: block; border-bottom: 0; font-size: 15px; color: var(--ccdn-body); padding: 0 0 4px; }
.ccdn-sv-b { min-width: 0; display: flex; flex-direction: column; }
.ccdn-sv-b strong { font-size: 15px; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-sv-b span { font-size: 14px; color: var(--ccdn-muted); }
.ccdn-sv-n { font-size: 14px; color: var(--ccdn-body); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ccdn-sv-n strong { font-size: 20px; color: var(--ccdn-ink); }
.ccdn-sv-open, .ccdn-sv-rm { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px; padding: 0 8px; font: inherit; font-size: 14px; font-weight: 700; background: none; border: 0; cursor: pointer; }
.ccdn-sv-rm { color: #B91C1C; }
.ccdn-sv-rm:hover { text-decoration: underline; }
.ccdn-save-details { margin-top: 14px; border-top: 1px solid var(--ccdn-border); padding-top: 2px; }
.ccdn-save-details > summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ccdn-primary); min-height: 44px; display: flex; align-items: center; }
.ccdn-save-details > summary::-webkit-details-marker { display: none; }
.ccdn-save-details > summary::before { content: "+"; display: inline-block; width: 18px; font-size: 20px; line-height: 1; }
.ccdn-save-details[open] > summary::before { content: "\2212"; }
.ccdn-save-form { margin: 4px 0 0; }
.ccdn-save-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ccdn-mine .ccdn-chip { min-height: 34px; border-radius: var(--ccdn-radius-sm); padding: 0 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ccdn-save-row { display: grid; grid-template-columns: 1fr; gap: 0 10px; align-items: end; }
@media (min-width: 480px) { .ccdn-save-row { grid-template-columns: minmax(0, 1fr) auto; } .ccdn-save-row .ccdn-field:first-child { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .ccdn-save-row { grid-template-columns: minmax(0, 1fr) minmax(0, 10.5rem) auto; } .ccdn-save-row .ccdn-field:first-child { grid-column: auto; } }
.ccdn-mine .ccdn-field { margin-bottom: 12px; }
.ccdn-mine .ccdn-label { font-size: 13px; }
.ccdn-mine .ccdn-input { height: 42px; min-height: 42px; }
.ccdn-save-row .ccdn-btn { min-height: 42px; margin-bottom: 12px; }
.ccdn-mine-msg { margin: 0; font-size: 14px; color: var(--ccdn-body); }
.ccdn-mine-msg:empty { display: none; }
#ccdn-saved-clear { align-self: flex-start; margin-top: 4px; color: #B91C1C; font-weight: 600; min-height: 40px; padding: 0; }
.ccdn-mine .ccdn-sv-open:focus-visible, .ccdn-sv-rm:focus-visible, .ccdn-recent a:focus-visible, .ccdn-pop-list a:focus-visible, .ccdn-up-list a:focus-visible, .ccdn-disc2 a:focus-visible, #ccdn-saved-clear:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }

/* popular: two columns of rows that share the panel height evenly (no dead area under the list) */
.ccdn-pop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; flex: 1; border-top: 1px solid var(--ccdn-border); }
@media (min-width: 640px) { .ccdn-pop-list { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; column-gap: 26px; } }
.ccdn-pop-list li { border-bottom: 1px solid var(--ccdn-border); display: flex; }
.ccdn-pop-list a { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 9px 26px 9px 2px; color: var(--ccdn-ink); position: relative; }
.ccdn-pop-list a::after { content: "\2192"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--ccdn-primary); font-weight: 700; }
.ccdn-pop-list a strong { font-size: 16px; color: var(--ccdn-ink); }
.ccdn-pop-list a span { font-size: 14px; color: var(--ccdn-muted); line-height: 1.35; }
.ccdn-pop-list a:hover { text-decoration: none; background: #F1F5F9; }
.ccdn-pop-list a:hover strong { color: var(--ccdn-primary-deep); text-decoration: underline; }

/* ---- Mốc sắp tới: one bordered table of dates; countdown | event | date ---- */
.ccdn-today { margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--ccdn-primary); font-size: 15px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-today strong { color: var(--ccdn-ink); }
.ccdn-up-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ccdn-border-strong); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; }
@media (min-width: 640px) { .ccdn-up-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ccdn-up-list { grid-template-columns: 1fr 1fr 1fr; } }
.ccdn-up-list li { display: flex; align-items: stretch; background: var(--ccdn-surface); min-width: 0; }
.ccdn-up-n { flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 6px; border-right: 1px solid var(--ccdn-border); background: var(--ccdn-bg); font-size: 13px; font-weight: 700; color: var(--ccdn-muted); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ccdn-up-n strong { display: block; font-size: 30px; font-weight: 800; color: var(--ccdn-ink); letter-spacing: -.02em; line-height: 1.05; }
.ccdn-up-b { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 2px; padding: 12px 16px; }
.ccdn-up-b > a, .ccdn-up-b > strong { font-size: 17px; font-weight: 800; color: var(--ccdn-ink); line-height: 1.25; }
.ccdn-up-b > a { text-decoration: underline; text-decoration-color: var(--ccdn-border-strong); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ccdn-up-b > a:hover { color: var(--ccdn-primary-deep); text-decoration-color: var(--ccdn-primary); }
.ccdn-up-b > span { font-size: 14px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-up-b > em { font-style: normal; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-up-note { margin: 10px 0 0; font-size: 14px; color: var(--ccdn-muted); }

/* ---- Khám phá công cụ: content-aware directory ---- */
.ccdn-dgs { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ccdn-border-strong); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; margin-top: 12px; }
.ccdn-dg { background: var(--ccdn-surface); padding: 18px 22px 20px; min-width: 0; }
.ccdn-dg > summary { list-style: none; display: block; }
.ccdn-dg > summary::-webkit-details-marker { display: none; }
.ccdn-dg h3 { font-size: 18px; margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccdn-dg-n { font-size: 13px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-dg-p { margin: 0 0 10px; font-size: 15px; color: var(--ccdn-muted); line-height: 1.45; }
.ccdn-dg-l { list-style: none; margin: 0; padding: 0; }
.ccdn-dg-l li { padding: 9px 0; border-top: 1px solid var(--ccdn-border); font-size: 15px; color: var(--ccdn-ink); }
.ccdn-dg-l li > a { font-weight: 700; font-size: 16px; color: var(--ccdn-ink); }
.ccdn-dg-l li > a::after { content: " \2192"; color: var(--ccdn-primary); }
.ccdn-dg-l li > a:hover { color: var(--ccdn-primary-deep); text-decoration: underline; }
.ccdn-dg-l li > span { display: block; font-size: 14px; color: var(--ccdn-muted); margin-top: 1px; line-height: 1.4; }
.ccdn-dg-l .ccdn-sl { font-weight: 600; color: var(--ccdn-primary-deep); text-decoration: underline; text-underline-offset: 2px; }
.ccdn-dg-l-tight li { padding: 8px 0; }
.ccdn-dg-ex { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-dg-ex > span { font-weight: 700; margin-right: 2px; }
.ccdn-dg-ex a { border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); padding: 4px 10px; font-weight: 600; font-size: 14px; color: var(--ccdn-primary-deep); background: var(--ccdn-bg); line-height: 1.4; }
.ccdn-dg-ex a:hover { background: #EFF4FF; border-color: var(--ccdn-primary); text-decoration: none; }
.ccdn-dg-note { margin: 12px 0 0; font-size: 14px; color: var(--ccdn-muted); border-left: 3px solid var(--ccdn-warning); padding-left: 10px; }
.ccdn-disc2 .ccdn-disc-form { margin: 0 0 12px; }
.ccdn-disc2 .ccdn-disc-l { display: block; font-size: 14px; font-weight: 700; color: var(--ccdn-ink); margin-bottom: 6px; }
.ccdn-disc2 .ccdn-disc-inline { display: flex; gap: 8px; }
.ccdn-disc2 .ccdn-input { height: 42px; min-height: 42px; width: 100%; min-width: 0; }
.ccdn-disc2 .ccdn-disc-inline .ccdn-input { flex: 1 1 0; }
.ccdn-disc2 .ccdn-disc-inline .ccdn-disc-y { flex: 1.3 1 0; }
.ccdn-disc2 .ccdn-btn { min-height: 42px; padding: 0 14px; white-space: nowrap; }
.ccdn-disc2 .ccdn-disc-msg { margin: 6px 0 0; font-size: 14px; color: #B91C1C; }
.ccdn-disc2 .ccdn-disc-msg:empty { display: none; }
.ccdn-age-pair { display: block; }
.ccdn-disc2 .ccdn-dg-ex { margin: 2px 0 8px; }
@media (min-width: 560px) and (max-width: 899px) { .ccdn-dg-l-wide, #ccdn-dg-cal .ccdn-dg-l { columns: 2; column-gap: 28px; } }

/* desktop: columns sized by content. Count | Age | (Work over Deadline) in row 1, the calendar list full width in row 2. The two small groups
   share ONE column (each at its natural height) instead of each getting a tall, mostly empty column. */
@media (min-width: 900px) {
  .ccdn-dgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccdn-dg > summary { cursor: default; pointer-events: none; }
  .ccdn-dgs { grid-template-areas: "count age" "work labor" "cal cal" "unit event"; } /* SILO-2: seven groups, in pairs */
  #ccdn-dg-count { grid-area: count; } #ccdn-dg-age { grid-area: age; } #ccdn-dg-work { grid-area: work; } #ccdn-dg-labor { grid-area: labor; } #ccdn-dg-cal { grid-area: cal; } #ccdn-dg-unit { grid-area: unit; } #ccdn-dg-event { grid-area: event; }
  #ccdn-dg-cal .ccdn-dg-l { columns: 3; column-gap: 32px; }
  #ccdn-dg-cal .ccdn-dg-l li { break-inside: avoid; }
}
@media (min-width: 1100px) {
  .ccdn-dgs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "count age work" "count age labor" "cal cal cal" "unit event event"; }
}

@media (max-width: 899px) {
  .ccdn-dg { padding: 0; }
  .ccdn-dg > summary { cursor: pointer; padding: 14px 18px; min-height: 54px; position: relative; padding-right: 46px; }
  .ccdn-dg > summary h3 { margin: 0; }
  .ccdn-dg > summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-size: 22px; font-weight: 700; color: var(--ccdn-primary); line-height: 1.2; }
  .ccdn-dg[open] > summary::after { content: "\2212"; }
  .ccdn-dg > :not(summary) { margin-left: 18px; margin-right: 18px; }
  .ccdn-dg > :last-child { margin-bottom: 18px; }
  .ccdn-dg[open] > summary { padding-bottom: 6px; }
}
.ccdn-dg > summary:focus-visible, .ccdn-save-details > summary:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: -3px; }

/* ---- header dropdowns (desktop) + accordions (phone menu) ---- */
.ccdn-nav-item { position: relative; display: flex; align-items: center; }
.ccdn-nav-item.has-menu > a { padding-right: 4px; }
.ccdn-nav-caret { appearance: none; background: transparent; border: 0; width: 26px; height: 34px; margin-right: 2px; display: inline-flex; align-items: center; justify-content: center; color: var(--ccdn-body); cursor: pointer; border-radius: var(--ccdn-radius-sm); }
.ccdn-nav-caret:hover { background: var(--ccdn-bg); }
.ccdn-nav-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.ccdn-nav-caret:focus-visible, .ccdn-nav-acc:focus-visible, .ccdn-nav-menu a:focus-visible, .ccdn-nav-acc-list a:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: -3px; }
.ccdn-nav-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 250px; margin: 0; padding: 6px 0; list-style: none; background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); box-shadow: 0 8px 20px -10px rgba(15,23,42,.35); }
.ccdn-nav-menu[hidden], .ccdn-nav-acc-list[hidden] { display: none; }
.ccdn-nav-item:nth-last-child(-n+2) .ccdn-nav-menu { left: auto; right: 0; }
.ccdn-nav .ccdn-nav-menu a { display: block; padding: 9px 16px; border-radius: 0; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ccdn-ink); }
.ccdn-nav .ccdn-nav-menu a:hover { background: #EFF4FF; color: var(--ccdn-primary-deep); }
.ccdn-nav-mobile li.has-menu { position: relative; }
.ccdn-nav-acc { position: absolute; right: 0; top: 4px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--ccdn-ink); cursor: pointer; }
.ccdn-nav-acc[aria-expanded="true"] svg { transform: rotate(180deg); }
.ccdn-nav-acc-list { list-style: none; margin: 0; padding: 0 0 6px; }
.ccdn-nav-mobile .ccdn-nav-acc-list a { flex-direction: row; align-items: center; min-height: 46px; padding: 10px 4px 10px 16px; font-weight: 600; font-size: 14px; color: var(--ccdn-primary-deep); }
.ccdn-nav-mobile li.has-menu > a { padding-right: 52px; }

.ccdn-nav-mobile .ccdn-nav-acc-list a { justify-content: flex-start; }

/* 14.1 tuning */
@media (min-width: 900px) { .ccdn-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.ccdn-save-details > summary::before { margin-right: 4px; }
.ccdn-pop-list a { padding-right: 24px; }
.ccdn-pop-list a strong { font-size: 15.5px; }
@media (min-width: 900px) {
  .ccdn-dg { display: flex; flex-direction: column; }
  .ccdn-dg > summary { flex: none; }
  .ccdn-dg > .ccdn-dg-ex:last-child, .ccdn-dg > .ccdn-dg-ex.is-foot { margin-top: auto; padding-top: 12px; }
}
.ccdn-disc2 .ccdn-disc-inline .ccdn-input { padding-left: 8px; padding-right: 6px; font-size: 15px; }
@media (min-width: 1100px) {
  #ccdn-dg-count .ccdn-dg-l li { padding: 12px 0; }
  #ccdn-dg-count .ccdn-dg-ex { margin-top: 16px; }
  #ccdn-dg-count .ccdn-dg-ex + .ccdn-dg-ex { margin-top: 12px; }
  #ccdn-dg-count .ccdn-dg-ex a { padding: 6px 11px; }
}

@media (min-width: 900px) and (max-width: 1199px) { .ccdn-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
@media (min-width: 900px) and (max-width: 1099px) { .ccdn-age-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } }
.ccdn-up-b > a { display: block; padding: 5px 0; min-height: 32px; line-height: 1.25; }
.ccdn-dg-ex a { padding: 7px 11px; line-height: 1.3; }

/* =====================================================================
   Phase 15 — page templates for the calendar families (date / month / year / hub) + shared factory polish.
   Components are ccdn_pg_* (inc/factory/components.php). Same palette and 1100px box as the homepage; one bordered surface per group, no card grid.
   ===================================================================== */
.ccdn-fa .ccdn-page-intro { padding: 14px 0 10px; }
.ccdn-fa .ccdn-page-intro h1 { font-size: 30px; margin-bottom: 0; }
@media (min-width: 768px) { .ccdn-fa .ccdn-page-intro h1 { font-size: 36px; } }
.ccdn-fa .ccdn-fa-sec { margin-top: 26px; }
.ccdn-fa .ccdn-fa-sec h2, .ccdn-pg-box h2 { font-size: 20px; margin: 0 0 10px; }

/* answer (shared by every factory family) */
.ccdn-fa-answer { text-align: left; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); padding: 18px 22px; margin-top: 12px; }
.ccdn-fa-lead { font-size: 17px; font-weight: 600; color: var(--ccdn-ink); }
.ccdn-fa-source { margin: 10px 0 0; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-pg-hero { display: grid; grid-template-columns: 1fr; gap: 10px 36px; align-items: center; }
.ccdn-pg-hero > .ccdn-fa-lead, .ccdn-pg-hero > .ccdn-fa-source, .ccdn-pg-hero > .ccdn-fa-stale { grid-column: 1 / -1; }
.ccdn-pg-hero > .ccdn-fa-lead { color: var(--ccdn-body); font-weight: 600; font-size: 16px; }
.ccdn-pg-big { min-width: 0; }
.ccdn-pg-hero .ccdn-as-weekday { margin: 0; font-size: 16px; font-weight: 800; color: var(--ccdn-primary); text-transform: uppercase; letter-spacing: .06em; }
.ccdn-pg-hero .ccdn-as-date { margin: 2px 0 0; font-size: 52px; font-weight: 800; line-height: 1.05; color: var(--ccdn-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .ccdn-pg-hero:not(.ccdn-pg-hero-month) { grid-template-columns: auto 1fr; } .ccdn-pg-hero .ccdn-as-date { font-size: 64px; } }
.ccdn-pg-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; }
.ccdn-pg-strip li { display: flex; flex-direction: column; padding: 0 16px; border-left: 1px solid var(--ccdn-border); min-width: 0; }
.ccdn-pg-strip li:nth-child(odd) { padding-left: 0; border-left: 0; }
.ccdn-pg-strip span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ccdn-muted); }
.ccdn-pg-strip strong { font-size: 24px; font-weight: 800; color: var(--ccdn-ink); line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ccdn-pg-strip em { font-style: normal; font-size: 13px; color: var(--ccdn-muted); }
@media (min-width: 640px) { .ccdn-pg-strip { grid-template-columns: repeat(4, 1fr); } .ccdn-pg-strip li:nth-child(odd) { padding-left: 16px; border-left: 1px solid var(--ccdn-border); } .ccdn-pg-strip li:first-child { padding-left: 0; border-left: 0; } }
.ccdn-pg-hero-month .ccdn-pg-strip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ccdn-pg-hero-month .ccdn-pg-strip li, .ccdn-pg-hero-month .ccdn-pg-strip li:nth-child(odd) { padding: 0 16px; border-left: 1px solid var(--ccdn-border); }
.ccdn-pg-hero-month .ccdn-pg-strip li:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 639px) { .ccdn-pg-hero-month .ccdn-pg-strip { grid-template-columns: 1fr 1fr; } .ccdn-pg-hero-month .ccdn-pg-strip li:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 479px) { .ccdn-fa-answer { padding: 16px; } .ccdn-pg-hero .ccdn-as-date { font-size: 46px; } .ccdn-pg-strip strong { font-size: 21px; } }

/* previous | current | next */
.ccdn-pg-nav3 { display: grid; grid-template-columns: 1fr 1.15fr 1fr; margin-top: 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; background: var(--ccdn-surface); }
.ccdn-pg-n3 { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 12px 18px; min-height: 76px; color: var(--ccdn-ink); min-width: 0; }
.ccdn-pg-n3 + .ccdn-pg-n3 { border-left: 1px solid var(--ccdn-border); }
.ccdn-pg-n3 span { font-size: 13px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-pg-n3 strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ccdn-pg-n3 em { font-style: normal; font-size: 14px; color: var(--ccdn-body); }
a.ccdn-pg-n3:hover { background: #EFF4FF; text-decoration: none; }
a.ccdn-pg-n3:hover strong { color: var(--ccdn-primary-deep); }
a.ccdn-pg-n3:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: -3px; }
.ccdn-pg-n3.is-cur { background: #F1F5F9; text-align: center; }
.ccdn-pg-n3.is-prev { text-align: left; } .ccdn-pg-n3.is-next { text-align: right; }
.ccdn-pg-n3.is-off { color: var(--ccdn-muted); } .ccdn-pg-n3.is-off strong { color: var(--ccdn-muted); }
@media (max-width: 559px) {
  .ccdn-pg-nav3 { grid-template-columns: 1fr 1fr; }
  .ccdn-pg-n3.is-cur { grid-column: 1 / -1; order: -1; border-bottom: 1px solid var(--ccdn-border); }
  .ccdn-pg-n3.is-prev { border-left: 0; } .ccdn-pg-n3 { padding: 10px 14px; min-height: 68px; } .ccdn-pg-n3 strong { font-size: 18px; }
}
.ccdn-pg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.ccdn-pg-chips-l { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ccdn-muted); margin-right: 2px; }
.ccdn-pg-chips a, .ccdn-pg-chips span:not(.ccdn-pg-chips-l) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); font-size: 14px; font-weight: 600; background: var(--ccdn-surface); }
.ccdn-pg-chips a { color: var(--ccdn-primary-deep); }
.ccdn-pg-chips a:hover { background: #EFF4FF; border-color: var(--ccdn-primary); text-decoration: none; }
.ccdn-pg-chips span:not(.ccdn-pg-chips-l) { color: var(--ccdn-muted); border-style: dashed; background: transparent; }
.ccdn-pg-chips a:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }

/* grouped facts: ONE bordered surface per group, hairlines between the blocks */
.ccdn-pg-cols { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ccdn-border-strong); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; margin: 16px 0 0; }
@media (min-width: 900px) { .ccdn-pg-cols { grid-template-columns: 1fr 1fr; } .ccdn-pg-cols-3 { grid-template-columns: 1fr 1fr 1fr; } .ccdn-pg-cols-1 { grid-template-columns: 1fr; } }
.ccdn-pg-cols > .ccdn-pg-box { background: var(--ccdn-surface); padding: 18px 22px 20px; min-width: 0; }
.ccdn-pg-solo { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); padding: 18px 22px 20px; margin: 16px 0 0; }
.ccdn-pg-dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.ccdn-pg-dl > div { display: grid; grid-template-columns: 1fr; gap: 1px 14px; padding: 8px 0; }
.ccdn-pg-dl > div + div { border-top: 1px solid var(--ccdn-border); }
.ccdn-pg-dl dt { font-size: 14px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-pg-dl dd { margin: 0; font-size: 15px; color: var(--ccdn-ink); line-height: 1.45; }
.ccdn-pg-dl dd strong { font-weight: 800; }
@media (min-width: 640px) { .ccdn-pg-dl > div { grid-template-columns: 10.5rem minmax(0, 1fr); align-items: baseline; } }
@media (min-width: 640px) { .ccdn-pg-solo .ccdn-pg-dl, .ccdn-pg-cols-1 .ccdn-pg-dl { grid-template-columns: 1fr 1fr; column-gap: 40px; } .ccdn-pg-solo .ccdn-pg-dl > div:nth-child(2) { border-top: 0; } }
.ccdn-pg-box .ccdn-fa-note, .ccdn-pg-box .ccdn-fa-plain { margin-top: 12px; }
.ccdn-pg-box .ccdn-fa-plain { font-size: 15px; color: var(--ccdn-body); }
.ccdn-pg-box .ccdn-fa-list { font-size: 15px; padding-left: 18px; }

/* status badge (never colour alone: the label is the message) */
.ccdn-pg-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; border: 1px solid var(--ccdn-border-strong); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ccdn-ink); background: #F1F5F9; }
.ccdn-pg-badge-ok { background: #F0FDF4; border-color: var(--ccdn-success); color: #14532D; }
.ccdn-pg-badge-holiday { background: #FEF2F2; border-color: var(--ccdn-accent); color: #991B1B; }
.ccdn-pg-badge-warn { background: #FFFBEB; border-color: var(--ccdn-warning); color: #92400E; }
.ccdn-pg-badge-rest, .ccdn-pg-badge-info { background: #F1F5F9; border-color: #94A3B8; color: var(--ccdn-ink); }
.ccdn-pg-stl { display: block; margin-top: 4px; font-size: 14px; color: var(--ccdn-body); }

/* position in time */
.ccdn-pg-prog { margin: 0 0 14px; }
.ccdn-pg-prog:last-child { margin-bottom: 0; }
.ccdn-pg-prog-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ccdn-ink); }
.ccdn-pg-prog-h span { font-weight: 700; } .ccdn-pg-prog-h strong { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.ccdn-pg-bar { height: 10px; border-radius: 5px; background: var(--ccdn-border); margin: 6px 0 4px; overflow: hidden; }
.ccdn-pg-bar i { display: block; height: 100%; background: var(--ccdn-primary); border-radius: 5px; }
.ccdn-pg-prog p { margin: 0; font-size: 14px; color: var(--ccdn-muted); }

/* contextual calculations */
.ccdn-pg-actions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ccdn-border-strong); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; }
@media (min-width: 720px) { .ccdn-pg-actions { grid-template-columns: 1fr 1fr; } }
.ccdn-pg-actions li { background: var(--ccdn-surface); }
.ccdn-pg-actions a { display: flex; flex-direction: column; gap: 2px; padding: 14px 44px 14px 18px; position: relative; color: var(--ccdn-ink); min-height: 68px; justify-content: center; }
.ccdn-pg-actions a::after { content: "\2192"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--ccdn-primary); font-weight: 800; }
.ccdn-pg-actions a:hover { background: #EFF4FF; text-decoration: none; }
.ccdn-pg-actions strong { font-size: 16px; } .ccdn-pg-actions span { font-size: 14px; color: var(--ccdn-muted); line-height: 1.4; }
.ccdn-pg-actions a:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: -3px; }

/* month calendar: the primary object of a month page */
.ccdn-pg-calsec { margin-top: 20px; }
.ccdn-mcal-wrap { border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; background: var(--ccdn-surface); }
.ccdn-mcal { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.ccdn-mcal thead th { background: #F1F5F9; color: var(--ccdn-ink); font-size: 14px; font-weight: 800; padding: 10px 0; border-bottom: 1px solid var(--ccdn-border-strong); }
.ccdn-mcal thead th.is-we { background: #E8EEF6; }
.ccdn-mcal th.ccdn-mcal-w { width: 64px; background: var(--ccdn-bg); color: var(--ccdn-muted); font-size: 13px; font-weight: 700; }
.ccdn-mcal tbody th.ccdn-mcal-w { border-top: 1px solid var(--ccdn-border); border-right: 1px solid var(--ccdn-border); vertical-align: middle; }
.ccdn-mcal td { height: 96px; padding: 0; vertical-align: top; border-top: 1px solid var(--ccdn-border); border-left: 1px solid var(--ccdn-border); position: relative; }
.ccdn-mcal tbody th + td { border-left: 0; }
.ccdn-mcal td.is-we { background: #F8FAFC; }
.ccdn-mcal td.ccdn-mcal-x { background: #F8FAFC; }
.ccdn-mcal-n { display: flex; flex-direction: column; height: 100%; min-height: 56px; padding: 8px 10px 6px; color: var(--ccdn-ink); text-decoration: none; }
a.ccdn-mcal-n:hover { background: #EFF4FF; text-decoration: none; }
a.ccdn-mcal-n:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: -3px; }
.ccdn-mcal-n b { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--ccdn-ink); align-self: flex-start; min-width: 30px; text-align: center; border-radius: 15px; padding: 2px 4px; }
.ccdn-mcal td.is-we .ccdn-mcal-n b { color: var(--ccdn-muted); }
.ccdn-mcal-n small { margin-top: auto; align-self: flex-end; font-size: 13px; font-weight: 600; color: var(--ccdn-muted); }
.ccdn-mcal td.is-lfirst small { color: var(--ccdn-ink); font-weight: 800; }
.ccdn-mcal-n em { display: none; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1.25; color: #991B1B; margin-top: 2px; }
@media (min-width: 1100px) { .ccdn-mcal-n em { display: block; } }
.ccdn-mcal td.is-hol { background: #FEF2F2; box-shadow: inset 0 -3px 0 var(--ccdn-accent); }
.ccdn-mcal td.is-hol .ccdn-mcal-n b { color: #991B1B; }
.ccdn-mcal td.is-holu { background: #FFFBEB; box-shadow: inset 0 -3px 0 var(--ccdn-warning); }
.ccdn-mcal td.is-mk { background: #F0FDF4; box-shadow: inset 0 -3px 0 var(--ccdn-success); }
.ccdn-mcal td.is-today { outline: 2px solid var(--ccdn-primary); outline-offset: -2px; }
.ccdn-mcal td.is-today .ccdn-mcal-n b { background: var(--ccdn-primary); color: #fff; }
.ccdn-mcal-wrap.is-small .ccdn-mcal td { height: 58px; }
.ccdn-mcal-wrap.is-small .ccdn-mcal-n { min-height: 0; align-items: center; justify-content: center; padding: 4px; }
.ccdn-mcal-wrap.is-small .ccdn-mcal-n b { font-size: 18px; align-self: center; }
.ccdn-mcal-wrap.is-small .ccdn-mcal-n small, .ccdn-mcal-wrap.is-small .ccdn-mcal-n em { display: none; }
@media (max-width: 599px) {
  .ccdn-mcal td { height: 58px; } .ccdn-mcal-n { padding: 4px 2px; align-items: center; justify-content: center; min-height: 44px; }
  .ccdn-mcal-n b { font-size: 18px; align-self: center; min-width: 28px; } .ccdn-mcal-n small { display: none; }
  .ccdn-mcal th.ccdn-mcal-w { width: 34px; font-size: 12px; } .ccdn-mcal thead th { font-size: 13px; padding: 8px 0; }
}
.ccdn-pg-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ccdn-body); }
.ccdn-pg-legend li { display: flex; align-items: center; gap: 6px; }
.ccdn-pg-legend .k { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--ccdn-border-strong); border-radius: 3px; background: var(--ccdn-surface); flex: none; }
.ccdn-pg-legend .k-today { border: 2px solid var(--ccdn-primary); } .ccdn-pg-legend .k-we { background: #E8EEF6; }
.ccdn-pg-legend .k-hol { background: #FEF2F2; box-shadow: inset 0 -3px 0 var(--ccdn-accent); } .ccdn-pg-legend .k-holu { background: #FFFBEB; box-shadow: inset 0 -3px 0 var(--ccdn-warning); } .ccdn-pg-legend .k-mk { background: #F0FDF4; box-shadow: inset 0 -3px 0 var(--ccdn-success); }
.ccdn-pg-hint { margin: 10px 0 0; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-pg-hint a { font-weight: 700; }

/* lunar months of a Gregorian month */
.ccdn-pg-segbar { display: flex; height: 36px; border: 1px solid var(--ccdn-border-strong); border-radius: 6px; overflow: hidden; }
.ccdn-pg-seg { display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ccdn-ink); min-width: 0; }
.ccdn-pg-seg-0 { background: #DBEAFE; } .ccdn-pg-seg-1 { background: #BFD3F9; }
.ccdn-pg-seg + .ccdn-pg-seg { border-left: 2px solid var(--ccdn-surface); }
.ccdn-pg-seglist { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15px; color: var(--ccdn-ink); }
.ccdn-pg-seglist li { padding: 6px 0; } .ccdn-pg-seglist li + li { border-top: 1px solid var(--ccdn-border); }
.ccdn-pg-seglist span { color: var(--ccdn-muted); }

/* year page: twelve small months */
.ccdn-pg-minis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (min-width: 640px) { .ccdn-pg-minis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ccdn-pg-minis { grid-template-columns: repeat(4, 1fr); } }
.ccdn-pg-minis > li { border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: var(--ccdn-surface); padding: 12px 12px 10px; min-width: 0; }
.ccdn-pg-mini-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.ccdn-pg-mini-h a, .ccdn-pg-mini-h > span:first-child { font-size: 16px; font-weight: 800; }
.ccdn-pg-mini-h > span:last-child { font-size: 13px; color: var(--ccdn-muted); }
.ccdn-pg-mini { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.ccdn-pg-mini b { font-size: 12px; color: var(--ccdn-muted); padding-bottom: 2px; } .ccdn-pg-mini i { font-style: normal; padding: 2px 0; color: var(--ccdn-ink); }
.ccdn-pg-mini .is-we { color: var(--ccdn-muted); }

/* hub: lookup + browse */
.ccdn-pg-lookup label { display: block; font-size: 15px; font-weight: 700; color: var(--ccdn-ink); margin-bottom: 6px; }
.ccdn-pg-lookup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ccdn-pg-lookup input[type="date"] { height: 48px; min-width: 220px; flex: 0 1 280px; padding: 0 12px; font: inherit; font-size: 17px; color: var(--ccdn-ink); background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); }
.ccdn-pg-lookup input[type="date"]:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 1px; }
.ccdn-pg-lookup .ccdn-btn { min-height: 48px; padding: 0 24px; }
.ccdn-pg-result { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ccdn-border); }
.ccdn-pg-bm { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--ccdn-border); }
.ccdn-pg-bm-y a, .ccdn-pg-bm-y { font-weight: 800; font-size: 15px; }
.ccdn-pg-bm-m { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (min-width: 560px) { .ccdn-pg-bm-m { grid-template-columns: repeat(12, 1fr); } }
.ccdn-pg-bm-m a, .ccdn-pg-bm-m span { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); font-weight: 700; font-size: 15px; background: var(--ccdn-surface); color: var(--ccdn-primary-deep); }
.ccdn-pg-bm-m a:hover { background: #EFF4FF; border-color: var(--ccdn-primary); text-decoration: none; }
.ccdn-pg-bm-m span { color: var(--ccdn-muted); border-style: dashed; background: transparent; }
@media (min-width: 1000px) { .ccdn-pg-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; } .ccdn-pg-split > .ccdn-pg-sec { margin-top: 26px; } .ccdn-pg-bm { grid-template-columns: 70px 1fr; } .ccdn-pg-bm-m { grid-template-columns: repeat(6, 1fr); } }

/* shared factory polish: related links as chips, calmer tables, readable method text */
.ccdn-fa-tools, .ccdn-fa-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ccdn-fa-tools li { border: 0; }
.ccdn-fa-tools a, .ccdn-fa-inline a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); font-weight: 600; font-size: 15px; color: var(--ccdn-primary-deep); }
.ccdn-fa-tools a:hover, .ccdn-fa-inline a:hover { background: #EFF4FF; border-color: var(--ccdn-primary); text-decoration: none; }
.ccdn-fa-lab { margin: 12px 0 6px; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-fa-method { padding-top: 6px; border-top: 1px solid var(--ccdn-border-strong); margin-top: 32px; }
.ccdn-fa-method p { font-size: 15px; line-height: 1.6; color: var(--ccdn-body); max-width: 860px; }
.ccdn-fa-table th, .ccdn-fa-table td { font-size: 15px; padding-top: 9px; padding-bottom: 9px; }
.ccdn-fa-table tbody th { color: var(--ccdn-muted); font-weight: 700; }
.ccdn-fa-table td { font-weight: 600; color: var(--ccdn-ink); }

.ccdn-pg-cols > .ccdn-pg-stack { background: var(--ccdn-surface); display: flex; flex-direction: column; min-width: 0; }
.ccdn-pg-stack > .ccdn-pg-box { padding: 18px 22px 20px; } .ccdn-pg-stack > .ccdn-pg-box + .ccdn-pg-box { border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-pg-progs { display: grid; grid-template-columns: 1fr; gap: 0 40px; }
@media (min-width: 720px) { .ccdn-pg-progs { grid-template-columns: 1fr 1fr; } }
.ccdn-pg-lookupbox #ccdn-cr-days { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ccdn-border); }
.ccdn-pg-lookupbox .ccdn-pg-chips-l { margin: 0; }
.ccdn-pg-lookupbox .ccdn-pg-chips { margin-top: 8px; }
.ccdn-pg-strip strong { white-space: nowrap; }

/* Phase 15 — dedicated tool pages: timeline + calendars under the result */
.ccdn-tool-viz { margin-top: 20px; }
.ccdn-tool-viz[hidden] { display: none; }
.ccdn-tool-viz h2 { font-size: 20px; margin: 0 0 4px; }

/* Phase 15 — dedicated tool pages: tighter rhythm below the tool, related-link rows instead of prose paragraphs */
.ccdn-tp .ccdn-section { padding: 22px 0 0; }
.ccdn-tp .ccdn-section h2 { font-size: 24px; margin-bottom: 8px; }
.ccdn-tp .ccdn-section p { max-width: 860px; }
.ccdn-pg-fam { border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-pg-fam-r { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--ccdn-border); }
@media (min-width: 760px) { .ccdn-pg-fam-r { grid-template-columns: 190px 1fr; align-items: baseline; } }
.ccdn-pg-fam-l { font-size: 14px; font-weight: 800; color: var(--ccdn-ink); }
.ccdn-pg-fam-c { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.ccdn-pg-fam-c a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 11px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); font-size: 14px; font-weight: 600; color: var(--ccdn-primary-deep); }
.ccdn-pg-fam-c a:hover { background: #EFF4FF; border-color: var(--ccdn-primary); text-decoration: none; }

/* Phase 15 — shared factory facts (offset / age / date families): definition grid under a hairline, calm and dense */
.ccdn-pg-fsec { border-top: 1px solid var(--ccdn-border-strong); padding-top: 14px; margin-top: 24px; }
.ccdn-pg-fsec h2 { margin-bottom: 4px; }
@media (min-width: 900px) { .ccdn-pg-fsec .ccdn-pg-dl { grid-template-columns: 1fr 1fr; column-gap: 48px; } .ccdn-pg-fsec .ccdn-pg-dl > div:nth-child(2) { border-top: 0; } }
.ccdn-pg-fsec .ccdn-pg-dl > div:first-child { padding-top: 6px; }
/* age tool: the form is a bordered tool panel, not loose fields */
#ccdn-at-tool { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); padding: 18px 22px 8px; margin-top: 16px; }
#ccdn-at-tool h2 { margin-bottom: 12px; }
.ccdn-at-form .ccdn-input { height: 46px; }
.ccdn-at-actions .ccdn-btn { min-height: 46px; }
#ccdn-fa-lookup .ccdn-fa-hubform { justify-content: flex-start; }
.ccdn-fa-sec table.ccdn-fa-grid { font-size: 15px; }
.ccdn-fa-grid thead th { color: var(--ccdn-muted); }
.ccdn-mcal th.ccdn-mcal-w small { display: block; font-size: 11px; font-weight: 600; }
.ccdn-pg-mini-h a { display: inline-flex; align-items: center; min-height: 36px; }

/* =====================================================================
   Phase 16A — age family (birth-year, reverse age, age hubs / tools).  Components: inc/factory/components-age.php
   ===================================================================== */
/* shared hero strip: never let a long value escape its column (fixes the reverse-age overflow for good) */
.ccdn-pg-strip li { min-width: 0; }
.ccdn-pg-strip strong { white-space: normal; overflow-wrap: anywhere; }

.ccdn-age-hero { padding: 20px 24px 18px; }
.ccdn-age-eyebrow { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-primary); }
.ccdn-age-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 8px; }
.ccdn-age-n { font-size: 76px; font-weight: 800; line-height: 1; color: var(--ccdn-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ccdn-age-u { font-size: 20px; font-weight: 700; color: var(--ccdn-body); }
.ccdn-age-hero .ccdn-fa-lead { font-size: 17px; max-width: 840px; margin: 0 0 14px; color: var(--ccdn-ink); }
.ccdn-age-hero .ccdn-pg-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 0; padding-top: 14px; border-top: 1px solid var(--ccdn-border); margin: 0; }
.ccdn-age-hero .ccdn-pg-strip li, .ccdn-age-hero .ccdn-pg-strip li:nth-child(odd) { padding: 0 16px; border-left: 1px solid var(--ccdn-border); }
.ccdn-age-hero .ccdn-pg-strip li:first-child { padding-left: 0; border-left: 0; }
.ccdn-age-hero .ccdn-pg-strip strong { font-size: 24px; }
@media (max-width: 639px) {
  .ccdn-age-hero .ccdn-pg-strip { grid-template-columns: 1fr 1fr; }
  .ccdn-age-hero .ccdn-pg-strip li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 479px) { .ccdn-age-hero { padding: 16px; } .ccdn-age-n { font-size: 60px; } .ccdn-age-u { font-size: 17px; } .ccdn-age-hero .ccdn-pg-strip strong { font-size: 21px; } }

/* reverse age: two answers side by side */
.ccdn-age-hero-rev .ccdn-age-eyebrow { margin-bottom: 4px; }
.ccdn-age-answers { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 6px 0 12px; }
@media (min-width: 640px) { .ccdn-age-answers { grid-template-columns: 1fr 1fr; } .ccdn-age-answers.is-one { grid-template-columns: 1fr; max-width: 520px; } }
.ccdn-age-ans { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 18px 14px; background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-left: 5px solid var(--ccdn-primary); border-radius: var(--ccdn-radius-sm); }
.ccdn-age-ans:nth-child(2) { border-left-color: #93B4F5; }
.ccdn-age-ans-l { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ccdn-muted); }
.ccdn-age-ans-n { font-size: 56px; font-weight: 800; line-height: 1.05; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-age-ans-r { font-size: 15px; color: var(--ccdn-ink); }
.ccdn-age-ans-s { font-size: 14px; color: var(--ccdn-muted); }
.ccdn-age-ans-a { margin-top: 6px; display: inline-flex; align-items: center; min-height: 36px; font-weight: 700; font-size: 15px; }

/* explanation + split bar */
.ccdn-age-why p { max-width: 840px; margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--ccdn-body); }
.ccdn-age-split { margin: 14px 0 6px; }
.ccdn-age-bar { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; }
.ccdn-age-seg { display: block; min-width: 6px; }
.ccdn-age-seg-0 { background: var(--ccdn-primary); } .ccdn-age-seg-1 { background: #93B4F5; }
.ccdn-age-legend { display: grid; grid-template-columns: 1fr; gap: 10px 28px; margin-top: 10px; }
@media (min-width: 640px) { .ccdn-age-legend { grid-template-columns: 1fr 1fr; } }
.ccdn-age-legend-i { padding-left: 12px; border-left: 4px solid; min-width: 0; }
.ccdn-age-legend-0 { border-color: var(--ccdn-primary); } .ccdn-age-legend-1 { border-color: #93B4F5; }
.ccdn-age-legend-i strong { display: block; font-size: 24px; font-weight: 800; color: var(--ccdn-ink); line-height: 1.2; }
.ccdn-age-legend-i span { font-size: 14px; color: var(--ccdn-body); }
.ccdn-age-note { margin: 8px 0 0; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-age-more { margin-top: 12px; }
.ccdn-age-more > summary { cursor: pointer; font-weight: 700; color: var(--ccdn-primary); min-height: 40px; display: flex; align-items: center; }
.ccdn-age-more > summary:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-age-more[open] > summary { margin-bottom: 6px; }

/* inline exact-age calculator */
.ccdn-age-calc h2 { margin-bottom: 8px; }
.ccdn-ia-fields { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 0 10px; align-items: end; }
.ccdn-ia-fields .ccdn-field { margin-bottom: 0; }
.ccdn-ia-fields .ccdn-input { height: 46px; }
.ccdn-ia-fields .ccdn-btn { min-height: 46px; padding: 0 20px; }
@media (max-width: 639px) { .ccdn-ia-fields { grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; } .ccdn-ia-fields .ccdn-btn { grid-column: 1 / -1; } }
.ccdn-ia-out { margin-top: 12px; }
.ccdn-ia-out:empty { display: none; }
.ccdn-ia-brief { margin: 0; padding: 10px 14px; border-left: 4px solid var(--ccdn-primary); background: var(--ccdn-bg); font-size: 16px; color: var(--ccdn-ink); }
.ccdn-ia-brief strong { font-weight: 800; }
.ccdn-ia-brief a { font-weight: 700; margin-left: 6px; }

/* age across years */
.ccdn-age-years { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.ccdn-age-years li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px 12px; background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); }
.ccdn-age-y { font-size: 14px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-age-y b { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--ccdn-primary); margin-left: 2px; }
.ccdn-age-years strong { font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-age-years strong small { font-size: 14px; font-weight: 700; color: var(--ccdn-body); }
.ccdn-age-ys { font-size: 14px; color: var(--ccdn-muted); }
.ccdn-age-years li.is-now { background: #EFF4FF; border-color: var(--ccdn-primary); box-shadow: inset 0 3px 0 var(--ccdn-primary); }

/* milestone timeline: filled grey = past, ring + halo = next, hollow blue = later (text states it too) */
.ccdn-age-tl { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.ccdn-age-tl li { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 26px 10px 4px 0; }
.ccdn-age-tl li::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: var(--ccdn-border-strong); }
.ccdn-age-tl li::after { content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; box-sizing: border-box; border-radius: 50%; background: var(--ccdn-surface); border: 3px solid var(--ccdn-primary); }
.ccdn-age-tl li.is-past::before { background: #94A3B8; } .ccdn-age-tl li.is-past::after { background: #94A3B8; border-color: #94A3B8; }
.ccdn-age-tl li.is-now::after { background: var(--ccdn-ink); border-color: var(--ccdn-ink); border-radius: 3px; }
.ccdn-age-tl li.is-next::after { background: var(--ccdn-primary); box-shadow: 0 0 0 4px #DBEAFE; }
.ccdn-age-tl-n { font-size: 28px; font-weight: 800; color: var(--ccdn-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ccdn-age-tl-n small { font-size: 14px; font-weight: 700; color: var(--ccdn-body); }
.ccdn-age-tl b { font-size: 15px; color: var(--ccdn-ink); }
.ccdn-age-tl em { font-style: normal; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-age-tl li.is-next em, .ccdn-age-tl li.is-now em { color: var(--ccdn-primary-deep); font-weight: 700; }
@media (max-width: 560px) { .ccdn-age-tl { grid-template-columns: 1fr 1fr; } .ccdn-age-tl-n { font-size: 24px; } .ccdn-age-years { grid-template-columns: repeat(3, 1fr); gap: 6px; } .ccdn-age-years li { padding: 8px 10px 10px; } .ccdn-age-years strong { font-size: 28px; } }
}

/* task row, workbench panels, popular rows */
.ccdn-age-tasks { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.ccdn-age-tasks a, .ccdn-age-tasks span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); font-size: 14px; font-weight: 700; background: var(--ccdn-surface); }
.ccdn-age-tasks a { color: var(--ccdn-primary-deep); } .ccdn-age-tasks a:hover { background: #EFF4FF; border-color: var(--ccdn-primary); text-decoration: none; }
.ccdn-age-tasks span[aria-current] { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-age-wb { margin-top: 14px; }
.ccdn-age-panel { padding: 18px 16px 20px; }
@media (min-width: 640px) { .ccdn-age-panel { padding: 22px 24px 24px; } }
.ccdn-age-panel + .ccdn-age-panel { border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-js .ccdn-age-wb:not(.ccdn-age-single) .ccdn-age-panel:not(.is-on) { display: none; }
.ccdn-age-ph { font-size: 20px; margin: 0 0 8px; }
.ccdn-js .ccdn-age-wb:not(.ccdn-age-single) .ccdn-age-ph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html:not(.ccdn-js) .ccdn-age-tabs { display: none; }
.ccdn-age-single .ccdn-age-panel { padding: 18px 20px 18px; }
.ccdn-age-pd { margin: 0 0 10px; font-size: 15px; color: var(--ccdn-body); }
.ccdn-age-today { margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--ccdn-primary); font-size: 15px; color: var(--ccdn-body); }
.ccdn-age-panel #ccdn-at-tool { background: none; border: 0; padding: 0; margin: 0; border-radius: 0; }
.ccdn-age-panel #ccdn-at-tool h2 { font-size: 17px; }
.ccdn-age-panel .ccdn-at-form .ccdn-field { margin-bottom: 10px; }
.ccdn-age-qform { justify-content: flex-start !important; margin: 4px 0 0; }
.ccdn-age-qform input { height: 46px; width: 150px; }
.ccdn-age-qform .ccdn-btn { min-height: 46px; padding: 0 22px; }
.ccdn-age-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ccdn-border-strong); }
@media (min-width: 640px) { .ccdn-age-rows { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (min-width: 1000px) { .ccdn-age-rows { grid-template-columns: 1fr 1fr 1fr; } }
.ccdn-age-rows li { border-bottom: 1px solid var(--ccdn-border); }
.ccdn-age-rows a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 2px; min-height: 46px; color: var(--ccdn-ink); }
.ccdn-age-rows a:hover { background: #F1F5F9; text-decoration: none; }
.ccdn-age-rows strong { font-size: 16px; color: var(--ccdn-primary-deep); } .ccdn-age-rows span { font-size: 14px; color: var(--ccdn-muted); text-align: right; }
.ccdn-age-rows a:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: -3px; }

/* tables that stay tables: rows become labelled blocks on phones instead of squeezed columns */
@media (max-width: 560px) {
  .ccdn-fa-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-fa-stack tr { display: block; padding: 8px 0; border-top: 1px solid var(--ccdn-border); }
  .ccdn-fa-stack th[scope="row"] { display: block; padding: 2px 0 4px; font-size: 16px; border: 0; width: auto; }
  .ccdn-fa-stack td { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; border: 0; text-align: right; font-size: 15px; }
  .ccdn-fa-stack td::before { content: attr(data-label); font-weight: 700; color: var(--ccdn-muted); text-align: left; flex: none; }
}
.ccdn-age-rows strong { white-space: nowrap; }
.ccdn-age-panel #ccdn-at-out + #ccdn-at-tool { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ccdn-border-strong); }
#ccdn-at-out + #ccdn-at-tool { margin-top: 20px; }

/* =====================================================================
   Phase 16B — offset family (N ngày/tuần/tháng/năm nữa/trước).  Components: inc/factory/components-offset.php
   ===================================================================== */
.ccdn-of-hero { padding: 18px 24px 16px; text-align: left; }
.ccdn-of-kick { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-primary); }
.ccdn-of-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; margin: 2px 0 14px; }
.ccdn-of-wd { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--ccdn-ink); text-transform: uppercase; letter-spacing: .01em; }
.ccdn-of-date { font-size: 64px; font-weight: 800; line-height: 1.02; color: var(--ccdn-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .ccdn-of-date { font-size: 52px; } .ccdn-of-wd { font-size: 24px; } }
@media (max-width: 479px) { .ccdn-of-hero { padding: 16px; } .ccdn-of-date { font-size: 46px; } }
/* today -> target rail */
.ccdn-of-rail { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; gap: 0 12px; padding: 12px 0 14px; border-top: 1px solid var(--ccdn-border); }
.ccdn-of-node { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ccdn-of-node span { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-of-node strong { font-size: 22px; font-weight: 800; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ccdn-of-node em { font-style: normal; font-size: 14px; color: var(--ccdn-body); }
.ccdn-of-node.is-target strong { color: var(--ccdn-primary); }
.ccdn-of-node:last-child { text-align: right; }
.ccdn-of-span { position: relative; height: 34px; min-width: 0; }
.ccdn-of-span::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--ccdn-primary); border-radius: 2px; }
.ccdn-of-span::after { content: ""; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-top: 3px solid var(--ccdn-primary); border-right: 3px solid var(--ccdn-primary); }
.ccdn-of-rail.is-fw .ccdn-of-span::after { right: 0; transform: rotate(45deg); }
.ccdn-of-rail.is-bw .ccdn-of-span::after { left: 0; transform: rotate(-135deg); }
.ccdn-of-len { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 8px; background: #fff; font-size: 14px; font-weight: 800; color: var(--ccdn-primary-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ccdn-of-hero .ccdn-pg-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 0; margin: 0; padding-top: 12px; border-top: 1px solid var(--ccdn-border); }
.ccdn-of-hero .ccdn-pg-strip li, .ccdn-of-hero .ccdn-pg-strip li:nth-child(odd) { padding: 0 16px; border-left: 1px solid var(--ccdn-border); }
.ccdn-of-hero .ccdn-pg-strip li:first-child { padding-left: 0; border-left: 0; }
.ccdn-of-hero .ccdn-pg-strip strong { font-size: 20px; overflow-wrap: anywhere; white-space: normal; }
.ccdn-of-hero .ccdn-fa-source { margin: 10px 0 0; font-size: 14px; color: var(--ccdn-muted); }
@media (max-width: 639px) {
  .ccdn-of-rail { grid-template-columns: 1fr; gap: 0; padding: 10px 0 12px; }
  .ccdn-of-node, .ccdn-of-node:last-child { text-align: left; }
  .ccdn-of-span { height: 54px; margin-left: 6px; }
  .ccdn-of-span::before { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; margin: 0; }
  .ccdn-of-span::after { left: -4px; margin-top: 0; }
  .ccdn-of-rail.is-fw .ccdn-of-span::after { top: auto; bottom: 0; right: auto; transform: rotate(135deg); }
  .ccdn-of-rail.is-bw .ccdn-of-span::after { top: 0; bottom: auto; transform: rotate(-45deg); }
  .ccdn-of-len { left: 14px; top: 50%; transform: translateY(-50%); padding: 0 6px 0 0; }
  .ccdn-of-hero .ccdn-pg-strip { grid-template-columns: 1fr 1fr; }
  .ccdn-of-hero .ccdn-pg-strip li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
/* change-the-number */
.ccdn-of-calc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); }
.ccdn-of-q { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--ccdn-ink); margin: 0; }
.ccdn-of-q input { width: 96px; height: 44px; padding: 0 10px; font: inherit; font-size: 20px; font-weight: 800; text-align: center; color: var(--ccdn-ink); background: #fff; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); font-variant-numeric: tabular-nums; }
.ccdn-of-q input:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 1px; }
.ccdn-of-calc .ccdn-btn { min-height: 44px; padding: 0 22px; }
.ccdn-of-msg { flex: 1 0 100%; margin: 0; font-size: 14px; color: var(--ccdn-body); }
.ccdn-of-msg:empty { display: none; }
/* sections */
.ccdn-of-sec { margin: 22px 0 0; }
.ccdn-of-sec > h2 { font-size: 21px; margin: 0 0 10px; }
.ccdn-of-sec > p { max-width: 840px; margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--ccdn-body); }
.ccdn-of-note { color: var(--ccdn-body); }
.ccdn-of-grps { display: grid; grid-template-columns: 1fr; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); }
@media (min-width: 900px) { .ccdn-of-grps { grid-template-columns: 1.15fr 1fr 1fr; } .ccdn-of-grp + .ccdn-of-grp { border-left: 1px solid var(--ccdn-border); border-top: 0; } }
.ccdn-of-grp { padding: 14px 18px 14px; min-width: 0; }
.ccdn-of-grp + .ccdn-of-grp { border-top: 1px solid var(--ccdn-border); }
.ccdn-of-grp h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-primary-deep); }
.ccdn-of-dl { margin: 0; }
.ccdn-of-dl > div { display: grid; grid-template-columns: 104px 1fr; gap: 0 10px; padding: 4px 0; font-size: 15px; line-height: 1.45; }
.ccdn-of-dl dt { font-weight: 700; color: var(--ccdn-muted); } .ccdn-of-dl dd { margin: 0; color: var(--ccdn-ink); min-width: 0; overflow-wrap: anywhere; }
.ccdn-of-warn { margin: 8px 0 0; font-size: 14px; }
.ccdn-of-more { margin-top: 12px; }
.ccdn-of-more > summary { cursor: pointer; font-weight: 700; color: var(--ccdn-primary); min-height: 40px; display: flex; align-items: center; }
.ccdn-of-more > summary:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-of-more[open] > summary { margin-bottom: 6px; }
.ccdn-of-more .ccdn-fa-sec { margin: 0; } .ccdn-of-more .ccdn-fa-sec > h2 { display: none; }
.ccdn-of-ctx .ccdn-pg-chips { margin-top: 12px; }
/* bar */
.ccdn-of-bar { display: flex; gap: 2px; height: 16px; border-radius: 4px; overflow: hidden; margin: 6px 0 0; }
.ccdn-of-seg { display: block; min-width: 6px; }
.ccdn-of-seg-0 { background: var(--ccdn-primary); } .ccdn-of-seg-1 { background: #93B4F5; } .ccdn-of-seg-2 { background: var(--ccdn-warning); } .ccdn-of-seg-3 { background: #64748B; }
.ccdn-of-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 24px; margin: 10px 0 0; }
.ccdn-of-leg { padding-left: 12px; border-left: 4px solid; min-width: 0; }
.ccdn-of-leg-0 { border-color: var(--ccdn-primary); } .ccdn-of-leg-1 { border-color: #93B4F5; } .ccdn-of-leg-2 { border-color: var(--ccdn-warning); } .ccdn-of-leg-3 { border-color: #64748B; }
.ccdn-of-leg strong { display: block; font-size: 22px; line-height: 1.2; color: var(--ccdn-ink); } .ccdn-of-leg span { font-size: 14px; color: var(--ccdn-body); }
.ccdn-of-sum { font-weight: 600; color: var(--ccdn-ink) !important; }
.ccdn-of-hl { margin: 14px 0 6px !important; font-weight: 700; color: var(--ccdn-ink) !important; }
.ccdn-of-none { font-weight: 400; color: var(--ccdn-body) !important; }
.ccdn-of-hlist { margin: 0 0 8px; padding-left: 20px; font-size: 15px; line-height: 1.55; color: var(--ccdn-ink); }
.ccdn-of-ok { margin: 6px 0 0 !important; font-size: 14px !important; color: var(--ccdn-muted) !important; }
.ccdn-of-foot { margin: 14px 0 0 !important; font-size: 15px !important; }
/* steps */
.ccdn-of-steps { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); }
.ccdn-of-steps li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 0; }
.ccdn-of-steps li + li { border-left: 1px solid var(--ccdn-border); }
.ccdn-of-steps li + li::before { content: "→"; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; line-height: 19px; text-align: center; background: var(--ccdn-surface); border-radius: 50%; font-weight: 800; color: var(--ccdn-primary); }
.ccdn-of-steps span { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-of-steps strong { font-size: 20px; line-height: 1.25; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-of-steps em { font-style: normal; font-size: 14px; color: var(--ccdn-body); }
.ccdn-of-steps li.is-ok { box-shadow: inset 0 3px 0 var(--ccdn-success); } .ccdn-of-steps li.is-warn { box-shadow: inset 0 3px 0 var(--ccdn-warning); }
.ccdn-of-steps li.is-ok em { color: #166534; font-weight: 700; } .ccdn-of-steps li.is-warn em { color: #92400E; font-weight: 700; }
@media (max-width: 639px) { .ccdn-of-steps { grid-template-columns: 1fr; } .ccdn-of-steps li + li { border-left: 0; border-top: 1px solid var(--ccdn-border); } .ccdn-of-steps li + li::before { content: "↓"; left: 50%; top: -10px; transform: translateX(-50%); } }
/* week row */
.ccdn-of-week { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 560px; }
.ccdn-of-week li { display: flex; flex-direction: column; align-items: center; padding: 6px 2px 7px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); min-height: 62px; }
.ccdn-of-week span { font-size: 12px; font-weight: 800; color: var(--ccdn-muted); } .ccdn-of-week strong { font-size: 20px; line-height: 1.25; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-of-week em { font-style: normal; font-size: 12px; font-weight: 800; text-transform: uppercase; color: inherit; }
.ccdn-of-week li.is-target, .ccdn-of-week li.is-both { background: var(--ccdn-primary); border-color: var(--ccdn-primary); } .ccdn-of-week li.is-target span, .ccdn-of-week li.is-target strong, .ccdn-of-week li.is-target em, .ccdn-of-week li.is-both span, .ccdn-of-week li.is-both strong, .ccdn-of-week li.is-both em { color: #fff; }
.ccdn-of-week li.is-today { border: 2px solid var(--ccdn-primary); } .ccdn-of-week li.is-today em { color: var(--ccdn-primary-deep); }
/* compare + nearby rows */
.ccdn-of-cmp { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-of-cmp li { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 2px 18px; padding: 9px 2px; border-bottom: 1px solid var(--ccdn-border); }
.ccdn-of-cmp strong { font-size: 16px; color: var(--ccdn-ink); } .ccdn-of-cmp span { font-size: 15px; color: var(--ccdn-ink); } .ccdn-of-cmp small { grid-column: 2; font-size: 14px; color: var(--ccdn-muted); }
@media (max-width: 559px) { .ccdn-of-cmp li { grid-template-columns: 1fr; } .ccdn-of-cmp small { grid-column: 1; } }
.ccdn-of-rev { margin: 0 0 10px !important; font-size: 16px !important; color: var(--ccdn-ink) !important; }
.ccdn-of-rev span { color: var(--ccdn-muted); font-weight: 700; } .ccdn-of-rev a { font-weight: 700; } .ccdn-of-rev em { font-style: normal; color: var(--ccdn-body); font-weight: 400; }
.ccdn-of-rows { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ccdn-border-strong); }
@media (min-width: 640px) { .ccdn-of-rows { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (min-width: 1000px) { .ccdn-of-rows { grid-template-columns: 1fr 1fr 1fr; } }
.ccdn-of-rows li { border-bottom: 1px solid var(--ccdn-border); }
.ccdn-of-rows a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 2px; min-height: 46px; color: var(--ccdn-ink); }
.ccdn-of-rows a:hover { background: #F1F5F9; text-decoration: none; } .ccdn-of-rows a:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: -3px; }
.ccdn-of-rows strong { font-size: 16px; color: var(--ccdn-primary-deep); white-space: nowrap; } .ccdn-of-rows span { font-size: 14px; color: var(--ccdn-muted); text-align: right; }
.ccdn-of-nearsec .ccdn-pg-chips { margin-top: 10px; }
.ccdn-of-more .ccdn-fa-stack { margin: 4px 0 0; }
@media (max-width: 560px) { .ccdn-of-more .ccdn-fa-stack td::before { content: attr(data-label); } }

/* =====================================================================
   Wave 1A — homepage KHOẢNG CÁCH result (.ccdn-rg-*) and its counting controls.  Markup: inc/home.php + assets/js/ccdn-range.js (twins).
   ===================================================================== */
.ccdn-rg-ctl { align-items: flex-end; gap: 12px 18px; }
.ccdn-rg-conv-set { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ccdn-rg-conv-set legend { padding: 0; margin: 0 0 6px; width: 100%; font-size: 13px; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-rg-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); background: var(--ccdn-surface); font-size: 15px; font-weight: 700; color: var(--ccdn-ink); cursor: pointer; }
.ccdn-rg-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ccdn-primary); }
.ccdn-rg-check:has(input:checked) { background: #EFF4FF; border-color: var(--ccdn-primary); color: var(--ccdn-primary-deep); }
.ccdn-rg-check:focus-within { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-rg-btns { display: flex; gap: 8px; margin-left: auto; }
.ccdn-rg-btns .ccdn-btn { min-height: 46px; margin: 0; }
@media (max-width: 639px) { .ccdn-rg-btns { margin-left: 0; width: 100%; } .ccdn-rg-btns .ccdn-btn-primary { flex: 1; } .ccdn-rg-check { flex: 1 1 auto; } }
.ccdn-rg-adv { margin-top: 12px; }

/* answer band: the total first, the calendar reading second, the unit conversions last; working days beside it */
.ccdn-rg { display: block; }
.ccdn-rg-answer { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 28px; padding: 4px 0 18px; }
.ccdn-rg-eyebrow { margin: 0 0 2px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-primary-deep); }
.ccdn-rg-big, .ccdn-rg-wbig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 0; }
.ccdn-rg-big .n { font-size: 76px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-rg-big .u { font-size: 22px; font-weight: 700; color: var(--ccdn-body); }
.ccdn-rg-base { margin: 2px 0 0; font-size: 15px; color: var(--ccdn-body); }
.ccdn-rg-eq { margin: 8px 0 0; font-size: 19px; color: var(--ccdn-ink); }
.ccdn-rg-eq strong { font-weight: 800; color: var(--ccdn-primary-deep); font-variant-numeric: tabular-nums; }
.ccdn-rg-hms { margin: 6px 0 0; font-size: 13.5px; color: var(--ccdn-muted); font-variant-numeric: tabular-nums; }
.ccdn-rg-conv { margin: 12px 0 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--ccdn-primary); font-size: 14.5px; color: var(--ccdn-body); }
.ccdn-rg-empty { margin: 8px 0 0; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-rg-work { padding: 2px 0 2px 18px; border-left: 4px solid var(--ccdn-success); min-width: 0; align-self: start; }
.ccdn-rg-work .ccdn-rg-eyebrow { color: #166534; }
.ccdn-rg-wbig .n { font-size: 48px; font-weight: 800; line-height: 1.05; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-rg-wbig .u { font-size: 17px; font-weight: 700; color: var(--ccdn-body); }
.ccdn-rg-wsub { margin: 6px 0 0; font-size: 14.5px; color: var(--ccdn-body); }
@media (max-width: 759px) {
  .ccdn-rg-answer { grid-template-columns: 1fr; gap: 14px 0; }
  .ccdn-rg-big .n { font-size: 60px; } .ccdn-rg-eq { font-size: 17px; }
  .ccdn-rg-work { padding-left: 14px; }
  .ccdn-rg-wbig .n { font-size: 40px; }
}

/* timeline: the two ends carry weekday, lunar date and whether the day itself is counted */
.ccdn-rg-tl { padding: 16px 0 6px; border-top: 1px solid var(--ccdn-border); }
.ccdn-rg-tlgrid { display: grid; grid-template-columns: minmax(150px, auto) minmax(80px, 1fr) minmax(150px, auto); align-items: center; gap: 0 16px; }
.ccdn-rg-end { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-variant-numeric: tabular-nums; }
.ccdn-rg-end.is-b { text-align: right; align-items: flex-end; }
.ccdn-rg-end .k { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-rg-end strong { font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--ccdn-ink); }
.ccdn-rg-end .w { font-size: 15px; font-weight: 700; color: var(--ccdn-body); }
.ccdn-rg-end .l { font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-rg-end .c { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.ccdn-rg-end.is-b .c { align-self: flex-end; }
.ccdn-rg-end .c.is-yes { background: #DCFCE7; color: #166534; }
.ccdn-rg-end .c.is-no { background: #F1F5F9; color: var(--ccdn-muted); border: 1px solid var(--ccdn-border-strong); }
.ccdn-rg-bar { position: relative; height: 40px; min-width: 0; }
.ccdn-rg-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--ccdn-primary); border-radius: 2px; }
.ccdn-rg-bar::after { content: ""; position: absolute; right: 0; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-top: 3px solid var(--ccdn-primary); border-right: 3px solid var(--ccdn-primary); transform: rotate(45deg); }
.ccdn-rg-bar .len { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 8px; background: var(--ccdn-surface); font-size: 14px; font-weight: 800; color: var(--ccdn-primary-deep); white-space: nowrap; z-index: 1; }
.ccdn-rg-tick { position: absolute; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--ccdn-muted); }
.ccdn-rg-htick { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--ccdn-warning); transform: rotate(45deg); border-radius: 2px; }
.ccdn-rg-htick.is-we { background: var(--ccdn-surface); border: 2px solid var(--ccdn-warning); box-sizing: border-box; }
@media (max-width: 639px) {
  .ccdn-rg-tlgrid { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .ccdn-rg-end.is-b { text-align: left; align-items: flex-start; } .ccdn-rg-end.is-b .c { align-self: flex-start; }
  .ccdn-rg-end strong { font-size: 20px; }
  .ccdn-rg-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* context: weekday/weekend split and the holidays that were recorded */
.ccdn-rg-ctx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 28px; padding: 12px 0 4px; border-top: 1px solid var(--ccdn-border); }
.ccdn-rg-ctx h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-primary-deep); }
.ccdn-rg-cbar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.ccdn-rg-cbar .wd { background: var(--ccdn-primary); } .ccdn-rg-cbar .we { background: #93B4F5; min-width: 4px; }
.ccdn-rg-cleg { margin: 8px 0 0; font-size: 15px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-rg-cleg strong { color: var(--ccdn-ink); } .ccdn-rg-cleg span { color: var(--ccdn-muted); }
.ccdn-rg-hsum { margin: 0 0 6px; font-size: 15px; color: var(--ccdn-ink); }
.ccdn-rg-hlist { list-style: none; margin: 0 0 6px; padding: 0; }
.ccdn-rg-hlist li { padding: 6px 0; border-top: 1px solid var(--ccdn-border); font-size: 14.5px; line-height: 1.45; color: var(--ccdn-ink); }
.ccdn-rg-hlist li strong { font-variant-numeric: tabular-nums; }
.ccdn-rg-hlist .w { color: var(--ccdn-muted); }
.ccdn-rg-hlist .o { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ccdn-rg-hlist .o.is-off { background: #DCFCE7; color: #166534; } .ccdn-rg-hlist .o.is-law { background: #EFF4FF; color: var(--ccdn-primary-deep); }
.ccdn-rg-hlist em { display: block; font-style: normal; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-rg-note { margin: 6px 0 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-rg-warn { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--ccdn-warning); background: #FFFBEB; font-size: 14px; color: #92400E; }
.ccdn-rg-hmore > summary { cursor: pointer; font-weight: 700; color: var(--ccdn-primary); min-height: 40px; display: flex; align-items: center; }
@media (max-width: 759px) { .ccdn-rg-ctx { grid-template-columns: 1fr; gap: 14px 0; } }
.ccdn-rg .ccdn-res-actions { padding-top: 14px; }
.ccdn-rg .ccdn-detail { margin-top: 10px; }

/* Wave 1A — flagship content blocks */
.ccdn-guide-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; max-width: 860px; font-size: 16px; line-height: 1.55; color: var(--ccdn-body); }
.ccdn-guide-list strong { color: var(--ccdn-ink); }
.ccdn-guide-table { width: 100%; max-width: 860px; margin: 12px 0 0; border-collapse: collapse; font-size: 15px; }
.ccdn-guide-table thead th { text-align: left; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ccdn-muted); padding: 0 12px 8px 0; }
.ccdn-guide-table tbody th, .ccdn-guide-table td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-top: 1px solid var(--ccdn-border); color: var(--ccdn-ink); }
.ccdn-guide-table tbody th { font-weight: 700; width: 38%; } .ccdn-guide-table td:nth-child(2) { white-space: nowrap; font-weight: 800; color: var(--ccdn-primary-deep); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .ccdn-guide-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ccdn-guide-table tr { display: block; padding: 8px 0; border-top: 1px solid var(--ccdn-border); } .ccdn-guide-table tbody th, .ccdn-guide-table td { display: block; width: auto; border: 0; padding: 2px 0; } }
.ccdn-rg-eq strong { white-space: nowrap; }

.ccdn-rg-adv > summary { min-height: 44px; }

/* =====================================================================
   Wave 1A.1 — homepage guide: contained sections (.ccdn-hg-*).  Markup: inc/home-guide-tpl.php.
   One semantic topic = one section container. Restrained: white surface, hairline border, no shadow, no gradient.
   ===================================================================== */
.ccdn-hg { margin-top: 36px; }
.ccdn-hg-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding: 12px 18px; background: var(--ccdn-surface); border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); }
.ccdn-hg-toc-l { margin-right: 8px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-hg-toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 6px; font-size: 14.5px; font-weight: 700; color: var(--ccdn-primary-deep); text-decoration: none; }
.ccdn-hg-toc a:hover { background: #EFF4FF; text-decoration: underline; } .ccdn-hg-toc a:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 1px; }
.ccdn-hg-sec { margin-top: 20px; padding: 28px 32px 30px; background: var(--ccdn-surface); border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); scroll-margin-top: 84px; }
.ccdn-hg-sec > header { margin: 0 0 14px; }
.ccdn-hg-k { display: inline-block; margin: 0 0 8px; padding: 2px 11px; border-radius: 999px; background: #EFF4FF; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-primary-deep); }
.ccdn-hg-sec h2 { margin: 0; font-size: 27px; line-height: 1.2; color: var(--ccdn-ink); }
.ccdn-hg-sec h3 { margin: 28px 0 8px; font-size: 19px; line-height: 1.3; color: var(--ccdn-ink); }
.ccdn-hg-sec p { max-width: 84ch; margin: 0 0 12px; font-size: 16.5px; line-height: 1.65; color: var(--ccdn-body); }
.ccdn-hg-sec p.ccdn-hg-lead { font-size: 17.5px; color: var(--ccdn-ink); margin-bottom: 16px; }
.ccdn-hg-sec p strong, .ccdn-hg-list strong, .ccdn-hg-defs strong { color: var(--ccdn-ink); }
.ccdn-hg-sec a { color: var(--ccdn-primary); text-underline-offset: 2px; } .ccdn-hg-sec a:hover { color: var(--ccdn-primary-deep); }
.ccdn-hg-list { max-width: 84ch; margin: 8px 0 14px; padding-left: 22px; display: grid; gap: 9px; font-size: 16.5px; line-height: 1.6; color: var(--ccdn-body); }
.ccdn-hg-formula { margin: 16px 0; padding: 14px 18px; background: #F1F5F9; border-left: 4px solid var(--ccdn-primary); border-radius: 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0; font-size: 17px; line-height: 1.55; color: var(--ccdn-ink); }
.ccdn-hg-formula span { font-weight: 800; color: var(--ccdn-primary-deep); }
.ccdn-hg-note { max-width: 84ch; margin: 18px 0 4px; padding: 12px 16px; border-left: 4px solid var(--ccdn-primary); background: #EFF4FF; border-radius: 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0; font-size: 15.5px; line-height: 1.6; color: var(--ccdn-ink); }
.ccdn-hg-note.is-warn { border-left-color: var(--ccdn-warning); background: #FFFBEB; color: #7C2D12; }
/* "how to read the result": a labelled breakdown of ONE example */
.ccdn-hg-read { margin: 16px 0 6px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; }
.ccdn-hg-read-t { margin: 0 !important; padding: 10px 16px; background: var(--ccdn-bg); border-bottom: 1px solid var(--ccdn-border-strong); font-size: 14.5px !important; font-weight: 800; color: var(--ccdn-ink) !important; }
.ccdn-hg-rows { margin: 0; }
.ccdn-hg-rows > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 18px; padding: 10px 16px; border-top: 1px solid var(--ccdn-border); }
.ccdn-hg-rows > div:first-child { border-top: 0; }
.ccdn-hg-rows dt { font-size: 14px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ccdn-muted); padding-top: 3px; }
.ccdn-hg-rows dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.ccdn-hg-rows dd strong { font-size: 20px; font-weight: 800; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-hg-rows dd span { font-size: 15px; color: var(--ccdn-body); flex: 1 1 280px; }
/* month steps: the stepping that turns 123 days into "4 months" */
.ccdn-hg-steps { list-style: none; margin: 14px 0 16px; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.ccdn-hg-steps li { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 22px 8px 14px; border: 1px solid var(--ccdn-border-strong); border-left-width: 0; background: var(--ccdn-bg); font-variant-numeric: tabular-nums; }
.ccdn-hg-steps li:first-child { border-left-width: 1px; border-radius: var(--ccdn-radius-sm) 0 0 var(--ccdn-radius-sm); background: #EFF4FF; border-color: var(--ccdn-primary); }
.ccdn-hg-steps li:last-child { border-radius: 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0; background: #EFF4FF; border-color: var(--ccdn-primary); }
.ccdn-hg-steps li + li::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--ccdn-surface); border-top: 1px solid var(--ccdn-border-strong); border-right: 1px solid var(--ccdn-border-strong); transform: rotate(45deg); }
.ccdn-hg-steps strong { font-size: 17px; color: var(--ccdn-ink); } .ccdn-hg-steps span { font-size: 13.5px; color: var(--ccdn-muted); } .ccdn-hg-steps em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--ccdn-primary-deep); }
/* definition rows */
.ccdn-hg-defs { margin: 12px 0 8px; border-top: 1px solid var(--ccdn-border); }
.ccdn-hg-defs > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 20px; padding: 11px 0; border-bottom: 1px solid var(--ccdn-border); }
.ccdn-hg-defs dt { font-weight: 800; color: var(--ccdn-ink); font-size: 16px; } .ccdn-hg-defs dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ccdn-body); max-width: 78ch; }
.ccdn-hg-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.ccdn-hg-tag.is-off { background: #DCFCE7; color: #166534; } .ccdn-hg-tag.is-law { background: #EFF4FF; color: var(--ccdn-primary-deep); } .ccdn-hg-tag.is-warn { background: #FFFBEB; color: #92400E; border: 1px solid #FCD34D; }
/* tables: comparisons that earn a table; rows turn into labelled blocks on a phone */
.ccdn-hg-table { width: 100%; margin: 14px 0 6px; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.ccdn-hg-table thead th { text-align: left; padding: 0 14px 9px 0; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); border-bottom: 2px solid var(--ccdn-border-strong); }
.ccdn-hg-table tbody th, .ccdn-hg-table td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--ccdn-border); line-height: 1.5; color: var(--ccdn-body); }
.ccdn-hg-table tbody th { font-weight: 700; color: var(--ccdn-ink); width: 26%; } .ccdn-hg-table td strong { color: var(--ccdn-ink); }
.ccdn-hg-table td small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-hg-table tr.is-sum th, .ccdn-hg-table tr.is-sum td { border-top: 2px solid var(--ccdn-border-strong); background: var(--ccdn-bg); }
.ccdn-hg-table tr.is-sum td strong { font-size: 18px; }
.ccdn-hg-try { font-weight: 700; }
.ccdn-hg-ex tbody th { width: 17%; }
/* use cases: ruled grid, not cards */
.ccdn-hg-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; border-top: 1px solid var(--ccdn-border); }
.ccdn-hg-uses > div { padding: 16px 0 14px; border-bottom: 1px solid var(--ccdn-border); }
.ccdn-hg-uses h3 { margin: 0 0 6px; font-size: 17.5px; } .ccdn-hg-uses p { margin: 0; font-size: 16px; }
.ccdn-hg-faq .ccdn-faq-item { border-bottom: 1px solid var(--ccdn-border); }
@media (max-width: 899px) { .ccdn-hg-sec { padding: 22px 22px 24px; } .ccdn-hg-sec h2 { font-size: 24px; } }
@media (max-width: 719px) {
  .ccdn-hg { margin-top: 28px; }
  .ccdn-hg-sec { padding: 18px 16px 20px; margin-top: 14px; }
  .ccdn-hg-sec h2 { font-size: 22px; } .ccdn-hg-sec h3 { font-size: 18px; margin-top: 22px; }
  .ccdn-hg-sec p, .ccdn-hg-list { font-size: 16px; } .ccdn-hg-sec p.ccdn-hg-lead { font-size: 16.5px; }
  .ccdn-hg-toc { padding: 10px 12px; } .ccdn-hg-toc a { min-height: 40px; }
  .ccdn-hg-rows > div { grid-template-columns: 1fr; gap: 2px; } .ccdn-hg-rows dd span { flex-basis: 100%; }
  .ccdn-hg-defs > div { grid-template-columns: 1fr; gap: 3px; }
  .ccdn-hg-steps { flex-direction: column; } .ccdn-hg-steps li { flex-direction: row; align-items: baseline; gap: 10px; padding: 8px 14px; border-left-width: 1px; border-top-width: 0; } .ccdn-hg-steps li:first-child { border-top-width: 1px; border-radius: var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0 0; } .ccdn-hg-steps li:last-child { border-radius: 0 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm); } .ccdn-hg-steps li + li::before { display: none; }
  .ccdn-hg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-hg-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--ccdn-border); }
  .ccdn-hg-table tbody th, .ccdn-hg-table td { display: block; width: auto; border: 0; padding: 2px 0; }
  .ccdn-hg-table tbody th { padding-bottom: 4px; font-size: 16px; }
  .ccdn-hg-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ccdn-muted); font-size: 13.5px; }
  .ccdn-hg-table td[data-label] strong { font-size: 16px; }
  .ccdn-hg-table tr.is-sum th, .ccdn-hg-table tr.is-sum td { background: none; border-top: 0; }
  .ccdn-hg-uses { grid-template-columns: 1fr; }
}

@media (min-width: 720px) { .ccdn-hg-table td[data-label="Tổng"], .ccdn-hg-table td[data-label="Tổng số ngày"], .ccdn-hg-table td[data-label="Theo lịch"], .ccdn-hg-table td[data-label="Giá trị"], .ccdn-hg-table td[data-label="Số ngày"], .ccdn-hg-table td[data-label="Kết quả"] { white-space: nowrap; } }

.ccdn-hg-sec p.ccdn-hg-read-t { max-width: none; }
.ccdn-hg-defs > div { grid-template-columns: 270px minmax(0, 1fr); }
.ccdn-hg-defs dt { padding-top: 1px; }
@media (max-width: 719px) { .ccdn-hg-defs > div { grid-template-columns: 1fr; } }

/* mobile: the quick-pick chips are one scrollable row, so the answer starts higher on the first screen */
@media (max-width: 639px) {
  .ccdn-presets { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 10px; padding-bottom: 2px; }
  .ccdn-presets::-webkit-scrollbar { display: none; }
  .ccdn-presets .ccdn-chip, .ccdn-presets-l { flex: none; }
}

/* the per-year data table stays compact on a phone: year + the two counts on one line, the unannounced holidays only when there are some */
@media (max-width: 719px) {
  .ccdn-hg-yrs tr { display: grid; grid-template-columns: 54px 1fr 1fr; gap: 2px 10px; align-items: baseline; padding: 8px 0; }
  .ccdn-hg-yrs tbody th { grid-row: 1; padding: 0; font-size: 17px; }
  .ccdn-hg-yrs td { padding: 0; font-size: 14.5px; }
  .ccdn-hg-yrs td.is-none { display: none; }
  .ccdn-hg-yrs td[data-label]::before { display: block; font-size: 12px; font-weight: 700; color: var(--ccdn-muted); }
  .ccdn-hg-yrs td.is-warn { grid-column: 2 / -1; color: #92400E; }
}

/* ==========================================================================
   TOOL-01 — Đếm ngày giờ phút giây (.ccdn-dt-*).  Identity: two moments joined by an elapsed-time track.
   Markup: page-dem-ngay-gio-phut-giay.php (inputs) + assets/js/ccdn-datetime-ui.js (result). Guide sections reuse .ccdn-hg-*.
   ========================================================================== */
.ccdn-dt { --dt-a: var(--ccdn-primary); --dt-b: var(--ccdn-ink); --dt-night: #E8EDF4; }
.ccdn-dt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.ccdn-dt-modes { flex: 0 1 auto; }
.ccdn-dt-tz { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-dt-tzdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ccdn-success); }
.ccdn-dt-moments { display: grid; grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1fr); align-items: stretch; }
.ccdn-dt-m { margin: 0; min-width: 0; padding: 16px 18px 14px; border: 1px solid var(--ccdn-border-strong); border-top: 4px solid var(--dt-a); border-radius: var(--ccdn-radius-md); background: var(--ccdn-surface); }
.ccdn-dt-m.is-b { border-top-color: var(--dt-b); }
.ccdn-dt-m legend { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; margin-left: -6px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-ink); }
.ccdn-dt-m legend::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--dt-a); }
.ccdn-dt-m.is-b legend::before { border-radius: 2px; background: var(--dt-b); }
.ccdn-dt-m-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
.ccdn-dt-m .ccdn-input { min-width: 0; width: 100%; font-variant-numeric: tabular-nums; }
.ccdn-dt-echo { margin: 8px 0 10px; min-height: 1.4em; font-size: 14.5px; font-weight: 700; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-dt-sc { display: flex; flex-wrap: wrap; gap: 6px; }
.ccdn-dt-sc .ccdn-chip { min-height: 38px; }
.ccdn-dt-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; text-align: center; }
.ccdn-dt-link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px dashed var(--ccdn-border-strong); z-index: 0; }
.ccdn-dt-link > * { position: relative; z-index: 1; background: var(--ccdn-surface); }
.ccdn-dt-link-l { padding: 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-dt-link .ccdn-dt-sc { justify-content: center; max-width: 150px; background: var(--ccdn-surface); padding: 2px; }
.ccdn-dt[data-mode="since"] .ccdn-dt-moments, .ccdn-dt[data-mode="until"] .ccdn-dt-moments { grid-template-columns: minmax(0, 560px); }
.ccdn-dt-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ccdn-border); }
.ccdn-dt-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 15px; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-dt-check input { width: 18px; height: 18px; margin: 0; }
.ccdn-dt-ex-l { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); margin-left: 6px; }
.ccdn-dt-opts .ccdn-btn-primary { margin-left: auto; min-width: 110px; }
.ccdn-dt-notice { margin: 16px 0 0; }
.ccdn-dt-notice p { margin: 0 0 10px; }
.ccdn-dt-nb { display: flex; flex-wrap: wrap; gap: 8px; }
.ccdn-dt-result { margin-top: 22px; }
.ccdn-dt-res { border-top: 1px solid var(--ccdn-border); padding-top: 20px; }
.ccdn-dt-res-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.ccdn-dt-k { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-dt-livetag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: #DCFCE7; color: #166534; font-size: 13px; font-weight: 700; }
.ccdn-dt-livetag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ccdn-success); }
.ccdn-dt-units { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); border-left: 4px solid var(--dt-a); padding-left: 4px; }
.ccdn-dt-u { display: flex; flex-direction: column; min-width: 0; padding: 2px 12px 2px 14px; border-left: 1px solid var(--ccdn-border-strong); }
.ccdn-dt-u:first-child { border-left: 0; }
.ccdn-dt-u b { font-size: clamp(30px, 7.2vw, 68px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ccdn-dt-u span { margin-top: 4px; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-dt-u.is-dim b { color: #94A3B8; }
.ccdn-dt-says { margin: 14px 0 6px; max-width: 80ch; font-size: 15.5px; line-height: 1.55; color: var(--ccdn-body); }
.ccdn-dt-says b { color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-dt-says .ccdn-dt-tz { font-size: 13px; font-weight: 700; color: var(--ccdn-muted); }
/* the elapsed-time track */
.ccdn-dt-track { position: relative; height: 74px; margin: 28px 26px 6px; }
.ccdn-dt-track.is-long { height: 58px; margin-top: 30px; }
.ccdn-dt-day { position: absolute; top: 0; height: 36px; background: #FFFFFF; border-top: 1px solid var(--ccdn-border-strong); border-bottom: 1px solid var(--ccdn-border-strong); overflow: hidden; }
.ccdn-dt-day .nt { position: absolute; top: 0; bottom: 0; background: var(--dt-night); }
.ccdn-dt-day .dl { position: absolute; left: 5px; top: 1px; font-size: 11px; font-weight: 800; color: var(--ccdn-muted); letter-spacing: .02em; }
.ccdn-dt-day .h { position: absolute; bottom: 1px; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: #94A3B8; }
.ccdn-dt-day .h6 { left: 25%; } .ccdn-dt-day .h12 { left: 50%; } .ccdn-dt-day .h18 { left: 75%; }
.ccdn-dt-mid { position: absolute; top: -4px; height: 44px; width: 0; border-left: 2px solid var(--ccdn-ink); }
.ccdn-dt-fill { position: absolute; top: 14px; height: 8px; background: var(--dt-a); border-radius: 4px; opacity: .9; }
.ccdn-dt-pin { position: absolute; top: 9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--dt-a); border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--dt-a); }
.ccdn-dt-pin.is-b { border-radius: 4px; background: var(--dt-b); box-shadow: 0 0 0 1px var(--dt-b); }
.ccdn-dt-pin em { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 13px; font-weight: 800; color: var(--ccdn-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ccdn-dt-pin.is-a.is-near em { transform: translateX(-90%); } .ccdn-dt-pin.is-b.is-near em { transform: translateX(-10%); }
.ccdn-dt-now { position: absolute; top: -22px; width: 0; height: 52px; margin-left: -1px; border-left: 2px solid var(--ccdn-success); }
.ccdn-dt-now em { position: absolute; top: 0; left: 4px; font-style: normal; font-size: 12px; font-weight: 800; color: #166534; white-space: nowrap; }
.ccdn-dt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 10px; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-dt-legend .sw { display: inline-block; width: 14px; height: 10px; margin-right: -8px; border: 1px solid var(--ccdn-border-strong); }
.ccdn-dt-legend .sw.nt { background: var(--dt-night); } .ccdn-dt-legend .sw.md { width: 0; height: 12px; border: 0; border-left: 2px solid var(--ccdn-ink); } .ccdn-dt-legend .sw.fl { background: var(--dt-a); border-color: var(--dt-a); height: 6px; }
.ccdn-dt-line { position: absolute; left: 0; right: 0; top: 17px; height: 4px; background: var(--dt-a); border-radius: 2px; }
.ccdn-dt-tick { position: absolute; top: 9px; width: 0; height: 20px; border-left: 1px solid var(--ccdn-border-strong); }
.ccdn-dt-len { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); padding: 0 8px; background: var(--ccdn-surface); font-size: 13px; font-weight: 800; color: var(--ccdn-primary-deep); }
.ccdn-dt-track.is-long .ccdn-dt-pin.is-a em { left: 0; transform: none; } .ccdn-dt-track.is-long .ccdn-dt-pin.is-b em { left: auto; right: -9px; transform: none; }
.ccdn-dt-track.is-long .ccdn-dt-pin { top: 8px; }
/* totals, calendar reading, day buckets */
.ccdn-dt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.ccdn-dt-totals { display: flex; flex-wrap: wrap; gap: 4px 0; }
.ccdn-dt-totals .ccdn-dt-k { flex: 0 0 100%; margin-bottom: 4px; }
.ccdn-dt-totals > div { display: flex; flex-direction: column; padding: 0 18px 0 0; margin-right: 18px; border-right: 1px solid var(--ccdn-border); }
.ccdn-dt-totals > div:last-child { border-right: 0; }
.ccdn-dt-totals b { font-size: 22px; font-weight: 800; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-dt-totals span:not(.ccdn-dt-k) { font-size: 13px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-dt-wk { margin: 10px 0 0; font-size: 15px; color: var(--ccdn-body); } .ccdn-dt-wk strong { color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-dt-box { padding: 14px 16px; border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); background: var(--ccdn-bg); }
.ccdn-dt-box h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-dt-calw { margin: 0 0 6px; font-size: 20px; color: var(--ccdn-ink); }
.ccdn-dt-note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ccdn-muted); } .ccdn-dt-note a { color: var(--ccdn-primary); }
.ccdn-dt-round { grid-column: 1 / -1; }
.ccdn-dt-warn { margin: 10px 0 0; padding: 8px 12px; border-left: 4px solid var(--ccdn-warning); background: #FFFBEB; font-size: 14px; line-height: 1.5; color: #7C2D12; }
#ccdn-dt-bk { margin-top: 16px; }
.ccdn-dt-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--ccdn-border); gap: 2px; margin: 4px 0 10px; }
.ccdn-dt-bar i { display: block; min-width: 3px; } .s-work { background: var(--ccdn-primary); } .s-weekend { background: #94A3B8; } .s-holiday { background: var(--ccdn-warning); } .s-makeup { background: var(--ccdn-success); }
.ccdn-dt-bl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ccdn-dt-bl li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ccdn-body); }
.ccdn-dt-bl li i { width: 12px; height: 12px; border-radius: 3px; align-self: center; background: currentColor; }
.ccdn-dt-bl li.s-work { color: var(--ccdn-primary); background: none; } .ccdn-dt-bl li.s-weekend { color: #94A3B8; background: none; } .ccdn-dt-bl li.s-holiday { color: var(--ccdn-warning); background: none; } .ccdn-dt-bl li.s-makeup { color: var(--ccdn-success); background: none; }
.ccdn-dt-bl li span { color: var(--ccdn-body); } .ccdn-dt-bl li strong { color: var(--ccdn-ink); font-variant-numeric: tabular-nums; text-align: right; }
.ccdn-dt-hl { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; color: var(--ccdn-body); }
.ccdn-dt-hl em { font-style: normal; font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; } .ccdn-dt-hl em.is-off { background: #DCFCE7; color: #166534; } .ccdn-dt-hl em.is-law { background: #EFF4FF; color: var(--ccdn-primary-deep); } .ccdn-dt-hl small { display: block; color: var(--ccdn-muted); }
.ccdn-dt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ccdn-dt-history { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ccdn-border); }
.ccdn-dt-history ul { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ccdn-dt-history li .ccdn-btn-text { padding: 6px 2px; font-size: 14px; text-align: left; }
@media (max-width: 899px) {
  .ccdn-dt-moments { grid-template-columns: minmax(0, 1fr); }
  .ccdn-dt-link { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 14px 0; }
  .ccdn-dt-link::before { left: 50%; right: auto; top: 0; bottom: 0; height: auto; border-top: 0; border-left: 2px dashed var(--ccdn-border-strong); }
  .ccdn-dt-link .ccdn-dt-sc { max-width: none; }
  .ccdn-dt-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .ccdn-dt-top { align-items: flex-start; }
  .ccdn-dt-modes { width: 100%; } .ccdn-dt-modes .ccdn-mode-option { flex: 1 1 0; justify-content: center; padding-left: 4px; padding-right: 4px; font-size: 14px; text-align: center; }
  .ccdn-dt-m { padding: 14px 14px 12px; }
  .ccdn-dt-opts .ccdn-btn-primary { margin-left: 0; width: 100%; order: 9; }
  .ccdn-dt-ex-l { margin-left: 0; flex-basis: 100%; }
  .ccdn-dt-units { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .ccdn-dt-u:nth-child(3) { border-left: 0; padding-left: 0; } .ccdn-dt-u:first-child { padding-left: 10px; }
  .ccdn-dt-u b { font-size: clamp(34px, 11vw, 52px); }
  .ccdn-dt-track { margin-left: 20px; margin-right: 20px; }
  .ccdn-dt-totals > div { padding-right: 12px; margin-right: 12px; }
  .ccdn-dt-hl li { padding-bottom: 4px; }
}

.ccdn-dt-modes .ccdn-mode-option { height: auto; min-height: 44px; line-height: 1.25; }
.ccdn-dt-says .ccdn-dt-tz { white-space: nowrap; }
@media (max-width: 639px) {
  .ccdn-dt-bl li { grid-template-columns: 14px minmax(0, 1fr); } .ccdn-dt-bl li strong { grid-column: 2; text-align: left; }
  .ccdn-dt-tz { align-items: flex-start; }
}
.ccdn-dt-day { overflow: visible; }
.ccdn-dt-day .dl { top: -16px; left: 4px; }
.ccdn-dt-track { margin-top: 36px; }
.ccdn-dt-modes .ccdn-mode-option { white-space: nowrap; }
@media (max-width: 639px) { .ccdn-dt-modes .ccdn-mode-option { white-space: normal; } }
.ccdn-dt-m .ccdn-input { padding-left: 10px; padding-right: 8px; font-size: 15px; }
.ccdn-dt-m-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ccdn-dt-hd { margin-top: 12px; } .ccdn-dt-hd summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 14.5px; font-weight: 700; color: var(--ccdn-primary); }
.ccdn-dt-hd summary:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-dt-hd .ccdn-dt-hl { margin-top: 4px; }
.ccdn-dt [hidden] { display: none !important; }
.ccdn-dt-crumb { margin: 18px 0 -6px; font-size: 14px; color: var(--ccdn-muted); } .ccdn-dt-crumb a { color: var(--ccdn-primary); text-underline-offset: 2px; }
.ccdn-dt-day .h { font-size: 11px; color: #475569; }
.ccdn-dt-u.is-dim b { color: #64748B; }
.ccdn-dt-pin em { background: #FFFFFF; padding: 0 3px; border-radius: 3px; }
.ccdn-dt-now em { background: #FFFFFF; padding: 0 3px; }

/* ==========================================================================
   TOOL-02 — Đổi lịch âm dương (.ccdn-lc-*).  Identity: two calendar sheets (Dương / Âm) joined by a conversion bridge.
   Dương = primary blue band + sun icon; Âm = ink band + crescent icon: always paired with a text label, never colour alone.
   Markup: page-doi-lich-am-duong.php (inputs) + assets/js/ccdn-lunar-convert-ui.js (result). Guide sections reuse .ccdn-hg-*.
   ========================================================================== */
.ccdn-lc { --lc-solar: var(--ccdn-primary); --lc-lunar: var(--ccdn-ink); }
.ccdn-lc [hidden] { display: none !important; }
.ccdn-lc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.ccdn-lc-dirs .ccdn-mode-option { height: auto; min-height: 44px; white-space: nowrap; font-size: 15px; }
.ccdn-lc-range { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-lc-range strong { color: var(--ccdn-ink); } .ccdn-lc-range a { color: var(--ccdn-primary); text-underline-offset: 2px; }
.ccdn-lc-rdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ccdn-success); flex: none; }
.ccdn-lc-inpanel { border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: var(--ccdn-surface); overflow: hidden; }
.ccdn-lc-inhead, .ccdn-lc-sheet > header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #FFFFFF; font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ccdn-lc-inpanel.is-solar .ccdn-lc-inhead, .ccdn-lc-sheet.is-solar > header { background: var(--lc-solar); }
.ccdn-lc-inpanel.is-lunar .ccdn-lc-inhead, .ccdn-lc-sheet.is-lunar > header { background: var(--lc-lunar); }
.ccdn-lc-ico { flex: none; }
.ccdn-lc-selects { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; padding: 16px 16px 6px; }
.ccdn-lc-selects .ccdn-input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.ccdn-lc-lenhint { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-lc-inputnote { margin: 10px 16px 0; }
.ccdn-lc-inbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px 16px; }
.ccdn-lc-inbtns .ccdn-btn-primary { margin-left: auto; min-width: 120px; }
.ccdn-lc-result { margin-top: 22px; }
.ccdn-lc-pair { display: grid; grid-template-columns: minmax(0, 1fr) 168px minmax(0, 1fr); align-items: stretch; }
.ccdn-lc-sheet { margin: 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: var(--ccdn-surface); overflow: hidden; }
.ccdn-lc-sheet > header small { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: none; opacity: .92; }
.ccdn-lc-sheet.is-source { background: var(--ccdn-bg); }
.ccdn-lc-sheet.is-source > header { opacity: .85; }
.ccdn-lc-sheet.is-result { border-width: 2px; box-shadow: var(--ccdn-shadow-card); }
.ccdn-lc-sheet.is-solar.is-result { border-color: var(--lc-solar); } .ccdn-lc-sheet.is-lunar.is-result { border-color: var(--lc-lunar); }
.ccdn-lc-day { padding: 14px 16px 0; font-size: clamp(64px, 11vw, 116px); line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-lc-sheet.is-source .ccdn-lc-day { font-size: clamp(48px, 8vw, 84px); color: var(--ccdn-muted); }
.ccdn-lc-my { padding: 6px 16px 0; font-size: 17px; font-weight: 800; color: var(--ccdn-ink); }
.ccdn-lc-wd { padding: 2px 16px 0; font-size: 15px; font-weight: 700; color: var(--ccdn-body); min-height: 1.4em; }
.ccdn-lc-full { margin: 8px 16px 0; font-size: 14px; color: var(--ccdn-muted); font-variant-numeric: tabular-nums; }
.ccdn-lc-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 16px; margin-top: auto; }
.ccdn-lc-sheet:not(.is-lunar) .ccdn-lc-full { margin-bottom: 16px; }
.ccdn-lc-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--ccdn-border-strong); background: var(--ccdn-surface); font-size: 13px; font-weight: 700; color: var(--ccdn-body); }
.ccdn-lc-tag.is-leap { background: #FFFBEB; border: 1px dashed var(--ccdn-warning); color: #7C2D12; }
.ccdn-lc-tag.is-obs { background: #EFF4FF; border-color: #C7D9FB; color: var(--ccdn-primary-deep); }
.ccdn-lc-bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 10px; text-align: center; position: relative; }
.ccdn-lc-bridge::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--ccdn-border-strong); z-index: 0; }
.ccdn-lc-bridge > * { position: relative; z-index: 1; }
.ccdn-lc-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ccdn-surface); border: 2px solid var(--ccdn-ink); font-size: 22px; font-weight: 800; color: var(--ccdn-ink); }
.ccdn-lc-bridge .ccdn-btn { padding-left: 10px; padding-right: 10px; font-size: 14px; background: var(--ccdn-surface); }
.ccdn-lc-verify { margin: 14px 0 0; padding: 8px 12px; border-left: 4px solid var(--ccdn-success); background: #F0FDF4; font-size: 14.5px; color: #14532D; }
.ccdn-lc-verify.is-bad { border-left-color: var(--ccdn-accent); background: #FEF2F2; color: #991B1B; }
.ccdn-lc-verify.is-flash { outline: 2px solid var(--ccdn-success); outline-offset: 2px; }
.ccdn-lc-facts { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--ccdn-border); }
.ccdn-lc-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ccdn-border); }
.ccdn-lc-facts dt { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ccdn-muted); padding-top: 2px; }
.ccdn-lc-facts dd { margin: 0; font-size: 15px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-lc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ccdn-lc-err { margin: 0; } .ccdn-lc-typed { margin: 6px 0 0; font-size: 14px; }
.ccdn-lc-h { margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--ccdn-border); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-lc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ccdn-lc-nav .ccdn-btn { min-height: 40px; padding: 8px 14px; }
.ccdn-lc-stripin { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ccdn-lc-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 8px 2px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); font: inherit; color: var(--ccdn-ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.ccdn-lc-cell:hover { background: #EFF4FF; } .ccdn-lc-cell:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-lc-cell b { font-size: 12px; color: var(--ccdn-muted); } .ccdn-lc-cell .s { font-size: 15px; font-weight: 800; } .ccdn-lc-cell .l { font-size: 13px; color: var(--ccdn-body); padding-top: 3px; border-top: 1px dashed var(--ccdn-border-strong); width: 70%; text-align: center; }
.ccdn-lc-cell.is-new .l { font-weight: 800; color: var(--ccdn-ink); }
.ccdn-lc-cell.is-sel { border: 3px solid var(--ccdn-primary); background: #EFF4FF; padding: 6px 0; }
.ccdn-lc-cell.is-off { align-items: center; justify-content: center; color: var(--ccdn-muted); border-style: dashed; cursor: default; }
.ccdn-lc-years { margin-top: 22px; } .ccdn-lc-years h3 { margin: 0 0 8px; font-size: 17px; color: var(--ccdn-ink); }
.ccdn-lc-ywrap { overflow-x: auto; }
.ccdn-lc-ytable { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ccdn-lc-ytable th, .ccdn-lc-ytable td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ccdn-border); vertical-align: top; }
.ccdn-lc-ytable thead th { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); border-bottom: 2px solid var(--ccdn-border-strong); }
.ccdn-lc-ytable tbody th { font-weight: 700; color: var(--ccdn-ink); width: 22%; } .ccdn-lc-ytable td small { display: block; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-lc-ytable tr.is-here th, .ccdn-lc-ytable tr.is-here td { background: #EFF4FF; font-weight: 800; } .ccdn-lc-ytable tr.is-here th { border-left: 4px solid var(--ccdn-primary); padding-left: 8px; }
.ccdn-lc-ytable tr.is-miss td { color: var(--ccdn-muted); font-style: italic; }
.ccdn-lc-ynote { margin: 8px 0 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-lc-ribbon { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ccdn-lc-ribbon li { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); font-variant-numeric: tabular-nums; }
.ccdn-lc-ribbon li b { font-size: 15px; color: var(--ccdn-ink); } .ccdn-lc-ribbon li span { font-size: 13.5px; color: var(--ccdn-body); } .ccdn-lc-ribbon li em { font-style: normal; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-lc-ribbon li.is-leap { border: 2px dashed var(--ccdn-warning); background: #FFFBEB; } .ccdn-lc-ribbon li.is-leap b { color: #7C2D12; }
.ccdn-lc-leaplist { list-style: none; margin: 10px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.ccdn-lc-leaplist li { padding: 3px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: 999px; font-size: 14.5px; color: var(--ccdn-body); background: var(--ccdn-surface); } .ccdn-lc-leaplist strong { color: var(--ccdn-ink); }
.ccdn-lc-small { font-size: 14px !important; color: var(--ccdn-muted) !important; }
@media (max-width: 899px) {
  .ccdn-lc-pair { grid-template-columns: minmax(0, 1fr); }
  .ccdn-lc-bridge { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 16px 0; }
  .ccdn-lc-bridge::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed var(--ccdn-border-strong); }
  .ccdn-lc-arrow { transform: rotate(90deg); }
}
@media (max-width: 639px) {
  .ccdn-lc-dirs { width: 100%; } .ccdn-lc-dirs .ccdn-mode-option { flex: 1 1 0; justify-content: center; padding-left: 4px; padding-right: 4px; }
  .ccdn-lc-selects { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; padding: 14px 12px 4px; }
  .ccdn-lc-inbtns { padding: 10px 12px 14px; } .ccdn-lc-inbtns .ccdn-btn-primary { flex: 1 1 100%; margin-left: 0; order: 9; }
  .ccdn-lc-facts { grid-template-columns: minmax(0, 1fr); } .ccdn-lc-facts > div { grid-template-columns: 96px minmax(0, 1fr); }
  .ccdn-lc-day { padding-top: 10px; } .ccdn-lc-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccdn-lc-stripin { gap: 3px; } .ccdn-lc-cell .s { font-size: 13.5px; } .ccdn-lc-cell { padding: 7px 0; }
}
.ccdn-lc-range { display: block; position: relative; padding-left: 16px; max-width: 100%; } .ccdn-lc-rdot { position: absolute; left: 0; top: .5em; }
.ccdn-lc .ccdn-lc-verify { max-width: none; }
@media (max-width: 639px) {
  .ccdn-lc-dirs { margin-bottom: 2px; }
  #ccdn-lc-lunar { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }
  #ccdn-lc-lunar .ccdn-field:nth-child(2) { grid-column: 1 / -1; order: 3; } #ccdn-lc-lunar .ccdn-field:nth-child(3) { order: 2; } #ccdn-lc-lunar .ccdn-lc-lenhint { order: 4; }
}
.ccdn-lc .ccdn-lc-verify { max-width: none !important; }
@media (max-width: 639px) {
  .ccdn-lc-selects { grid-template-columns: minmax(0, .72fr) minmax(0, 1.38fr) minmax(0, 1fr); }
  .ccdn-lc-selects .ccdn-input { padding-left: 8px; padding-right: 4px; font-size: 15px; text-overflow: clip; }
}
.ccdn-lc-ytable td:last-child, .ccdn-lc-ytable thead th:last-child { white-space: nowrap; padding-right: 0; }
.ccdn-lc-ytable tr.is-miss td { white-space: normal; }
@media (max-width: 639px) { .ccdn-lc-ytable tbody th { width: 18%; } .ccdn-lc-ytable { font-size: 14.5px; } }

/* ==========================================================================
   TOOL-03 — Đếm ngày yêu (.ccdn-ly-*).  Identity: one shared timeline (start -> today -> next milestones), a restrained rose accent.
   Markup: page-dem-ngay-yeu.php (inputs) + assets/js/ccdn-love-ui.js (result). Guide sections reuse .ccdn-hg-*.
   ========================================================================== */
.ccdn-ly { --ly: #BE123C; --ly-deep: #9F1239; --ly-soft: #FFF1F2; --ly-line: #FECDD3; }
.ccdn-ly [hidden] { display: none !important; }
.ccdn-ly-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; align-items: start; }
.ccdn-ly-opt { font-weight: 600; color: var(--ccdn-muted); }
.ccdn-ly-echo { margin: 6px 0 0; min-height: 1.4em; font-size: 14.5px; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-ly .ccdn-input { width: 100%; min-width: 0; }
.ccdn-ly-opts { margin-top: 14px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ccdn-ly-opts .ccdn-ly-conv { grid-column: 1 / -1; }
.ccdn-ly-conv, .ccdn-ly-feb { margin: 0; padding: 0; border: 0; min-width: 0; }
.ccdn-ly-conv legend, .ccdn-ly-feb legend { padding: 0; margin-bottom: 6px; } .ccdn-ly-conv legend a, .ccdn-ly-feb legend a { font-weight: 600; margin-left: 6px; color: var(--ccdn-primary); text-underline-offset: 2px; }
.ccdn-ly .ccdn-mode-option { height: auto; min-height: 44px; line-height: 1.3; font-size: 14.5px; }
.ccdn-ly-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ccdn-border); }
.ccdn-ly-bar .ccdn-chip { min-height: 40px; }
.ccdn-ly-remember { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-left: auto; font-size: 14.5px; font-weight: 700; color: var(--ccdn-ink); } .ccdn-ly-remember input { width: 18px; height: 18px; margin: 0; }
.ccdn-ly-saved { flex: 1 0 100%; font-size: 13.5px; color: var(--ccdn-muted); } .ccdn-ly-saved:empty { display: none; }
.ccdn-ly-privacy { margin: 10px 0 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-ly-note { margin: 12px 0 0; }
.ccdn-ly-result { margin-top: 22px; }
.ccdn-ly-empty { padding: 22px; border: 1px dashed var(--ly-line); border-radius: var(--ccdn-radius-md); background: var(--ly-soft); } .ccdn-ly-empty p { margin: 0 0 12px; color: var(--ccdn-body); }
.ccdn-ly-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ccdn-ly-story { border: 1px solid var(--ly-line); border-radius: var(--ccdn-radius-md); background: #FFFBFB; overflow: hidden; }
.ccdn-ly-hero { padding: 22px 26px 18px; border-bottom: 1px solid var(--ly-line); }
.ccdn-ly-who { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ly-deep); overflow-wrap: anywhere; }
.ccdn-ly-count { display: flex; align-items: baseline; gap: 14px; margin: 4px 0 6px; }
.ccdn-ly-count b { font-size: clamp(60px, 11vw, 112px); line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-ly-count span { font-size: clamp(18px, 3vw, 26px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ly); }
.ccdn-ly-ord { margin: 0 0 14px; max-width: 70ch; font-size: 16px; line-height: 1.55; color: var(--ccdn-body); } .ccdn-ly-ord strong { color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-ly-eq { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ly-line); }
.ccdn-ly-eq > div { padding: 12px 18px 4px 0; } .ccdn-ly-eq > div + div { padding-left: 18px; border-left: 1px solid var(--ly-line); }
.ccdn-ly-eq dt { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-ly-eq dd { margin: 3px 0 0; font-size: 19px; font-weight: 800; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; } .ccdn-ly-eq dd small { display: block; font-size: 13px; font-weight: 600; color: var(--ccdn-muted); }
/* the timeline */
.ccdn-ly-tl { position: relative; height: 236px; margin: 0; }
.ccdn-ly-track { position: absolute; left: 64px; right: 64px; top: 118px; height: 0; }
.ccdn-ly-rest { position: absolute; left: 0; right: 0; top: -1px; height: 0; border-top: 2px dashed #CBD5E1; }
.ccdn-ly-fill { position: absolute; top: -3px; height: 6px; border-radius: 3px; background: var(--ly); }
.ccdn-ly-tick { position: absolute; top: -8px; width: 0; height: 16px; border-left: 2px solid #94A3B8; }
.ccdn-ly-mk { list-style: none; margin: 0; padding: 0; position: absolute; left: 64px; right: 64px; top: 118px; height: 0; }
.ccdn-ly-m { position: absolute; left: var(--x); top: 0; width: 0; height: 0; }
.ccdn-ly-m .dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--ly); box-sizing: border-box; }
.ccdn-ly-m.is-past .dot { width: 14px; height: 14px; left: -7px; top: -7px; background: var(--ly); }
.ccdn-ly-m.is-today .dot { width: 24px; height: 24px; left: -12px; top: -12px; background: var(--ccdn-ink); border: 4px solid #FFFFFF; box-shadow: 0 0 0 2px var(--ccdn-ink); }
.ccdn-ly-m.is-next .dot { border-style: dashed; background: var(--ly-soft); }
.ccdn-ly-m .lb { position: absolute; left: 0; width: 128px; margin-left: -64px; text-align: center; top: 22px; line-height: 1.25; }
.ccdn-ly-m .lb b { display: block; font-size: 14px; font-weight: 800; color: var(--ccdn-ink); } .ccdn-ly-m .lb small { display: block; font-size: 12.5px; color: var(--ccdn-muted); font-variant-numeric: tabular-nums; }
.ccdn-ly-m.is-today .lb b { font-size: 15px; } .ccdn-ly-m .gap { display: none; }
.ccdn-ly-m[data-lane="1"] .lb { top: auto; bottom: 22px; } .ccdn-ly-m[data-lane="2"] .lb { top: 76px; } .ccdn-ly-m[data-lane="3"] .lb { top: auto; bottom: 76px; }
.ccdn-ly-m[data-lane="2"] .lb::before, .ccdn-ly-m[data-lane="3"] .lb::before { content: ""; position: absolute; left: 50%; width: 0; height: 52px; border-left: 1px solid #CBD5E1; }
.ccdn-ly-m[data-lane="2"] .lb::before { bottom: 100%; } .ccdn-ly-m[data-lane="3"] .lb::before { top: 100%; }
.ccdn-ly-m.is-compact .lb { display: none; }
/* ledger, past, all */
.ccdn-ly-next, .ccdn-ly-past { margin-top: 22px; } .ccdn-ly-next h3, .ccdn-ly-past h3 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-ly-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ccdn-ly-ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; padding: 14px 16px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: var(--ccdn-surface); }
.ccdn-ly-ledger li.is-first { border-left: 5px solid var(--ly); background: var(--ly-soft); }
.ccdn-ly-ledger .lab { display: block; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ly-deep); }
.ccdn-ly-ledger .when b { font-size: 20px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; } .ccdn-ly-ledger li:not(.is-first) .when b { font-size: 17px; }
.ccdn-ly-ledger .left { text-align: right; align-self: center; font-size: 15px; color: var(--ccdn-body); } .ccdn-ly-ledger .left strong { display: block; font-size: 20px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; } .ccdn-ly-ledger .left small { color: var(--ccdn-muted); }
.ccdn-ly-ledger li.is-today .left strong { color: var(--ly-deep); }
.ccdn-ly-ledger .alt { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-ly-ledger .acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; } .ccdn-ly-ledger .acts .ccdn-chip { min-height: 40px; text-decoration: none; display: inline-flex; align-items: center; }
.ccdn-ly-fine { margin: 10px 0 0; font-size: 13px; color: var(--ccdn-muted); } .ccdn-ly-small { font-size: 14px; color: var(--ccdn-muted); }
.ccdn-ly-past ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ccdn-ly-past li { display: grid; grid-template-columns: 190px auto 1fr; gap: 4px 14px; align-items: baseline; font-size: 15px; color: var(--ccdn-body); } .ccdn-ly-past li strong { color: var(--ccdn-ink); } .ccdn-ly-past li em { font-style: normal; color: var(--ccdn-muted); font-variant-numeric: tabular-nums; }
.ccdn-ly-month { margin: 12px 0 0; font-size: 15px; color: var(--ccdn-body); } .ccdn-ly-month span { font-weight: 700; color: var(--ccdn-muted); } .ccdn-ly-month strong { color: var(--ccdn-ink); }
.ccdn-ly-all { margin-top: 18px; border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); } .ccdn-ly-all summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--ccdn-primary); min-height: 44px; display: flex; align-items: center; } .ccdn-ly-all summary:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-ly-allwrap { padding: 0 16px 14px; overflow-x: auto; } .ccdn-ly-allwrap table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ccdn-ly-allwrap th, .ccdn-ly-allwrap td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ccdn-border); } .ccdn-ly-allwrap thead th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-ly-allwrap tr.is-past th, .ccdn-ly-allwrap tr.is-past td { color: var(--ccdn-muted); } .ccdn-ly-allwrap tr.is-major th { color: var(--ccdn-ink); }
.ccdn-ly-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ccdn-ly-remindrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--ccdn-ink); } .ccdn-ly-remindrow .ccdn-input { width: auto; min-width: 220px; }
/* guide components */
.ccdn-ly-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 16px 0; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; }
.ccdn-ly-vs-col { padding: 16px 20px; } .ccdn-ly-vs-col + .ccdn-ly-vs-col { border-left: 1px solid var(--ccdn-border-strong); background: var(--ccdn-bg); }
.ccdn-ly-vs h3 { margin: 0 0 8px !important; font-size: 17px !important; } .ccdn-ly-vs p { margin: 0 0 8px; font-size: 15px !important; } .ccdn-ly-vs ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-ly-years { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ccdn-ly-years li { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border: 1px solid var(--ccdn-border-strong); border-left: 4px solid var(--ly-deep, #9F1239); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); font-variant-numeric: tabular-nums; }
.ccdn-ly-years b { font-size: 15px; color: var(--ccdn-ink); } .ccdn-ly-years span { font-size: 15px; color: var(--ccdn-body); } .ccdn-ly-years em { font-style: normal; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-ly-edge h3 { margin: 22px 0 8px; font-size: 18px; color: var(--ccdn-ink); } .ccdn-ly-edge h3:first-child { margin-top: 4px; } .ccdn-ly-edge > p { max-width: 84ch; font-size: 16.5px; line-height: 1.65; color: var(--ccdn-body); }
.ccdn-ly-ics { margin: 10px 0 6px; padding: 14px 18px; overflow-x: auto; background: #0F172A; color: #E2E8F0; border-radius: var(--ccdn-radius-sm); font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ccdn-ly-privacy-box { padding: 14px 20px; border-left: 4px solid var(--ccdn-ink); background: var(--ccdn-bg); border-radius: 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0; } .ccdn-ly-privacy-box ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.6; color: var(--ccdn-body); } .ccdn-ly-privacy-box strong { color: var(--ccdn-ink); }
@media (max-width: 899px) {
  .ccdn-ly-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ccdn-ly-datef { grid-column: 1 / -1; }
  .ccdn-ly-opts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .ccdn-ly-row { grid-template-columns: minmax(0, 1fr); } .ccdn-ly-remember { margin-left: 0; flex: 1 0 100%; }
  .ccdn-ly-bar .ccdn-btn-primary { flex: 1 1 100%; order: -1; }
  .ccdn-ly-hero { padding: 18px 16px 14px; } .ccdn-ly-count { gap: 10px; }
  .ccdn-ly-eq { grid-template-columns: minmax(0, 1fr); } .ccdn-ly-eq > div, .ccdn-ly-eq > div + div { padding: 10px 0; border-left: 0; border-top: 1px solid var(--ly-line); } .ccdn-ly-eq > div:first-child { border-top: 0; }
  .ccdn-ly-tl { height: auto; padding: 16px 16px 6px; } .ccdn-ly-track, .ccdn-ly-tick { display: none; }
  .ccdn-ly-mk { position: relative; left: auto; right: auto; top: auto; height: auto; padding: 0 0 0 30px; }
  .ccdn-ly-mk::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 14px; border-left: 3px solid var(--ly-line); }
  .ccdn-ly-m { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 0 0 4px; }
  .ccdn-ly-m .dot { left: -30px; top: 2px; } .ccdn-ly-m.is-past .dot { left: -28px; top: 4px; } .ccdn-ly-m.is-today .dot { left: -32px; top: 0; }
  .ccdn-ly-m .lb, .ccdn-ly-m[data-lane] .lb { position: static; width: auto; margin: 0; text-align: left; } .ccdn-ly-m .lb::before { display: none; } .ccdn-ly-m.is-compact .lb { display: block; }
  .ccdn-ly-m .gap { display: block; margin: 2px 0 12px; font-size: 12.5px; color: var(--ccdn-muted); font-style: italic; }
  .ccdn-ly-ledger li { grid-template-columns: minmax(0, 1fr); } .ccdn-ly-ledger .left { text-align: left; }
  .ccdn-ly-past li { grid-template-columns: 1fr; }
  .ccdn-ly-vs { grid-template-columns: minmax(0, 1fr); } .ccdn-ly-vs-col + .ccdn-ly-vs-col { border-left: 0; border-top: 1px solid var(--ccdn-border-strong); }
  .ccdn-ly-years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccdn-ly-remindrow .ccdn-input { width: 100%; }
}
@media (max-width: 639px) { .ccdn-ly .ccdn-seg { flex-direction: column; align-items: stretch; } .ccdn-ly .ccdn-mode-option { width: 100%; } }
.ccdn-ly-ledger .roles { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ccdn-muted); }
.ccdn-ly-break { position: absolute; top: -13px; width: 40px; margin-left: -20px; height: 26px; line-height: 20px; text-align: center; font-style: normal; font-weight: 800; font-size: 20px; color: var(--ccdn-muted); background: #FFFBFB; letter-spacing: 2px; }
@media (max-width: 639px) { .ccdn-ly-break { display: none; } .ccdn-ly .ccdn-seg .ccdn-mode-option { justify-content: flex-start; } }
.ccdn-ly .ccdn-seg { height: auto; min-height: 46px; }
@media (max-width: 639px) { .ccdn-ly .ccdn-seg label + label { border-left: 0; border-top: 1px solid var(--ccdn-border-strong); } .ccdn-ly .ccdn-mode-option { justify-content: flex-start; padding: 8px 14px; text-align: left; } }
.ccdn-ly-tl { height: 276px; } .ccdn-ly-track, .ccdn-ly-mk { top: 138px; }
@media (max-width: 639px) { .ccdn-ly-tl { height: auto; } .ccdn-ly-mk { top: auto; } }
.ccdn-ly input[type="date"]:focus, .ccdn-ly input[type="date"]:focus-within, .ccdn-ly input[type="date"]:has(:focus) { outline: 3px solid var(--ccdn-primary); outline-offset: 1px; }

/* ==========================================================================
   TOOL-04 — Tính 49 ngày, 100 ngày, giỗ đầu, giỗ hết (.ccdn-mm-*).  Identity: a calm memorial ledger — a vertical spine of milestones, each with a
   Dương / Âm pair. Deep-teal accent on white/slate (no black page, no funeral imagery). Markup: page-tinh-49-100-ngay.php + assets/js/ccdn-memorial-ui.js.
   ========================================================================== */
.ccdn-mm { --mm: #0F766E; --mm-deep: #115E59; --mm-soft: #F0FDFA; --mm-line: #99F6E4; }
.ccdn-mm [hidden] { display: none !important; }
.ccdn-mm .ccdn-seg { height: auto; min-height: 46px; } .ccdn-mm .ccdn-mode-option { height: auto; min-height: 44px; line-height: 1.3; font-size: 14.5px; }
.ccdn-mm fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .ccdn-mm legend { padding: 0; margin-bottom: 6px; }
.ccdn-mm-kind { max-width: 420px; }
.ccdn-mm-selects { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; max-width: 640px; }
.ccdn-mm .ccdn-input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.ccdn-mm-lenhint { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-mm-conv { margin-top: 18px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: var(--ccdn-bg); }
.ccdn-mm-conv summary { cursor: pointer; padding: 12px 16px; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ccdn-ink); min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; } .ccdn-mm-conv summary a { font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ccdn-primary); }
.ccdn-mm-conv summary:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-mm-convgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 4px 16px 16px; align-items: start; }
.ccdn-mm-early { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ccdn-ink); } .ccdn-mm-early input { width: 18px; height: 18px; margin: 0; } .ccdn-mm-early span { font-weight: 600; color: var(--ccdn-muted); }
.ccdn-mm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ccdn-border); }
.ccdn-mm-privacy { margin: 10px 0 0; font-size: 13.5px; color: var(--ccdn-muted); } .ccdn-mm-note { margin: 12px 0 0; }
.ccdn-mm-result { margin-top: 24px; }
.ccdn-mm-empty { padding: 20px 22px; border: 1px dashed var(--mm-line); border-radius: var(--ccdn-radius-md); background: var(--mm-soft); } .ccdn-mm-empty p { margin: 0; color: var(--ccdn-body); }
.ccdn-mm-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--mm-line); border-radius: var(--ccdn-radius-md); background: var(--mm-soft); overflow: hidden; }
.ccdn-mm-head > div { padding: 14px 20px; } .ccdn-mm-head > div + div { border-left: 1px solid var(--mm-line); }
.ccdn-mm-head .k, .ccdn-mm-d .k { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-mm-head b { display: block; margin-top: 2px; font-size: 20px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-mm-nextbar { margin: 14px 0 4px; padding: 10px 16px; border-left: 4px solid var(--mm); background: var(--mm-soft); font-size: 15.5px; color: var(--ccdn-body); } .ccdn-mm-nextbar span { font-weight: 800; color: var(--mm-deep); } .ccdn-mm-nextbar strong { color: var(--ccdn-ink); } .ccdn-mm-nextbar.is-done { border-left-color: #94A3B8; background: var(--ccdn-bg); }
.ccdn-mm-tl { list-style: none; margin: 18px 0 0; padding: 0 0 0 40px; position: relative; }
.ccdn-mm-tl::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 14px; border-left: 2px solid #CBD5E1; }
.ccdn-mm-e { position: relative; margin: 0 0 16px; }
.ccdn-mm-node { position: absolute; left: -38px; top: 14px; width: 16px; height: 16px; box-sizing: border-box; border: 3px solid var(--mm); background: #FFFFFF; transform: rotate(45deg); }
.ccdn-mm-e.st-past .ccdn-mm-node { background: var(--mm); } .ccdn-mm-e.st-today .ccdn-mm-node { background: var(--ccdn-ink); border-color: var(--ccdn-ink); box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--ccdn-ink); }
.ccdn-mm-e.is-start .ccdn-mm-node { background: var(--ccdn-ink); border-color: var(--ccdn-ink); } .ccdn-mm-e.is-next .ccdn-mm-node { width: 20px; height: 20px; left: -40px; top: 12px; box-shadow: 0 0 0 4px var(--mm-line); }
.ccdn-mm-body { padding: 14px 18px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: var(--ccdn-surface); }
.ccdn-mm-e.is-next .ccdn-mm-body { border-left: 5px solid var(--mm); background: var(--mm-soft); }
.ccdn-mm-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-bottom: 8px; } .ccdn-mm-h h3 { margin: 0; font-size: 18px; color: var(--ccdn-ink); }
.ccdn-mm-st { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 800; border: 1px solid var(--ccdn-border-strong); background: var(--ccdn-bg); color: var(--ccdn-body); }
.ccdn-mm-st.is-future { background: var(--mm-soft); border-color: var(--mm-line); color: var(--mm-deep); } .ccdn-mm-st.is-today { background: var(--ccdn-ink); border-color: var(--ccdn-ink); color: #FFFFFF; }
.ccdn-mm-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.ccdn-mm-d { padding: 4px 0 8px; min-width: 0; } .ccdn-mm-d + .ccdn-mm-d { padding-left: 20px; border-left: 1px solid var(--ccdn-border); }
.ccdn-mm-d b { display: block; margin-top: 2px; font-size: 26px; line-height: 1.15; font-weight: 800; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ccdn-mm-d small { display: block; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-mm-basis { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ccdn-body); } .ccdn-mm-basis strong { color: var(--ccdn-ink); }
.ccdn-mm-notes { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ccdn-body); } .ccdn-mm-notes strong { color: var(--ccdn-ink); }
.ccdn-mm-warn { margin: 6px 0 0; padding: 8px 12px; border-left: 4px solid var(--ccdn-warning); background: #FFFBEB; font-size: 14.5px; color: #7C2D12; }
.ccdn-mm-gap { margin: 8px 0 0; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-mm-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ccdn-mm-acts .ccdn-chip { min-height: 40px; }
.ccdn-mm-that { margin: 10px 0 2px; } .ccdn-mm-thathead { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-mm-that ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ccdn-mm-that li { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); font-variant-numeric: tabular-nums; text-align: center; }
.ccdn-mm-that li b { font-size: 16px; color: var(--ccdn-ink); } .ccdn-mm-that li span { font-size: 13.5px; color: var(--ccdn-body); } .ccdn-mm-that li small { font-size: 12.5px; color: var(--ccdn-muted); } .ccdn-mm-that li em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--mm-deep); }
.ccdn-mm-that li.is-last { border: 2px solid var(--mm); background: var(--mm-soft); } .ccdn-mm-that li.st-past { background: var(--ccdn-bg); }
.ccdn-mm-years { margin-top: 22px; } .ccdn-mm-years h3 { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-mm-small { margin: 4px 0 8px; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-mm-ywrap { overflow-x: auto; } .ccdn-mm-ywrap table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ccdn-mm-ywrap th, .ccdn-mm-ywrap td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ccdn-border); vertical-align: top; } .ccdn-mm-ywrap thead th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); border-bottom: 2px solid var(--ccdn-border-strong); }
.ccdn-mm-ywrap tr.is-past th, .ccdn-mm-ywrap tr.is-past td { color: var(--ccdn-muted); } .ccdn-mm-ywrap tr.is-major th, .ccdn-mm-ywrap tr.is-major td { background: var(--mm-soft); } .ccdn-mm-ywrap tr.is-miss td { color: var(--ccdn-muted); font-style: italic; }
.ccdn-mm-acts2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ccdn-mm-remindrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--ccdn-ink); } .ccdn-mm-remindrow .ccdn-input { width: auto; min-width: 230px; }
/* guide components */
.ccdn-mm-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; }
.ccdn-mm-vs > div { padding: 16px 20px; } .ccdn-mm-vs > div + div { border-left: 1px solid var(--ccdn-border-strong); background: var(--ccdn-bg); }
.ccdn-mm-vs h3 { margin: 0 0 8px !important; font-size: 17px !important; } .ccdn-mm-vs p { margin: 0 0 8px; font-size: 15px !important; } .ccdn-mm-vs ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-mm-leap { padding: 16px 20px; border: 1px solid var(--ccdn-border-strong); border-left: 5px solid var(--mm); border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; background: var(--ccdn-surface); } .ccdn-mm-leap h3 { margin: 0 0 8px !important; font-size: 18px !important; }
.ccdn-mm-leap ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.6; color: var(--ccdn-body); } .ccdn-mm-leap strong { color: var(--ccdn-ink); }
.ccdn-mm-src { width: 100%; margin: 14px 0 6px; border-collapse: collapse; font-size: 15px; } .ccdn-mm-src th, .ccdn-mm-src td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--ccdn-border); line-height: 1.5; color: var(--ccdn-body); }
.ccdn-mm-src thead th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); border-bottom: 2px solid var(--ccdn-border-strong); } .ccdn-mm-src tbody th { font-weight: 700; color: var(--ccdn-ink); width: 24%; } .ccdn-mm-src a { color: var(--ccdn-primary); overflow-wrap: anywhere; }
.ccdn-mm-ev { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; border: 1px solid var(--ccdn-border-strong); } .ccdn-mm-ev.is-read { background: var(--mm-soft); border-color: var(--mm-line); color: var(--mm-deep); } .ccdn-mm-ev.is-snip { background: #FFFBEB; border-color: #FCD34D; color: #7C2D12; }
.ccdn-mm-lunartl { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ccdn-mm-lunartl li { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border: 1px solid var(--ccdn-border-strong); border-top: 4px solid var(--mm); border-radius: var(--ccdn-radius-sm); background: var(--ccdn-surface); font-variant-numeric: tabular-nums; } .ccdn-mm-lunartl b { font-size: 15px; color: var(--ccdn-ink); } .ccdn-mm-lunartl span { font-size: 15px; color: var(--ccdn-body); } .ccdn-mm-lunartl em { font-style: normal; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-mm-ics { margin: 10px 0 6px; padding: 14px 18px; overflow-x: auto; background: #0F172A; color: #E2E8F0; border-radius: var(--ccdn-radius-sm); font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ccdn-mm input[type="date"]:focus-within { outline: 3px solid var(--ccdn-primary); outline-offset: 1px; }
@media (max-width: 899px) { .ccdn-mm-convgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) {
  .ccdn-mm .ccdn-seg { flex-direction: column; align-items: stretch; } .ccdn-mm .ccdn-seg label + label { border-left: 0; border-top: 1px solid var(--ccdn-border-strong); } .ccdn-mm .ccdn-mode-option { width: 100%; justify-content: flex-start; padding: 8px 14px; text-align: left; }
  .ccdn-mm-selects { grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; } .ccdn-mm .ccdn-input { padding-left: 8px; padding-right: 4px; font-size: 15px; }
  #ccdn-mm-lunar { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); } #ccdn-mm-lunar .ccdn-field:nth-child(2) { grid-column: 1 / -1; order: 3; } #ccdn-mm-lunar .ccdn-field:nth-child(3) { order: 2; } #ccdn-mm-lunar .ccdn-mm-lenhint { order: 4; }
  .ccdn-mm-bar .ccdn-btn-primary { flex: 1 1 100%; }
  .ccdn-mm-head { grid-template-columns: minmax(0, 1fr); } .ccdn-mm-head > div + div { border-left: 0; border-top: 1px solid var(--mm-line); }
  .ccdn-mm-tl { padding-left: 34px; } .ccdn-mm-node { left: -32px; } .ccdn-mm-e.is-next .ccdn-mm-node { left: -34px; } .ccdn-mm-body { padding: 12px 14px 10px; }
  .ccdn-mm-d b { font-size: 21px; } .ccdn-mm-d + .ccdn-mm-d { padding-left: 14px; } .ccdn-mm-dates { gap: 0 14px; }
  .ccdn-mm-that ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ccdn-mm-vs { grid-template-columns: minmax(0, 1fr); } .ccdn-mm-vs > div + div { border-left: 0; border-top: 1px solid var(--ccdn-border-strong); }
  .ccdn-mm-remindrow .ccdn-input { width: 100%; } .ccdn-mm-lunartl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .ccdn-mm-ywrap table, .ccdn-mm-ywrap tbody, .ccdn-mm-ywrap tr, .ccdn-mm-ywrap th, .ccdn-mm-ywrap td { display: block; width: 100%; box-sizing: border-box; }
  .ccdn-mm-ywrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-mm-ywrap tr { padding: 10px 0; border-bottom: 1px solid var(--ccdn-border); } .ccdn-mm-ywrap th, .ccdn-mm-ywrap td { padding: 2px 0; border: 0; }
  .ccdn-mm-ywrap tbody th { font-size: 16px; color: var(--ccdn-ink); }
  .ccdn-mm-ywrap td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ccdn-muted); font-size: 13.5px; }
  .ccdn-mm-ywrap tr.is-major { padding-left: 8px; border-left: 4px solid var(--mm); background: var(--mm-soft); } .ccdn-mm-ywrap tr.is-miss td { padding-top: 4px; }
}
@media (max-width: 639px) {
  .ccdn-mm-src, .ccdn-mm-src tbody, .ccdn-mm-src tr, .ccdn-mm-src th, .ccdn-mm-src td { display: block; width: 100% !important; box-sizing: border-box; }
  .ccdn-mm-src thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-mm-src tr { padding: 12px 0; border-bottom: 1px solid var(--ccdn-border); } .ccdn-mm-src th, .ccdn-mm-src td { padding: 2px 0; border: 0; }
  .ccdn-mm-src td[data-label]::before { content: attr(data-label) ": "; font-weight: 800; color: var(--ccdn-muted); font-size: 13.5px; }
}
@media (max-width: 639px) {
  .ccdn-mm-dates { grid-template-columns: minmax(0, 1fr); gap: 0; } .ccdn-mm-d + .ccdn-mm-d { padding-left: 0; border-left: 0; border-top: 1px solid var(--ccdn-border); padding-top: 8px; }
  .ccdn-mm-d b { font-size: 22px; overflow-wrap: normal; }
}
/* TOOL-04.1 — day-30 exceptional state: calendar facts vs customary conventions kept visibly apart */
.ccdn-mm-tag { display: inline-block; padding: 1px 9px; margin-right: 4px; border-radius: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; border: 1px solid var(--ccdn-border-strong); }
.ccdn-mm-tag.is-fact { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; } .ccdn-mm-tag.is-custom { background: #F5F3FF; border-color: #DDD6FE; color: #4C1D95; } .ccdn-mm-tag.is-nosrc { background: #FFFBEB; border-color: #FCD34D; color: #7C2D12; }
.ccdn-mm-st.is-choose { background: #FFFBEB; border-color: #FCD34D; color: #7C2D12; }
.ccdn-mm-e.is-dau:has(.is-choose) .ccdn-mm-node, .ccdn-mm-e.is-het:has(.is-choose) .ccdn-mm-node { border-color: #B45309; background: #FFFBEB; }
.ccdn-mm-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 10px; }
.ccdn-mm-opt { padding: 10px 14px; border: 1px dashed #D97706; border-radius: var(--ccdn-radius-sm); background: #FFFBEB; } .ccdn-mm-opt .k { display: block; font-size: 12.5px; font-weight: 800; color: #7C2D12; } .ccdn-mm-opt b { display: block; margin-top: 2px; font-size: 22px; line-height: 1.2; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; } .ccdn-mm-opt small { display: block; font-size: 14px; color: var(--ccdn-body); }
.ccdn-mm-nextbar.is-choose { border-left-color: #D97706; background: #FFFBEB; } .ccdn-mm-nextbar.is-choose span { color: #7C2D12; }
.ccdn-mm-ywrap tr.is-choose td { background: #FFFBEB; }
@media (max-width: 639px) { .ccdn-mm-opts { grid-template-columns: minmax(0, 1fr); } }
.ccdn-mm-cl { display: inline-block; padding: 0 8px; margin-right: 2px; border-radius: 4px; font-size: 12.5px; font-weight: 800; line-height: 1.6; border: 1px solid var(--ccdn-border-strong); vertical-align: 1px; white-space: nowrap; }
.ccdn-mm-cl.is-fact { background: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; } .ccdn-mm-cl.is-custom { background: var(--mm-soft, #F0FDFA); border-color: #99F6E4; color: #115E59; } .ccdn-mm-cl.is-source { background: #FFFBEB; border-color: #FCD34D; color: #7C2D12; } .ccdn-mm-cl.is-product { background: #F5F3FF; border-color: #DDD6FE; color: #4C1D95; }
.ccdn-mm-legend { margin: 14px 0; padding: 14px 18px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: var(--ccdn-bg); } .ccdn-mm-legend p { margin: 0 0 6px; } .ccdn-mm-legend ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; line-height: 1.55; color: var(--ccdn-body); }
.ccdn-mm-matrix { font-size: 14px; } .ccdn-mm-matrix th, .ccdn-mm-matrix td { padding-right: 12px; } .ccdn-mm-matrix small { color: var(--ccdn-muted); } .ccdn-mm-claims tbody th { width: 62%; }
@media (max-width: 639px) { .ccdn-mm-matrix td::before, .ccdn-mm-claims td::before { content: attr(data-label) ": "; font-weight: 800; color: var(--ccdn-muted); font-size: 13.5px; } .ccdn-mm-claims tbody th { width: 100% !important; } }

/* ==========================================================================
   TOOL-05 — Tính tuổi nghỉ hưu (.ccdn-rt-*).  Identity: a statutory ROADMAP — a route with stations (sinh → hôm nay → đủ tuổi → nghỉ hưu) and a staircase of the
   legal schedule. Deep indigo on white with an amber "today"; restrained, no dashboard clutter. Markup: page-tinh-tuoi-nghi-huu.php + assets/js/ccdn-retire-ui.js.
   ========================================================================== */
.ccdn-rt { --rt: #3730A3; --rt-deep: #312E81; --rt-soft: #EEF2FF; --rt-line: #C7D2FE; --rt-amber: #B45309; --rt-amber-soft: #FFFBEB; }
.ccdn-rt [hidden] { display: none !important; }
.ccdn-rt .ccdn-seg { height: auto; min-height: 46px; } .ccdn-rt .ccdn-mode-option { height: auto; min-height: 44px; line-height: 1.3; font-size: 15px; }
.ccdn-rt fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .ccdn-rt legend { padding: 0; margin-bottom: 6px; }
.ccdn-rt-sexset { max-width: 460px; }
.ccdn-rt-selects { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; max-width: 460px; }
.ccdn-rt .ccdn-input { width: 100%; min-width: 0; }
.ccdn-rt-only { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ccdn-ink); max-width: 640px; } .ccdn-rt-only input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; } .ccdn-rt-only .t { display: block; line-height: 1.45; } .ccdn-rt-only em { font-style: normal; font-weight: 600; color: var(--ccdn-muted); }
.ccdn-rt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ccdn-border); }
.ccdn-rt-privacy { margin: 10px 0 0; font-size: 13.5px; color: var(--ccdn-muted); max-width: 720px; } .ccdn-rt-note { margin: 12px 0 0; }
.ccdn-rt-result { margin-top: 24px; } .ccdn-rt-basis { margin: 18px 0 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-rt-empty { padding: 20px 22px; border: 1px dashed var(--rt-line); border-radius: var(--ccdn-radius-md); background: var(--rt-soft); } .ccdn-rt-empty p { margin: 0; color: var(--ccdn-body); }
.ccdn-rt-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--rt-line); border-radius: var(--ccdn-radius-md); background: var(--rt-soft); overflow: hidden; }
.ccdn-rt-hero .main { padding: 18px 22px; } .ccdn-rt-hero .k, .ccdn-rt-three .k, .ccdn-rt-stn .k { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-rt-hero .main b { display: block; margin: 2px 0; font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--rt-deep); font-variant-numeric: tabular-nums; } .ccdn-rt-hero .main small { font-size: 14px; color: var(--ccdn-body); }
.ccdn-rt-hero .side { margin: 0; padding: 14px 20px; border-left: 1px solid var(--rt-line); display: grid; align-content: center; gap: 10px; } .ccdn-rt-hero .side dt { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); } .ccdn-rt-hero .side dd { margin: 1px 0 0; font-size: 21px; font-weight: 800; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-rt-status { margin: 14px 0 6px; padding: 10px 16px; border-left: 4px solid var(--rt); background: var(--rt-soft); font-size: 15.5px; color: var(--ccdn-body); } .ccdn-rt-status strong { color: var(--ccdn-ink); }
.ccdn-rt-status.is-now { border-left-color: var(--rt-amber); background: var(--rt-amber-soft); } .ccdn-rt-status.is-past { border-left-color: #94A3B8; background: var(--ccdn-bg); }
.ccdn-rt-st { display: inline-block; margin-right: 6px; padding: 1px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 800; border: 1px solid var(--rt-line); background: #FFFFFF; color: var(--rt-deep); } .is-now .ccdn-rt-st { border-color: #FCD34D; color: #7C2D12; } .is-past .ccdn-rt-st { border-color: var(--ccdn-border-strong); color: var(--ccdn-body); }
/* the route */
.ccdn-rt-rail { list-style: none; margin: 22px 0 8px; padding: 26px 0 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.ccdn-rt-rail::before { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 6px; border-radius: 3px; background: #E2E8F0; }
.ccdn-rt-rail::after { content: ""; position: absolute; left: 10px; top: 9px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--rt-line), var(--rt)); width: calc((100% - 20px) * var(--p, 0%) / 100%); }
.ccdn-rt-stn { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 4px; }
.ccdn-rt-pin { position: absolute; left: 0; top: -26px; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; border: 4px solid var(--rt); background: #FFFFFF; z-index: 1; }
.ccdn-rt-stn.is-today .ccdn-rt-pin { border-color: var(--rt-amber); background: var(--rt-amber); box-shadow: 0 0 0 4px var(--rt-amber-soft); } .ccdn-rt-stn.is-end .ccdn-rt-pin { background: var(--rt); border-radius: 6px; transform: rotate(45deg); }
.ccdn-rt-stn b { font-size: 17px; line-height: 1.3; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ccdn-rt-stn small { font-size: 13.5px; color: var(--ccdn-muted); line-height: 1.4; }
/* why / three / scenarios / stairs */
.ccdn-rt-why, .ccdn-rt-three, .ccdn-rt-scen, .ccdn-rt-stairs { margin-top: 22px; } .ccdn-rt-why h3, .ccdn-rt-three h3, .ccdn-rt-scen h3, .ccdn-rt-stairs h3 { margin: 0 0 8px; font-size: 18px; color: var(--ccdn-ink); } .ccdn-rt-why p, .ccdn-rt-scen p { margin: 8px 0; font-size: 15.5px; line-height: 1.65; color: var(--ccdn-body); }
.ccdn-rt-trywrap { overflow-x: auto; } .ccdn-rt-try { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ccdn-rt-try th, .ccdn-rt-try td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ccdn-border); vertical-align: top; color: var(--ccdn-body); } .ccdn-rt-try thead th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); border-bottom: 2px solid var(--ccdn-border-strong); } .ccdn-rt-try tbody th { color: var(--ccdn-ink); }
.ccdn-rt-try tr.is-hit th, .ccdn-rt-try tr.is-hit td { background: var(--rt-soft); color: var(--ccdn-ink); } .ccdn-rt-try tr.is-skip td { color: var(--ccdn-muted); font-style: italic; } .ccdn-rt-try small { color: var(--ccdn-muted); }
.ccdn-rt-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; } .ccdn-rt-cols > div { padding: 14px 18px; } .ccdn-rt-cols > div + div { border-left: 1px solid var(--ccdn-border-strong); }
.ccdn-rt-cols > div:nth-child(2) { background: var(--rt-soft); } .ccdn-rt-cols b { display: block; margin: 2px 0 4px; font-size: 19px; line-height: 1.25; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; } .ccdn-rt-cols small { display: block; font-size: 13.5px; line-height: 1.5; color: var(--ccdn-body); }
.ccdn-rt-bound { margin: 10px 0 0; padding: 10px 14px; border-left: 4px solid var(--rt-amber); background: var(--rt-amber-soft); font-size: 14.5px; line-height: 1.6; color: #7C2D12; }
.ccdn-rt-small { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ccdn-muted); }
.ccdn-rt-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ccdn-rt-steps li { display: grid; grid-template-columns: 82px minmax(0, 1fr) 136px; align-items: center; gap: 10px; padding: 4px 8px; border-radius: var(--ccdn-radius-sm); font-variant-numeric: tabular-nums; position: relative; } .ccdn-rt-steps .y { font-weight: 800; color: var(--ccdn-ink); font-size: 15px; } .ccdn-rt-steps .a { font-size: 15px; color: var(--ccdn-body); white-space: nowrap; }
.ccdn-rt-steps .bar { display: block; height: 12px; border-radius: 6px; background: #E2E8F0; overflow: hidden; } .ccdn-rt-steps .bar i { display: block; height: 100%; border-radius: 6px; background: #A5B4FC; }
.ccdn-rt-steps li.is-cap .bar i { background: #6366F1; } .ccdn-rt-steps li.is-me { background: var(--rt-amber-soft); outline: 2px solid #FCD34D; } .ccdn-rt-steps li.is-me .bar i { background: var(--rt-amber); } .ccdn-rt-steps em { position: absolute; right: 150px; top: -10px; padding: 0 8px; border-radius: 4px; background: var(--rt-amber); color: #FFFFFF; font-size: 12px; font-style: normal; font-weight: 800; }
.ccdn-rt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ccdn-rt-before { padding: 18px 22px; border: 1px solid var(--ccdn-border-strong); border-left: 5px solid #94A3B8; border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; background: var(--ccdn-bg); } .ccdn-rt-before h3 { margin: 6px 0; font-size: 20px; color: var(--ccdn-ink); } .ccdn-rt-before p { margin: 0; color: var(--ccdn-body); line-height: 1.6; }
.ccdn-rt input:focus-visible, .ccdn-rt select:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
/* guide components */
.ccdn-rt-cohort { width: 100%; margin: 10px 0 4px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; } .ccdn-rt-cohort th, .ccdn-rt-cohort td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ccdn-border); vertical-align: top; color: var(--ccdn-body); line-height: 1.5; } .ccdn-rt-cohort thead th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); border-bottom: 2px solid var(--ccdn-border-strong); } .ccdn-rt-cohort tbody th { color: var(--ccdn-ink); } .ccdn-rt-cohort tr.is-plateau th, .ccdn-rt-cohort tr.is-plateau td { background: var(--rt-soft); }
.ccdn-rt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 12px 0; align-items: start; } .ccdn-rt-two > div { min-width: 0; } .ccdn-rt-two h3 { margin: 0 0 6px !important; font-size: 17px !important; }
.ccdn-rt-formula { margin: 14px 0; padding: 14px 18px; border: 1px solid var(--rt-line); border-radius: var(--ccdn-radius-md); background: var(--rt-soft); font-size: 16px; line-height: 1.7; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; } .ccdn-rt-formula code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14.5px; }
@media (max-width: 899px) { .ccdn-rt-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) {
  .ccdn-rt-cols { grid-template-columns: minmax(0, 1fr); } .ccdn-rt-cols > div + div { border-left: 0; border-top: 1px solid var(--ccdn-border-strong); }
  .ccdn-rt-rail { grid-template-columns: minmax(0, 1fr); gap: 16px 0; padding: 0 0 0 40px; margin-left: 2px; }
  .ccdn-rt-rail::before { left: 11px; right: auto; top: 12px; bottom: 12px; width: 6px; height: auto; }
  .ccdn-rt-rail::after { left: 11px; top: 12px; width: 6px; height: calc((100% - 24px) * var(--p, 0%) / 100%); background: linear-gradient(180deg, var(--rt-line), var(--rt)); }
  .ccdn-rt-pin { left: -40px; top: 2px; }
  .ccdn-rt-hero { grid-template-columns: minmax(0, 1fr); } .ccdn-rt-hero .side { border-left: 0; border-top: 1px solid var(--rt-line); } .ccdn-rt-hero .main b { font-size: 34px; }
  .ccdn-rt-steps li { grid-template-columns: 76px minmax(0, 1fr) 118px; gap: 8px; } .ccdn-rt-steps em { right: 128px; }
}
@media (max-width: 639px) {
  .ccdn-rt .ccdn-seg { flex-direction: column; align-items: stretch; } .ccdn-rt .ccdn-seg label + label { border-left: 0; border-top: 1px solid var(--ccdn-border-strong); } .ccdn-rt .ccdn-mode-option { width: 100%; justify-content: flex-start; padding: 8px 14px; text-align: left; }
  .ccdn-rt-bar .ccdn-btn-primary { flex: 1 1 100%; }
  .ccdn-rt-try, .ccdn-rt-try tbody, .ccdn-rt-try tr, .ccdn-rt-try th, .ccdn-rt-try td { display: block; width: 100%; box-sizing: border-box; }
  .ccdn-rt-try thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ccdn-rt-try tr { padding: 10px 0; border-bottom: 1px solid var(--ccdn-border); } .ccdn-rt-try th, .ccdn-rt-try td { padding: 2px 0; border: 0; }
  .ccdn-rt-try td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ccdn-muted); font-size: 13.5px; }
  .ccdn-rt-cohort, .ccdn-rt-cohort tbody, .ccdn-rt-cohort tr, .ccdn-rt-cohort th, .ccdn-rt-cohort td { display: block; width: 100%; box-sizing: border-box; } .ccdn-rt-cohort thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ccdn-rt-cohort tr { padding: 10px 0; border-bottom: 1px solid var(--ccdn-border); } .ccdn-rt-cohort th, .ccdn-rt-cohort td { padding: 2px 0; border: 0; } .ccdn-rt-cohort td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ccdn-muted); font-size: 13.5px; }
}

/* ==========================================================================
   TOOL-06 — Tính tuổi em bé (.ccdn-bb-*).  Identity: "nhật ký lớn lên" — a GROWTH RULER, the height chart on a door frame: ticks, a dated "hôm nay" flag,
   horizontal on wide screens and vertical on phones. Warm cream, forest green, one amber marker. No cartoon, no gender colours, no decoration without a job.
   Markup: page-tinh-tuoi-em-be.php + assets/js/ccdn-baby-ui.js.
   ========================================================================== */
.ccdn-bb { --bb: #15803D; --bb-deep: #14532D; --bb-cream: #FFF9EC; --bb-line: #EAD9AE; --bb-amber: #D97706; --bb-amber-deep: #92400E; --bb-tick: #CBB98A; }
.ccdn-bb [hidden] { display: none !important; }
.ccdn-bb .ccdn-seg { height: auto; min-height: 46px; } .ccdn-bb .ccdn-mode-option { height: auto; min-height: 44px; line-height: 1.3; font-size: 15px; }
.ccdn-bb fieldset { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; } .ccdn-bb legend { padding: 0; margin-bottom: 6px; }
.ccdn-bb-selects { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; max-width: 520px; } .ccdn-bb-asof .ccdn-seg { max-width: 360px; } .ccdn-bb-asof .ccdn-bb-selects { margin-top: 12px; }
.ccdn-bb .ccdn-input { width: 100%; min-width: 0; } .ccdn-bb select:focus-visible, .ccdn-bb input:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-bb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--ccdn-border); }
.ccdn-bb-privacy { margin: 10px 0 0; font-size: 13.5px; color: var(--ccdn-muted); max-width: 720px; } .ccdn-bb-note { margin: 12px 0 0; }
.ccdn-bb-result { margin-top: 24px; }
.ccdn-bb-empty { padding: 20px 22px; border: 1px dashed var(--bb-line); border-radius: var(--ccdn-radius-md); background: var(--bb-cream); } .ccdn-bb-empty p { margin: 0; color: var(--ccdn-body); }
.ccdn-bb-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--bb-line); border-radius: var(--ccdn-radius-md); background: var(--bb-cream); overflow: hidden; } .ccdn-bb-hero .main { padding: 18px 22px 16px; }
.ccdn-bb-heroside { margin: 0; padding: 16px 20px; border-left: 1px solid var(--bb-line); display: grid; align-content: center; gap: 12px; } .ccdn-bb-heroside dt { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); } .ccdn-bb-heroside dd { margin: 1px 0 0; font-size: 18px; font-weight: 800; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-bb-when { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-bb-age { margin: 4px 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; font-size: 22px; font-weight: 600; color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-bb-part b { font-size: 34px; font-weight: 800; color: var(--bb-deep); line-height: 1.1; } .ccdn-bb-part.is-lead b { font-size: 60px; } .ccdn-bb-part.is-lead { font-size: 26px; }
.ccdn-bb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ccdn-bb-chips li { display: flex; flex-direction: column; padding: 7px 14px; border: 1px solid var(--bb-line); border-radius: 12px; background: #FFFFFF; min-width: 0; } .ccdn-bb-chips .k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); } .ccdn-bb-chips b { font-size: 17px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-bb-expl { margin: 12px 0 4px; padding: 10px 16px; border-left: 4px solid var(--bb); background: #F0FDF4; font-size: 15.5px; line-height: 1.55; color: var(--ccdn-body); } .ccdn-bb-expl strong { color: var(--ccdn-ink); }
.ccdn-bb-rulerwrap, .ccdn-bb-next, .ccdn-bb-bday, .ccdn-bb-detail { margin-top: 24px; } .ccdn-bb-rulerwrap h3, .ccdn-bb-next h3, .ccdn-bb-bday h3, .ccdn-bb-detail h3 { margin: 0 0 8px; font-size: 18px; color: var(--ccdn-ink); }
/* the growth ruler — horizontal */
.ccdn-bb-ruler { position: relative; padding: 56px 10px 0; }
.ccdn-bb-ruler > ol { list-style: none; margin: 0; padding: 0; position: relative; height: 112px; }
.ccdn-bb-ruler > ol::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; border: 1px solid var(--bb-line); border-radius: 9px; background: repeating-linear-gradient(90deg, transparent 0 11px, var(--bb-tick) 11px 12px) bottom / 100% 8px no-repeat, #FBF1D6; }
.ccdn-bb-ruler > ol::after { content: ""; position: absolute; left: 0; top: 0; height: 18px; width: var(--pos); border-radius: 9px; background: linear-gradient(90deg, #86EFAC, var(--bb)); opacity: .9; }
.ccdn-bb-ruler li { position: absolute; top: 0; left: var(--at); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; width: 112px; z-index: 1; }
.ccdn-bb-ruler li.is-first { transform: translateX(-12px); align-items: flex-start; text-align: left; } .ccdn-bb-ruler li:last-child { transform: translateX(-100%); align-items: flex-end; text-align: right; }
.ccdn-bb-ruler .tick { display: block; width: 4px; height: 30px; border-radius: 2px; background: var(--bb-tick); } .ccdn-bb-ruler li.st-past .tick { background: var(--bb-deep); } .ccdn-bb-ruler li.st-today .tick { background: var(--bb-amber); width: 6px; }
.ccdn-bb-ruler li.is-first .tick { margin-left: 10px; } .ccdn-bb-ruler li:last-child .tick { margin-right: 10px; }
.ccdn-bb-ruler .lab { margin-top: 4px; font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--ccdn-ink); } .ccdn-bb-ruler .dt { font-size: 13.5px; color: var(--ccdn-body); font-variant-numeric: tabular-nums; } .ccdn-bb-ruler .ns { font-size: 13px; color: var(--ccdn-muted); line-height: 1.3; }
.ccdn-bb-ruler li.st-future .lab { font-weight: 700; }
.ccdn-bb-ruler li.ccdn-bb-flag { position: absolute; top: -46px; left: min(max(var(--pos), 14%), 86%); transform: translateX(-50%); z-index: 3; width: auto; padding: 5px 12px; border-radius: 10px; background: #B45309; color: #FFFFFF; font-size: 13.5px; line-height: 1.25; text-align: center; white-space: nowrap; box-shadow: 0 1px 0 rgba(0,0,0,.15); display: block; }
.ccdn-bb-ruler li.ccdn-bb-now { display: none; } .ccdn-bb-flag b { font-weight: 800; } .ccdn-bb-ruler li.ccdn-bb-flag::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #B45309; }
.ccdn-bb-small { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ccdn-muted); }
.ccdn-bb-nextline { margin: 0 0 6px; font-size: 16.5px; line-height: 1.55; color: var(--ccdn-body); } .ccdn-bb-nextline strong { color: var(--ccdn-ink); } .ccdn-bb-days { font-weight: 800; color: var(--bb-deep); }
.ccdn-bb-recent { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ccdn-body); }
.ccdn-bb-dl { margin: 0; display: grid; gap: 0; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); overflow: hidden; } .ccdn-bb-dl > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 16px; padding: 10px 16px; } .ccdn-bb-dl > div + div { border-top: 1px solid var(--ccdn-border); }
.ccdn-bb-dl dt { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); padding-top: 2px; } .ccdn-bb-dl dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; } .ccdn-bb-dl small { font-size: 13.5px; font-weight: 500; color: var(--ccdn-muted); }
.ccdn-bb-feb { margin: 10px 0 0; padding: 10px 14px; border-left: 4px solid var(--bb-amber); background: #FFFBEB; font-size: 14.5px; line-height: 1.6; color: #7C2D12; }
.ccdn-bb-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
@media (max-width: 719px) {
  .ccdn-bb-hero { grid-template-columns: minmax(0, 1fr); } .ccdn-bb-heroside { border-left: 0; border-top: 1px solid var(--bb-line); }
  .ccdn-bb-ruler { padding: 4px 0 0; }
  .ccdn-bb-ruler > ol { height: auto; margin: 10px 0 0; padding: 0; } .ccdn-bb-ruler > ol::before, .ccdn-bb-ruler > ol::after, .ccdn-bb-ruler li.ccdn-bb-flag { display: none; }
  .ccdn-bb-ruler li, .ccdn-bb-ruler li.is-first, .ccdn-bb-ruler li:last-child { position: relative; left: auto; top: auto; transform: none; width: auto; display: block; text-align: left; padding: 6px 0 14px 54px; min-height: 66px; }
  .ccdn-bb-ruler li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; border: 1px solid var(--bb-line); border-top: 0; border-bottom: 0; background: repeating-linear-gradient(180deg, transparent 0 11px, var(--bb-tick) 11px 12px) right / 8px 100% no-repeat, #FBF1D6; }
  .ccdn-bb-ruler li.st-past::before, .ccdn-bb-ruler li.st-today::before { background: repeating-linear-gradient(180deg, transparent 0 11px, rgba(255,255,255,.55) 11px 12px) right / 8px 100% no-repeat, #4ADE80; }
  .ccdn-bb-ruler li.is-first::before { border-top: 1px solid var(--bb-line); border-radius: 9px 9px 0 0; } .ccdn-bb-ruler li:last-child::before { border-bottom: 1px solid var(--bb-line); border-radius: 0 0 9px 9px; }
  .ccdn-bb-ruler li .lab, .ccdn-bb-ruler li .dt, .ccdn-bb-ruler li .ns { display: block; }
  .ccdn-bb-ruler .tick { position: absolute; left: 0; top: 0; width: 34px; height: 4px; margin: 0 !important; } .ccdn-bb-ruler li.st-today .tick { height: 6px; }
  .ccdn-bb-ruler li.ccdn-bb-now { display: block; min-height: 40px; padding: 8px 0 8px 54px; font-size: 14px; color: #92400E; } .ccdn-bb-ruler li.ccdn-bb-now::before { background: linear-gradient(180deg, #4ADE80 0 50%, #FBF1D6 50% 100%); }
  .ccdn-bb-ruler li.ccdn-bb-now::after { content: ""; position: absolute; left: -3px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--bb-amber); border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px var(--bb-amber); box-sizing: border-box; } .ccdn-bb-ruler li.ccdn-bb-now b { display: inline-block; padding: 2px 10px; border-radius: 8px; background: #B45309; color: #FFFFFF; font-weight: 800; }
  .ccdn-bb-dl > div { grid-template-columns: minmax(0, 1fr); }
  .ccdn-bb-part.is-lead b { font-size: 48px; } .ccdn-bb-part b { font-size: 30px; }
}
@media (max-width: 639px) {
  .ccdn-bb .ccdn-seg { flex-direction: column; align-items: stretch; } .ccdn-bb .ccdn-seg label + label { border-left: 0; border-top: 1px solid var(--ccdn-border-strong); } .ccdn-bb .ccdn-mode-option { width: 100%; justify-content: flex-start; padding: 8px 14px; text-align: left; }
  .ccdn-bb-selects { gap: 8px; } .ccdn-bb .ccdn-input { padding-left: 8px; padding-right: 4px; font-size: 15px; } .ccdn-bb-bar .ccdn-btn-primary { flex: 1 1 100%; }
  .ccdn-bb-chips li { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: baseline; }
}
/* TOOL-06 guide components */
.ccdn-bb-eq { margin: 14px 0; padding: 14px 18px; border: 1px solid #EAD9AE; border-left: 5px solid #15803D; border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; background: #FFF9EC; font-size: 16px; line-height: 1.7; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-bb-ladder { list-style: none; margin: 12px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ccdn-bb-ladder li { display: flex; flex-direction: column; min-width: 124px; padding: 8px 14px; border: 1px solid #EAD9AE; border-radius: 12px; background: #FFF9EC; font-variant-numeric: tabular-nums; position: relative; }
.ccdn-bb-ladder li::after { content: "→"; position: absolute; right: -11px; top: 14px; color: #A8956A; font-size: 14px; background: #FFFFFF; z-index: 1; } .ccdn-bb-ladder li:last-child::after { content: ""; }
.ccdn-bb-ladder .k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ccdn-muted); } .ccdn-bb-ladder b { font-size: 17px; color: var(--ccdn-ink); } .ccdn-bb-ladder small { font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-bb-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; } .ccdn-bb-readout > div { display: flex; flex-direction: column; padding: 12px 16px; border: 1px solid #EAD9AE; border-radius: var(--ccdn-radius-md); background: #FFF9EC; }
.ccdn-bb-readout .k { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); } .ccdn-bb-readout b { margin: 2px 0; font-size: 26px; color: #14532D; font-variant-numeric: tabular-nums; } .ccdn-bb-readout .eq { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--ccdn-body); }
.ccdn-bb-rail { list-style: none; margin: 14px 0; padding: 0; border-left: 4px solid #EAD9AE; margin-left: 6px; }
.ccdn-bb-rail li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 140px; gap: 6px 14px; align-items: baseline; padding: 8px 0 8px 18px; position: relative; font-variant-numeric: tabular-nums; border-bottom: 1px dashed var(--ccdn-border); }
.ccdn-bb-rail li::before { content: ""; position: absolute; left: -10px; top: 14px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #CBB98A; background: #FFFFFF; box-sizing: border-box; } .ccdn-bb-rail li.st-past::before { background: #14532D; border-color: #14532D; } .ccdn-bb-rail li.st-today::before { background: #D97706; border-color: #D97706; }
.ccdn-bb-rail .dt { font-weight: 800; color: var(--ccdn-ink); } .ccdn-bb-rail .lab b { color: var(--ccdn-ink); } .ccdn-bb-rail small { color: var(--ccdn-muted); font-size: 13.5px; } .ccdn-bb-rail .st { color: var(--ccdn-body); font-size: 14px; text-align: right; }
.ccdn-bb-edge { margin: 16px 0; padding: 16px 20px; border: 1px solid #EAD9AE; border-left: 5px solid #D97706; border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; background: #FFFBEB; } .ccdn-bb-edge h3 { margin: 0 0 8px !important; font-size: 18px !important; } .ccdn-bb-edge p { margin: 8px 0; font-size: 15.5px; line-height: 1.65; color: var(--ccdn-body); }
.ccdn-bb-tab { width: 100%; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .ccdn-bb-readout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) { .ccdn-bb-rail li { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 20px; } .ccdn-bb-rail .st { text-align: left; } .ccdn-bb-ladder li { flex: 1 1 calc(50% - 10px); } .ccdn-bb-ladder li::after { content: ""; } }

/* ==========================================================================
   TOOL-07 — Số tuần trong năm (.ccdn-wk-*).  Identity: "lịch tuần dán tường" — a WALL PLANNER: a numbered binder tab for the week, a 7-day strip,
   the three numbering systems side by side, and the whole year as a week-per-row planner with a number gutter. Own layout; shared tokens only.
   ========================================================================== */
.ccdn-wk { display: grid; gap: 20px; }
.ccdn-wk-controls { display: grid; gap: 14px; }
.ccdn-wk-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-bottom: 2px solid var(--ccdn-primary); }
.ccdn-wk-mode { appearance: none; border: 1px solid var(--ccdn-border-strong); border-bottom: 0; background: #EEF2F7; color: var(--ccdn-muted); border-radius: 12px 12px 0 0; padding: 10px 12px 9px; text-align: left; font: inherit; cursor: pointer; min-height: 56px; display: grid; gap: 1px; }
.ccdn-wk-mode span { font-weight: 700; color: var(--ccdn-ink); font-size: 15px; }
.ccdn-wk-mode small { font-size: 12.5px; line-height: 1.3; }
.ccdn-wk-mode.is-active { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #DBEAFE; }
.ccdn-wk-mode.is-active span { color: #fff; }
.ccdn-wk-mode:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-wk-form { display: grid; gap: 12px; }
.ccdn-wk-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.ccdn-wk-fs legend { padding: 0; margin-bottom: 6px; }
.ccdn-wk-selects { display: grid; grid-template-columns: 0.8fr 0.8fr 1.1fr; gap: 10px; }
.ccdn-wk-selects .ccdn-input { padding-left: 10px; padding-right: 6px; }
.ccdn-wk-selects-w { grid-template-columns: 1fr 1fr; }
.ccdn-wk-selects .ccdn-field { min-width: 0; }
.ccdn-wk-quick { margin-top: 10px; }
.ccdn-wk-qhelp { font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-wk-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.ccdn-wk-sys { border: 0; margin: 0; padding: 0; min-width: 0; }
.ccdn-wk-sys legend { padding: 0; margin-bottom: 8px; }
.ccdn-wk-sysopts { display: grid; gap: 8px; grid-template-columns: 1fr; }
.ccdn-wk-sysopt { position: relative; display: grid; gap: 2px; padding: 10px 12px 10px 46px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: var(--ccdn-surface); cursor: pointer; }
.ccdn-wk-sysopt input { position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; margin: 0; accent-color: var(--ccdn-primary); }
.ccdn-wk-sysopt .t { font-weight: 700; color: var(--ccdn-ink); font-size: 14.5px; }
.ccdn-wk-sysopt .r { font-size: 13px; color: var(--ccdn-muted); line-height: 1.4; }
.ccdn-wk-sysopt.is-active { border-color: var(--ccdn-primary); box-shadow: inset 0 0 0 1px var(--ccdn-primary); background: #EFF6FF; }
.ccdn-wk-sysopt:focus-within { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-wk-note { margin: 0; }
.ccdn-wk [hidden], .ccdn-wk-form[hidden] { display: none !important; }

.ccdn-wk-result { display: grid; gap: 22px; }
.ccdn-wk-hero { display: grid; gap: 0; background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-lg); overflow: hidden; box-shadow: var(--ccdn-shadow-card); }
.ccdn-wk-tab { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px 14px 34px; color: #fff; background: linear-gradient(160deg, var(--ccdn-primary) 0%, var(--ccdn-primary-deep) 100%); }
.ccdn-wk-tab .k { font-size: 13px; letter-spacing: 0.18em; font-weight: 700; color: #BFDBFE; }
.ccdn-wk-tab b { font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
.ccdn-wk-tab .y { font-size: 14px; color: #DBEAFE; }
.ccdn-wk-tab .holes { position: absolute; left: 11px; top: 0; bottom: 0; width: 14px; background: radial-gradient(circle at 7px 50%, rgba(255,255,255,0.9) 0 4px, transparent 4.5px) 0 0 / 14px 36px repeat-y; opacity: 0.85; }
.ccdn-wk-main { padding: 16px 16px 14px; display: grid; gap: 10px; min-width: 0; }
.ccdn-wk-rel { justify-self: start; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #E2E8F0; color: var(--ccdn-ink); }
.ccdn-wk-rel.is-now { background: #DCFCE7; color: #14532D; }
.ccdn-wk-rel.is-future { background: #DBEAFE; color: #1E3A8A; }
.ccdn-wk-rel.is-past { background: #F1F5F9; color: #334155; }
.ccdn-wk-range { margin: 0; font-size: 20px; line-height: 1.3; color: var(--ccdn-ink); }
.ccdn-wk-sub, .ccdn-wk-sys-line { margin: 0; color: var(--ccdn-body); font-size: 14.5px; }
.ccdn-wk-sys-line span { font-weight: 700; color: var(--ccdn-primary-deep); }
.ccdn-wk-cross { margin: 0; padding: 8px 10px; border-left: 3px solid var(--ccdn-warning); background: #FFFBEB; color: #78350F; font-size: 13.5px; border-radius: 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0; }
.ccdn-wk-days { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ccdn-wk-days li { min-width: 0; }
.ccdn-wk-day { appearance: none; width: 100%; font: inherit; cursor: pointer; display: grid; justify-items: center; gap: 0; padding: 7px 0 6px; min-height: 64px; border: 1px solid var(--ccdn-border-strong); background: #F8FAFC; border-radius: var(--ccdn-radius-md); color: var(--ccdn-ink); }
.ccdn-wk-day .n { font-size: 11.5px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-wk-day b { font-size: 21px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ccdn-wk-day .m { font-size: 11px; color: var(--ccdn-muted); }
.ccdn-wk-day.is-weekend { background: #FEF2F2; }
.ccdn-wk-day.is-weekend .n { color: #991B1B; }
.ccdn-wk-day.is-other { background: #F1F5F9; }
.ccdn-wk-day.is-other b, .ccdn-wk-day.is-other .n, .ccdn-wk-day.is-other .m { color: #475569; }
.ccdn-wk-day.is-other { border-style: dashed; }
.ccdn-wk-day.is-today { box-shadow: inset 0 0 0 2px var(--ccdn-success); }
.ccdn-wk-day.is-selected { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-wk-day.is-selected .n, .ccdn-wk-day.is-selected .m { color: #DBEAFE; }
.ccdn-wk-day:focus-visible, .ccdn-wk-cell button:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 1px; position: relative; z-index: 2; }
.ccdn-wk-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ccdn-wk-nav .ccdn-btn, .ccdn-wk-miss .ccdn-btn { display: grid; gap: 1px; justify-items: center; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
.ccdn-wk-nav small, .ccdn-wk-miss small { font-size: 12px; font-weight: 400; opacity: 0.85; }
.ccdn-wk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ccdn-wk-actions code { font-size: 12.5px; background: #F1F5F9; padding: 1px 6px; border-radius: 4px; }
.ccdn-wk-copied { font-size: 13px; color: #15803D; font-weight: 600; min-height: 1em; }
.ccdn-wk-miss { background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: var(--ccdn-radius-lg); padding: 16px; display: grid; gap: 8px; }
.ccdn-wk-miss h2 { margin: 0; font-size: 19px; color: #7F1D1D; }
.ccdn-wk-miss p { margin: 0; }
.ccdn-wk-miss .acts { display: flex; flex-wrap: wrap; gap: 8px; }

.ccdn-wk-sec { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-lg); padding: 16px; display: grid; gap: 10px; min-width: 0; }
.ccdn-wk-sec h3 { margin: 0; font-size: 18px; color: var(--ccdn-ink); }
.ccdn-wk-sec .lead { margin: 0; }
.ccdn-wk-tab3 th[scope="row"] .nm { font-weight: 700; color: var(--ccdn-ink); }
.ccdn-wk-tab3 th[scope="row"] .cur { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; background: #DBEAFE; color: #1E3A8A; border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.ccdn-wk-tab3 tr.is-on { background: #EFF6FF; }
.ccdn-wk-tab3 .sub { display: block; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-wk-tab3 .b { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.ccdn-wk-tab3 .b.ref { background: #E2E8F0; color: #0F172A; }
.ccdn-wk-tab3 .b.same { background: #DCFCE7; color: #14532D; }
.ccdn-wk-tab3 .b.diff { background: #FEF3C7; color: #78350F; }
.ccdn-wk-tab3 .why { margin: 6px 0 0; font-size: 13px; color: #78350F; }
.ccdn-wk-facts { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
.ccdn-wk-facts > div { border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); padding: 10px 12px; background: #F8FAFC; display: grid; gap: 2px; }
.ccdn-wk-facts dt { font-size: 12.5px; font-weight: 700; color: var(--ccdn-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ccdn-wk-facts dd { margin: 0; display: grid; gap: 2px; }
.ccdn-wk-facts strong { font-size: 19px; color: var(--ccdn-ink); }
.ccdn-wk-facts dd span { font-size: 13px; color: var(--ccdn-muted); }

.ccdn-wk-planner { display: grid; gap: 10px; background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-lg); padding: 14px; box-shadow: var(--ccdn-shadow-card); min-width: 0; }
.ccdn-wk-ph { display: grid; gap: 10px; }
.ccdn-wk-ph h3 { margin: 0 0 2px; font-size: 19px; color: var(--ccdn-ink); }
.ccdn-wk-ph p { margin: 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-wk-pyr { display: flex; align-items: center; gap: 10px; }
.ccdn-wk-pyr strong { font-size: 20px; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.ccdn-wk-pyr .ccdn-btn { padding: 6px 12px; min-height: 40px; }
.ccdn-wk-scroll { max-height: 540px; overflow: auto; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; overscroll-behavior: contain; }
.ccdn-wk-scroll:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 2px; }
.ccdn-wk-grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.ccdn-wk-grid thead th { position: sticky; top: 0; z-index: 3; background: #1E293B; color: #F1F5F9; font-size: 12.5px; padding: 7px 0; text-align: center; font-weight: 700; }
.ccdn-wk-grid thead th.we { background: #7F1D1D; }
.ccdn-wk-grid thead th.w, .ccdn-wk-grid tbody th.w { width: 46px; }
.ccdn-wk-grid tbody th.w { position: sticky; left: 0; z-index: 1; background: #E2E8F0; color: var(--ccdn-ink); font-size: 14px; text-align: center; border-bottom: 1px solid #fff; padding: 0; }
.ccdn-wk-grid tbody th.w.x { background: #FDE68A; }
.ccdn-wk-cell { padding: 0; border-bottom: 1px solid #fff; border-right: 1px solid #fff; text-align: center; }
.ccdn-wk-cell.m1 { background: #EEF4FF; }
.ccdn-wk-cell.m0 { background: #F8FAFC; }
.ccdn-wk-cell button { position: relative; appearance: none; width: 100%; height: 38px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ccdn-ink); cursor: pointer; padding: 0; display: grid; place-items: center; }
.ccdn-wk-cell button i { position: absolute; left: 0; right: 0; top: 1px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ccdn-primary-deep); line-height: 1; }
@media (max-width: 340px) { .ccdn-wk-cell button i { font-size: 9.5px; letter-spacing: -0.4px; } }
.ccdn-wk-cell.d1 button span { margin-top: 8px; font-weight: 700; }
.ccdn-wk-cell.we button { color: #991B1B; }
.ccdn-wk-cell.oy button { color: #55657A; font-weight: 400; }
.ccdn-wk-cell.oy { background-image: repeating-linear-gradient(135deg, rgba(100,116,139,0.10) 0 3px, transparent 3px 6px); }
.ccdn-wk-cell.sel button i { color: #DBEAFE; }
.ccdn-wk-cell.hol button::after { content: ""; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #DC2626; }
.ccdn-wk-cell.mk button::after { content: ""; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }
.ccdn-wk-cell.td button { box-shadow: inset 0 0 0 2px var(--ccdn-success); border-radius: 6px; font-weight: 700; }
.ccdn-wk-cell.sel button { background: var(--ccdn-primary); color: #fff; border-radius: 6px; font-weight: 700; }
.ccdn-wk-row.is-cur .ccdn-wk-cell { background: #DBEAFE; }
.ccdn-wk-grid tbody .ccdn-wk-row.is-cur th.w, .ccdn-wk-grid tbody .ccdn-wk-row.is-cur th.w.x { background: var(--ccdn-primary); color: #fff; font-weight: 700; }
.ccdn-wk-row:hover .ccdn-wk-cell { background: #E0ECFF; }
.ccdn-wk-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-wk-legend li { display: flex; align-items: center; gap: 6px; }
.ccdn-wk-legend .k { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--ccdn-border-strong); background: #fff; }
.ccdn-wk-legend .k.cur { background: #DBEAFE; border-color: var(--ccdn-primary); }
.ccdn-wk-legend .k.td { box-shadow: inset 0 0 0 2px var(--ccdn-success); }
.ccdn-wk-legend .k.hol { background: #DC2626; border-radius: 50%; width: 9px; height: 9px; }
.ccdn-wk-legend .k.mk { background: #16A34A; border-radius: 50%; width: 9px; height: 9px; }
.ccdn-wk-legend .k.oy { background: #E2E8F0; }
.ccdn-wk-pact { display: flex; flex-wrap: wrap; gap: 4px 16px; }

@media (min-width: 768px) {
	.ccdn-wk-sysopts { grid-template-columns: repeat(3, 1fr); }
	.ccdn-wk-hero { grid-template-columns: 188px 1fr; }
	.ccdn-wk-tab { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 20px 14px 20px 34px; }
	.ccdn-wk-tab b { font-size: 84px; }
	.ccdn-wk-main { padding: 20px 22px 18px; }
	.ccdn-wk-range { font-size: 24px; }
	.ccdn-wk-facts { grid-template-columns: repeat(2, 1fr); }
	.ccdn-wk-ph { grid-template-columns: 1fr auto; align-items: end; }
	.ccdn-wk-selects { max-width: 520px; }
	.ccdn-wk-selects-w { max-width: 360px; }
	.ccdn-wk-modes { max-width: 560px; }
}
@media (min-width: 1024px) {
	.ccdn-wk-facts { grid-template-columns: repeat(3, 1fr); }
	.ccdn-wk-cell button { height: 40px; }
	.ccdn-wk-scroll { max-height: 620px; }
}
@media (max-width: 420px) {
	.ccdn-wk-day .m { display: none; }
	.ccdn-wk-planner { padding: 10px 8px; }
	.ccdn-wk-tab b { font-size: 48px; }
	.ccdn-wk-day b { font-size: 18px; }
	.ccdn-wk-day { min-height: 58px; }
	.ccdn-wk-cell button { height: 36px; font-size: 13px; }
	.ccdn-wk-grid thead th.w, .ccdn-wk-grid tbody th.w { width: 34px; }
}
@media (prefers-reduced-motion: reduce) { .ccdn-wk-scroll { scroll-behavior: auto; } }
@media print {
	header.ccdn-header, .ccdn-wk-controls, .ccdn-wk-nav, .ccdn-wk-actions, .ccdn-wk-pact, .ccdn-wk-pyr, .ccdn-wk-systems, .ccdn-hg-toc, .ccdn-hg-sec, header.ccdn-header, footer, .ccdn-dt-crumb, .ccdn-page-intro p, .ccdn-share-note { display: none !important; }
	.ccdn-wk-scroll { max-height: none; overflow: visible; border: 0; }
	.ccdn-wk-grid thead th { position: static; }
	.ccdn-wk-hero, .ccdn-wk-planner, .ccdn-wk-sec { box-shadow: none; break-inside: avoid; }
	.ccdn-wk-row { break-inside: avoid; }
}

/* ==========================================================================
   TOOL-08 — Còn bao nhiêu ngày nữa (.ccdn-ev-*).  Identity: a DEPARTURE BOARD — dark board, one row per event ordered by how soon it comes, amber day counts; the chosen row opens as a
   countdown card with flip-style clock tiles; a 12-month ribbon with one lane per kind. Chronology and proximity are the point, so there is no input form at the centre.
   ========================================================================== */
.ccdn-ev { display: grid; gap: 22px; min-width: 0; }
.ccdn-ev-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ccdn-ev-stage { order: 1; min-width: 0; outline: none; scroll-margin-top: 80px; }
.ccdn-ev-board { order: 2; background: #0B1220; color: #E5EDF8; border-radius: var(--ccdn-radius-lg); border: 1px solid #1E293B; box-shadow: var(--ccdn-shadow-card); overflow: hidden; min-width: 0; }
.ccdn-ev-bh { display: grid; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid #1E293B; background: linear-gradient(180deg, #111B2E 0%, #0B1220 100%); }
.ccdn-ev-bh h2 { margin: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #FBBF24; }
.ccdn-ev-today { margin: 2px 0 0; font-size: 14px; color: #CBD5E1; }
.ccdn-ev-count { margin: 0; font-size: 12.5px; color: #CBD5E1; }
.ccdn-ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ccdn-ev-fchip { appearance: none; font: inherit; font-size: 13.5px; cursor: pointer; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid #334155; background: #1E293B; color: #E2E8F0; }
.ccdn-ev-fchip[aria-pressed="true"] { background: #FBBF24; border-color: #FBBF24; color: #0B1220; font-weight: 700; }
.ccdn-ev-fchip:focus-visible, .ccdn-ev-row:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; position: relative; z-index: 2; }
.ccdn-ev-rows { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow: auto; overscroll-behavior: contain; }
.ccdn-ev-rows li { border-bottom: 1px solid #1E293B; margin: 0; }
.ccdn-ev-empty, .ccdn-ev-ns { padding: 18px 14px; color: #CBD5E1; font-size: 14.5px; }
.ccdn-ev-row { appearance: none; width: 100%; font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px 14px 10px 12px; border: 0; border-left: 4px solid transparent; background: transparent; color: #E5EDF8; min-height: 64px; }
.ccdn-ev-row:hover { background: #111B2E; }
.ccdn-ev-row.is-holiday { border-left-color: #F87171; } .ccdn-ev-row.is-lunar { border-left-color: #A78BFA; } .ccdn-ev-row.is-day { border-left-color: #2DD4BF; } .ccdn-ev-row.is-my { border-left-color: #E2E8F0; }
.ccdn-ev-row.is-sel { background: #16233C; box-shadow: inset 0 0 0 1px #FBBF24; }
.ccdn-ev-row .d { display: grid; justify-items: center; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ccdn-ev-row .d b { font-size: 28px; color: #FBBF24; font-weight: 700; }
.ccdn-ev-row .d b.word { font-size: 14.5px; letter-spacing: 0.02em; text-align: center; }
.ccdn-ev-row .d small { font-size: 11.5px; color: #CBD5E1; }
.ccdn-ev-row .n { display: grid; gap: 1px; min-width: 0; }
.ccdn-ev-row .n strong { font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.ccdn-ev-row .n small { font-size: 13px; color: #CBD5E1; }
.ccdn-ev-row .s { grid-column: 2; margin-top: 2px; }
.ccdn-ev-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; line-height: 1.6; }
.ccdn-ev-chip.is-ok { background: #064E3B; color: #A7F3D0; } .ccdn-ev-chip.is-mid { background: #1E3A8A; color: #DBEAFE; } .ccdn-ev-chip.is-warn { background: #78350F; color: #FDE68A; } .ccdn-ev-chip.is-na { background: #334155; color: #E2E8F0; } .ccdn-ev-chip.is-mine { background: #334155; color: #F1F5F9; }
.ccdn-ev-stage .ccdn-ev-chip.is-ok { background: #DCFCE7; color: #14532D; } .ccdn-ev-stage .ccdn-ev-chip.is-mid { background: #DBEAFE; color: #1E3A8A; } .ccdn-ev-stage .ccdn-ev-chip.is-warn { background: #FEF3C7; color: #78350F; } .ccdn-ev-stage .ccdn-ev-chip.is-na { background: #E2E8F0; color: #0F172A; }

.ccdn-ev-card { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-lg); box-shadow: var(--ccdn-shadow-card); padding: 16px; display: grid; gap: 14px; min-width: 0; }
.ccdn-ev-card header { display: grid; gap: 4px; }
.ccdn-ev-card header .k { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-ev-card h2 { margin: 0; font-size: 24px; line-height: 1.25; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-ev-card h3 { margin: 4px 0 0; font-size: 17px; color: var(--ccdn-ink); }
.ccdn-ev-card .when { margin: 0; font-size: 15px; color: var(--ccdn-body); }
.ccdn-ev-jump { justify-self: start; font-size: 13.5px; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
@media (min-width: 1024px) { .ccdn-ev-jump { display: none; } }
.ccdn-ev-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ccdn-ev-big b { font-size: 68px; line-height: 1; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-ev-big.is-word b { font-size: 40px; }
.ccdn-ev-big span { font-size: 18px; color: var(--ccdn-body); }
.ccdn-ev-banner { margin: 0; padding: 9px 12px; border-radius: var(--ccdn-radius-sm); font-size: 14.5px; font-weight: 600; }
.ccdn-ev-banner.is-now { background: #DCFCE7; color: #14532D; border-left: 4px solid #16A34A; }
.ccdn-ev-clock { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 8px; }
.ccdn-ev-clock .t { position: relative; display: grid; justify-items: center; gap: 1px; padding: 10px 4px 7px; border-radius: 10px; background: linear-gradient(#0B1220 0 49.4%, #000 49.4% 50.6%, #0B1220 50.6% 100%); color: #FBBF24; box-shadow: 0 1px 0 #1E293B; }
.ccdn-ev-clock .t b { font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ccdn-ev-clock .t span { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #CBD5E1; }
.ccdn-ev-clocknote { margin: -4px 0 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-ev-facts { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
.ccdn-ev-facts .f { border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); padding: 10px 12px; background: #F8FAFC; display: grid; gap: 2px; }
.ccdn-ev-facts dt { font-size: 12.5px; font-weight: 700; color: var(--ccdn-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ccdn-ev-facts dd { margin: 0; display: grid; gap: 2px; }
.ccdn-ev-facts strong { font-size: 19px; color: var(--ccdn-ink); }
.ccdn-ev-facts dd span { font-size: 13.5px; color: var(--ccdn-body); }
.ccdn-ev-inc { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ccdn-body); min-height: 36px; }
.ccdn-ev-inc input { flex: 0 0 24px; width: 24px; height: 24px; accent-color: var(--ccdn-primary); }
.ccdn-ev-src { border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); padding: 8px 12px; font-size: 14px; }
.ccdn-ev-src summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.ccdn-ev-src ul { margin: 6px 0 4px; padding-left: 18px; display: grid; gap: 6px; }
.ccdn-ev-src li a { display: inline-block; padding: 4px 0; }
.ccdn-ev-srcnote, .ccdn-ev-err { margin: 0; font-size: 14px; color: var(--ccdn-body); }
.ccdn-ev-err { padding: 10px 12px; background: #FEF2F2; border-left: 4px solid #DC2626; color: #7F1D1D; border-radius: var(--ccdn-radius-sm); }
.ccdn-ev-export { display: grid; gap: 10px; border-top: 1px solid var(--ccdn-border); padding-top: 12px; }
.ccdn-ev-export .bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ccdn-ev-export .ccdn-field { max-width: 320px; }
.ccdn-ev-copied { font-size: 13px; color: #15803D; font-weight: 600; }

.ccdn-ev-ribbon, .ccdn-ev-mine { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-lg); padding: 16px; display: grid; gap: 10px; min-width: 0; }
.ccdn-ev-ribbon h2, .ccdn-ev-mine h2 { margin: 0; font-size: 19px; color: var(--ccdn-ink); }
.ccdn-ev-ribbon .sub, .ccdn-ev-mine header p { margin: 0; font-size: 14px; color: var(--ccdn-muted); }
.ccdn-ev-rb { position: relative; display: grid; gap: 2px; padding: 0 0 4px 62px; min-width: 0; }
.ccdn-ev-rb .axis { position: relative; height: 26px; border-bottom: 2px solid #CBD5E1; }
.ccdn-ev-rb .axis i { position: absolute; bottom: -2px; height: 10px; border-left: 1px solid #94A3B8; font-style: normal; }
.ccdn-ev-rb .axis i span { position: absolute; top: -17px; left: 3px; font-size: 11.5px; color: var(--ccdn-muted); white-space: nowrap; }
.ccdn-ev-rb .axis .now { position: absolute; left: 0; bottom: -2px; height: 100%; border-left: 3px solid #16A34A; font-style: normal; }
.ccdn-ev-rb .axis .now span { position: absolute; top: -2px; left: 5px; font-size: 11.5px; font-weight: 700; color: #15803D; white-space: nowrap; display: none; }
.ccdn-ev-rb .lane { position: relative; height: 32px; }
.ccdn-ev-rb .lane .ll { position: absolute; left: -62px; top: 6px; width: 58px; font-size: 11.5px; line-height: 1.2; color: var(--ccdn-muted); }
.ccdn-ev-rb .track { position: absolute; left: 0; right: 0; top: 15px; border-top: 1px dashed #CBD5E1; }
.ccdn-ev-rb .pin { position: absolute; top: -8px; width: 16px; height: 16px; margin-left: -8px; padding: 0; border: 2px solid #fff; border-radius: 50%; cursor: pointer; background: #64748B; box-shadow: 0 0 0 1px #94A3B8; }
.ccdn-ev-rb .pin::before { content: ""; position: absolute; inset: -6px; }
.ccdn-ev-rb .pin.is-holiday { background: #DC2626; } .ccdn-ev-rb .pin.is-lunar { background: #7C3AED; } .ccdn-ev-rb .pin.is-day { background: #0D9488; } .ccdn-ev-rb .pin.is-my { background: #0F172A; }
.ccdn-ev-rb .pin.is-sel { width: 22px; height: 22px; margin-left: -11px; top: -11px; box-shadow: 0 0 0 3px #FBBF24; z-index: 2; }
.ccdn-ev-form { display: grid; gap: 12px; }
.ccdn-ev-fbar { display: flex; flex-wrap: wrap; gap: 10px; }
.ccdn-ev-note { margin: 0; }

@media (min-width: 768px) {
	.ccdn-ev-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ccdn-ev-form { grid-template-columns: 2fr 1.2fr 1.6fr; align-items: end; }
	.ccdn-ev-fbar { grid-column: 1 / -1; }
	.ccdn-ev-clock .t b { font-size: 44px; }
	.ccdn-ev-big b { font-size: 84px; }
	.ccdn-ev-rb .axis .now span { display: block; }
}
@media (min-width: 1024px) {
	.ccdn-ev-grid { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); align-items: start; }
	.ccdn-ev-board { order: 1; position: sticky; top: 72px; }
	.ccdn-ev-stage { order: 2; }
	.ccdn-ev-rows { max-height: 720px; }
	.ccdn-ev-card { padding: 22px; }
}
@media (max-width: 480px) {
	.ccdn-ev-rb .axis i:nth-child(even) span { display: none; }
	.ccdn-ev-clock { gap: 5px; }
	.ccdn-ev-clock .t { padding: 8px 2px 6px; }
	.ccdn-ev-clock .t b { font-size: 25px; }
	.ccdn-ev-clock .t span { letter-spacing: 0.02em; font-size: 11px; }
	.ccdn-ev-big b { font-size: 56px; }
	.ccdn-ev-card { padding: 14px; }
	.ccdn-ev-rb { padding-left: 54px; } .ccdn-ev-rb .lane .ll { left: -54px; width: 50px; }
}
@media (prefers-reduced-motion: reduce) { .ccdn-ev-rows { scroll-behavior: auto; } }

/* ==========================================================================
   TOOL-09 — Tính ngày dự sinh và tuổi thai (.ccdn-gx-*).  Identity: a GESTATION DIAL — one ring of 42 weeks (three trimesters, the term window, the due-date mark, a "today" dot) with the
   week number in the middle, and a ledger of dated landmarks beside it. Radial and proportional: the question is "how far round the cycle am I", so no timeline strip or table is the centre.
   ========================================================================== */
.ccdn-gx { display: grid; gap: 16px; min-width: 0; }
.ccdn-gx-med { margin: 0; padding: 10px 14px; border-left: 4px solid var(--ccdn-primary); background: #EFF6FF; color: #1E3A8A; border-radius: 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0; font-size: 14.5px; }
.ccdn-gx-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ccdn-gx-form { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ccdn-gx-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.ccdn-gx-fs legend { padding: 0; margin-bottom: 6px; }
.ccdn-gx-fs2 { border: 0; margin: 0; padding: 0; min-width: 0; }
.ccdn-gx-grp { display: grid; gap: 10px; }
.ccdn-gx-grp[hidden], .ccdn-gx [hidden] { display: none !important; }
.ccdn-gx-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.ccdn-gx-help { font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-gx-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.ccdn-gx-opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border: 1px solid var(--ccdn-border-strong); border-radius: 999px; background: var(--ccdn-surface); cursor: pointer; font-size: 15px; color: var(--ccdn-ink); }
.ccdn-gx-opt input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--ccdn-primary); }
.ccdn-gx-opt.is-on { border-color: var(--ccdn-primary); background: #EFF6FF; box-shadow: inset 0 0 0 1px var(--ccdn-primary); font-weight: 600; }
.ccdn-gx-opt:focus-within { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-gx-recon { border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); padding: 10px 14px; background: #F8FAFC; display: grid; gap: 10px; }
.ccdn-gx-recon summary { cursor: pointer; font-weight: 700; color: var(--ccdn-ink); min-height: 36px; display: flex; align-items: center; }
.ccdn-gx-recon[open] summary { margin-bottom: 4px; }
.ccdn-gx-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-gx-note { margin: 0; }

.ccdn-gx-out { display: grid; gap: 16px; min-width: 0; align-content: start; }
.ccdn-gx-top { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; }
.ccdn-gx-top2 { width: 100%; min-width: 0; }
.ccdn-gx-dialwrap { position: relative; width: min(100%, 320px); aspect-ratio: 1 / 1; }
.ccdn-gx-dial { width: 100%; height: 100%; display: block; }
.ccdn-gx-dial .tri1 { stroke: #0284C7; } .ccdn-gx-dial .tri2 { stroke: #0D9488; } .ccdn-gx-dial .tri3 { stroke: #4F46E5; }
.ccdn-gx-dial .term-early { stroke: #D97706; } .ccdn-gx-dial .term-full { stroke: #15803D; } .ccdn-gx-dial .term-late { stroke: #C2410C; }
.ccdn-gx-dialwrap.is-empty .tri1, .ccdn-gx-dialwrap.is-empty .tri2, .ccdn-gx-dialwrap.is-empty .tri3 { stroke: #CBD5E1; }
.ccdn-gx-dialwrap.is-empty .term-early, .ccdn-gx-dialwrap.is-empty .term-full, .ccdn-gx-dialwrap.is-empty .term-late { stroke: #E2E8F0; }
.ccdn-gx-dial .ticks line { stroke: #94A3B8; stroke-width: 1.2; }
.ccdn-gx-dial .wk { font-size: 12px; fill: #475569; font-weight: 700; }
.ccdn-gx-dial .edd rect { fill: #0F172A; stroke: #fff; stroke-width: 2; }
.ccdn-gx-dial .edd-l { stroke: #0F172A; stroke-width: 2; }
.ccdn-gx-dial .now { fill: #fff; stroke: #0F172A; stroke-width: 4; }
.ccdn-gx-dial .now.beyond { fill: #FEF3C7; }
.ccdn-gx-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; }
.ccdn-gx-center small { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ccdn-muted); font-weight: 700; }
.ccdn-gx-center b { font-size: 76px; line-height: 1; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-gx-center span { font-size: 17px; color: var(--ccdn-body); font-weight: 600; }
.ccdn-gx-dialwrap.is-empty .ccdn-gx-center b { color: #64748B; }
.ccdn-gx-sum { display: grid; gap: 6px; }
.ccdn-gx-sum p { margin: 0; }
.ccdn-gx-sum .edd { font-size: 15px; color: var(--ccdn-body); }
.ccdn-gx-sum .edd strong { display: block; font-size: 23px; line-height: 1.25; color: var(--ccdn-ink); }
.ccdn-gx-sum .edd small { font-size: 14px; color: var(--ccdn-muted); }
.ccdn-gx-sum .ga { display: grid; gap: 0; }
.ccdn-gx-sum .ga .big { font-size: 26px; font-weight: 800; color: var(--ccdn-primary-deep); line-height: 1.25; }
.ccdn-gx-sum .ga .sub { font-size: 14px; color: var(--ccdn-muted); }
.ccdn-gx-sum .left { font-size: 15px; color: var(--ccdn-body); }
.ccdn-gx-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ccdn-gx-tags li { font-size: 13px; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: #E2E8F0; color: var(--ccdn-ink); }
.ccdn-gx-tags li.t1 { background: #E0F2FE; color: #075985; } .ccdn-gx-tags li.t2 { background: #CCFBF1; color: #115E59; } .ccdn-gx-tags li.t3 { background: #E0E7FF; color: #3730A3; }
.ccdn-gx-class { padding: 10px 12px; border: 1px solid var(--ccdn-border-strong); border-left: 4px solid var(--ccdn-primary); border-radius: var(--ccdn-radius-md); background: #F8FAFC; font-size: 15px; color: var(--ccdn-ink); }
.ccdn-gx-class small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-gx-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ccdn-muted); justify-content: center; }
.ccdn-gx-legend li { display: flex; align-items: center; gap: 6px; }
.ccdn-gx-legend .k { display: inline-block; width: 14px; height: 8px; border-radius: 3px; }
.ccdn-gx-legend .k.tri1 { background: #0284C7; } .ccdn-gx-legend .k.tri2 { background: #0D9488; } .ccdn-gx-legend .k.tri3 { background: #4F46E5; }
.ccdn-gx-legend .k.term-early { background: #D97706; } .ccdn-gx-legend .k.term-full { background: #15803D; } .ccdn-gx-legend .k.term-late { background: #C2410C; }
.ccdn-gx-legend .k.d { width: 10px; height: 10px; background: #0F172A; transform: rotate(45deg); border-radius: 1px; }
.ccdn-gx-hint { text-align: center; color: var(--ccdn-body); max-width: 440px; }
.ccdn-gx-hint p { margin: 0; }
.ccdn-gx-facts { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
.ccdn-gx-facts > div { border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); padding: 10px 12px; background: #F8FAFC; display: grid; gap: 2px; }
.ccdn-gx-facts dt { font-size: 12.5px; font-weight: 700; color: var(--ccdn-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ccdn-gx-facts dd { margin: 0; display: grid; gap: 2px; }
.ccdn-gx-facts strong { font-size: 18px; color: var(--ccdn-ink); }
.ccdn-gx-facts dd span { font-size: 13.5px; color: var(--ccdn-body); }
.ccdn-gx-sec { background: var(--ccdn-surface); border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-lg); padding: 14px; display: grid; gap: 10px; min-width: 0; }
.ccdn-gx-sec h2 { margin: 0; font-size: 18px; color: var(--ccdn-ink); }
.ccdn-gx-sec p { margin: 0; }
.ccdn-gx-tab small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-gx-tab tr.is-past td, .ccdn-gx-tab tr.is-past th { color: #475569; }
.ccdn-gx-tab tr.is-today { background: #DCFCE7; }
.ccdn-gx-tab tr.is-edd th, .ccdn-gx-tab tr.is-edd td { font-weight: 700; border-top: 2px solid var(--ccdn-border-strong); }
.ccdn-gx-rc .verdict { font-size: 15.5px; color: var(--ccdn-ink); }
.ccdn-gx-rc.is-change { border-color: #F59E0B; background: #FFFBEB; } .ccdn-gx-rc.is-keep { border-color: #86EFAC; background: #F0FDF4; }
.ccdn-gx-rc .cav { font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-gx-err { padding: 10px 12px; background: #FEF2F2; border-left: 4px solid #DC2626; color: #7F1D1D; border-radius: var(--ccdn-radius-sm); }
.ccdn-gx-scroll { max-height: 360px; overflow: auto; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; overscroll-behavior: contain; }
.ccdn-gx-scroll:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 2px; }
.ccdn-gx-ladder { list-style: none; margin: 0; padding: 0; }
.ccdn-gx-ladder li { display: grid; grid-template-columns: 74px 1fr auto; gap: 8px; align-items: center; padding: 7px 12px; border-left: 6px solid transparent; border-bottom: 1px solid var(--ccdn-border); font-variant-numeric: tabular-nums; min-height: 38px; }
.ccdn-gx-ladder li.t1 { border-left-color: #0284C7; } .ccdn-gx-ladder li.t2 { border-left-color: #0D9488; } .ccdn-gx-ladder li.t3 { border-left-color: #4F46E5; }
.ccdn-gx-ladder li.z-early { background: #FFFBEB; } .ccdn-gx-ladder li.z-full { background: #F0FDF4; } .ccdn-gx-ladder li.z-late { background: #FFF7ED; } .ccdn-gx-ladder li.z-post { background: #F1F5F9; }
.ccdn-gx-ladder li.is-cur { background: #DBEAFE; box-shadow: inset 0 0 0 2px var(--ccdn-primary); font-weight: 700; }
.ccdn-gx-ladder li em { font-style: normal; font-size: 12.5px; font-weight: 700; background: #0F172A; color: #fff; border-radius: 999px; padding: 1px 9px; }
.ccdn-gx-export { gap: 12px; }
.ccdn-gx-export .bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ccdn-gx-export .ccdn-field { max-width: 320px; }
.ccdn-gx-copied { font-size: 13px; color: #15803D; font-weight: 600; }

@media (min-width: 768px) {
	.ccdn-gx-tab tbody th { width: 38%; }
	.ccdn-gx-top { grid-template-columns: 320px minmax(0, 1fr); justify-items: stretch; }
	.ccdn-gx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ccdn-gx-layout { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); align-items: start; }
	.ccdn-gx-form { position: sticky; top: 72px; }
}
@media (max-width: 480px) {
	.ccdn-gx-center b { font-size: 60px; }
	.ccdn-gx-sum .edd strong { font-size: 20px; }
	.ccdn-gx-ladder li { grid-template-columns: 64px 1fr; padding: 7px 8px; }
	.ccdn-gx-ladder li em { grid-column: 2; justify-self: start; }
}

.ccdn-gx-gt th small{display:block;margin-top:2px}

/* ==========================================================================
   TOOL-10 — Tính ngày phép năm và thâm niên (.ccdn-lv-*).  Identity: a LEAVE LEDGER — the entitlement reads as a payroll sum ((nền + thâm niên) ÷ 12 × tháng), the year is twelve month-cells
   whose bars fill with the share of working days worked (click one to leave it out), and seniority is a staircase of 5-year blocks. Ruled lines and tabular figures, no dial, no card-in-card.
   ========================================================================== */
.ccdn-lv { display: grid; gap: 16px; min-width: 0; }
.ccdn-lv-med { margin: 0; padding: 10px 14px; border-left: 4px solid var(--ccdn-primary); background: #EFF6FF; color: #1E3A8A; border-radius: 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0; font-size: 14.5px; }
.ccdn-lv-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ccdn-lv-form { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ccdn-lv-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.ccdn-lv-fs legend { padding: 0; margin-bottom: 6px; }
.ccdn-lv-fs2 { border: 0; margin: 0; padding: 0; min-width: 0; }
.ccdn-lv [hidden] { display: none !important; }
.ccdn-lv-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-lv-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15.5px; color: var(--ccdn-ink); cursor: pointer; }
.ccdn-lv-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ccdn-primary); }
.ccdn-lv-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; }
.ccdn-lv-stepper .ccdn-btn { padding: 0; font-size: 22px; line-height: 1; min-height: 44px; }
.ccdn-lv-stepper input { text-align: center; font-variant-numeric: tabular-nums; }
.ccdn-lv-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.ccdn-lv-seg.is-col { grid-template-columns: minmax(0, 1fr); }
.ccdn-lv-opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border: 1px solid var(--ccdn-border-strong); border-radius: 999px; background: var(--ccdn-surface); cursor: pointer; font-size: 14.5px; line-height: 1.3; }
.ccdn-lv-opt input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--ccdn-primary); }
.ccdn-lv-opt.is-on { border-color: var(--ccdn-primary); background: #EFF6FF; box-shadow: inset 0 0 0 1px var(--ccdn-primary); font-weight: 600; }
.ccdn-lv-opt:focus-within { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-lv-adv { border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); padding: 10px 14px; background: #F8FAFC; display: grid; gap: 12px; }
.ccdn-lv-adv summary { cursor: pointer; font-weight: 700; color: var(--ccdn-ink); min-height: 36px; display: flex; align-items: center; }
.ccdn-lv-adv[open] summary { margin-bottom: 4px; }
.ccdn-lv-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-lv-note { margin: 0; }

.ccdn-lv-out { display: grid; gap: 16px; min-width: 0; align-content: start; }
.ccdn-lv-head { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); padding: 0 0 14px; border-bottom: 2px solid var(--ccdn-ink); }
.ccdn-lv-kick { margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-lv-big { margin: 0; font-size: 22px; font-weight: 700; color: var(--ccdn-body); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ccdn-lv-big span { font-size: 72px; font-weight: 800; color: var(--ccdn-primary-deep); letter-spacing: -.02em; }
.ccdn-lv-big.is-ghost span { color: #64748B; }
.ccdn-lv-eq { margin: 4px 0 0; padding: 6px 10px; display: inline-block; max-width: 100%; border-bottom: 1px dashed #94A3B8; font-size: 15px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ccdn-lv-alt { margin: 10px 0 0; padding: 8px 12px; border-left: 4px solid #D97706; background: #FFFBEB; font-size: 14px; color: #78350F; }
.ccdn-lv-facts { margin: 0; display: grid; gap: 0; }
.ccdn-lv-facts > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dotted #94A3B8; }
.ccdn-lv-facts > div:last-child { border-bottom: 0; }
.ccdn-lv-facts dt { font-size: 13.5px; color: var(--ccdn-muted); font-weight: 600; }
.ccdn-lv-facts dd { margin: 0; font-size: 15.5px; color: var(--ccdn-ink); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ccdn-lv-facts dd small { display: block; font-weight: 400; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-lv-bal dd strong { font-size: 19px; color: var(--ccdn-primary-deep); }
.ccdn-lv-bal.is-over dd strong { color: #B91C1C; }
.ccdn-lv-empty { padding: 0 0 6px; }
.ccdn-lv-hint { margin: 10px 0 0; font-size: 15.5px; color: var(--ccdn-body); }

.ccdn-lv-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-lv-sec h3 { margin: 0; font-size: 18px; }
.ccdn-lv-grid { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccdn-lv-mo { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "m a" "bar bar" "w s"; gap: 3px 4px; align-items: center; min-height: 78px; padding: 7px 8px 7px; border: 1px solid #BFDBFE; border-radius: 8px; background: #EFF6FF; color: var(--ccdn-ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ccdn-lv-mo .m { grid-area: m; font-weight: 800; font-size: 14px; }
.ccdn-lv-mo .a { grid-area: a; font-weight: 700; font-size: 13px; color: var(--ccdn-primary-deep); font-variant-numeric: tabular-nums; }
.ccdn-lv-mo .bar { grid-area: bar; height: 8px; border-radius: 4px; background: #CBD5E1; overflow: hidden; }
.ccdn-lv-mo .bar i { display: block; height: 100%; background: var(--ccdn-primary); }
.ccdn-lv-mo .w { grid-area: w; font-size: 12px; color: #334155; font-variant-numeric: tabular-nums; }
.ccdn-lv-mo .s { grid-area: s; font-size: 12px; color: #334155; font-weight: 600; text-align: right; }
.ccdn-lv-mo.is-partial-counted { border-style: dashed; border-color: #60A5FA; background: #F0F9FF; }
.ccdn-lv-mo.is-partial-not { border-color: #FCD34D; background: #FFFBEB; }
.ccdn-lv-mo.is-partial-not .bar i { background: #D97706; }
.ccdn-lv-mo.is-partial-not .a, .ccdn-lv-mo.is-partial-not .s { color: #92400E; }
.ccdn-lv-mo.is-excluded { border-color: #94A3B8; background: repeating-linear-gradient(135deg, #F1F5F9 0 6px, #E2E8F0 6px 12px); }
.ccdn-lv-mo.is-excluded .bar i { background: #64748B; }
.ccdn-lv-mo.is-excluded .m { text-decoration: line-through; }
.ccdn-lv-mo.is-out { border-style: dashed; border-color: #CBD5E1; background: #F8FAFC; color: #475569; cursor: default; }
.ccdn-lv-mo.is-out .a { color: #475569; }
.ccdn-lv-mo:not(:disabled):hover { box-shadow: 0 0 0 2px #93C5FD; }
.ccdn-lv-mo:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 2px; }
.ccdn-lv-grid.is-ghost { opacity: .85; }
.ccdn-lv-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-lv-legend li::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 6px; border: 1px solid #60A5FA; border-radius: 3px; background: #EFF6FF; vertical-align: -1px; }
.ccdn-lv-legend li.is-partial-counted::before { border-style: dashed; background: #F0F9FF; }
.ccdn-lv-legend li.is-partial-not::before { border-color: #FCD34D; background: #FFFBEB; }
.ccdn-lv-legend li.is-excluded::before { border-color: #94A3B8; background: repeating-linear-gradient(135deg, #F1F5F9 0 3px, #CBD5E1 3px 6px); }
.ccdn-lv-det { margin-top: 2px; }
.ccdn-lv-det summary { cursor: pointer; font-weight: 700; color: var(--ccdn-primary-deep); min-height: 40px; display: flex; align-items: center; }
.ccdn-lv-tbl { font-size: 14.5px; }
.ccdn-lv-ytbl tr.is-cur th, .ccdn-lv-ytbl tr.is-cur td { background: #EFF6FF; }
.ccdn-lv-ytbl tr.is-cur th small { display: inline; font-weight: 600; color: var(--ccdn-muted); }

.ccdn-lv-one { margin: 0; padding: 8px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #F8FAFC; font-size: 14.5px; color: var(--ccdn-ink); }
.ccdn-lv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-lv-steps li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--ccdn-border-strong); }
.ccdn-lv-steps li .t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15.5px; color: var(--ccdn-ink); }
.ccdn-lv-steps li .b { font-size: 13px; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: #DBEAFE; color: #1E3A8A; }
.ccdn-lv-steps li .bar { height: 10px; border-radius: 5px; background: #E2E8F0; overflow: hidden; }
.ccdn-lv-steps li .bar i { display: block; height: 100%; background: var(--ccdn-primary); }
.ccdn-lv-steps li.is-future .bar i { background: #60A5FA; }
.ccdn-lv-steps li.is-past .t { color: #334155; }
.ccdn-lv-steps li p { margin: 0; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-lv-steps li p.y { color: var(--ccdn-body); }
.ccdn-lv-export { padding-top: 8px; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-lv-export .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-lv-copied { font-size: 13.5px; color: #166534; font-weight: 600; }
.ccdn-lv-gt th small { display: block; margin-top: 2px; }

@media (min-width: 560px) { .ccdn-lv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 768px) { .ccdn-lv-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } }
@media (min-width: 1024px) { .ccdn-lv-layout { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); align-items: start; } .ccdn-lv-head { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1200px) { .ccdn-lv-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
@media (max-width: 480px) { .ccdn-lv-big span { font-size: 60px; } .ccdn-lv-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .ccdn-lv-seg { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ccdn-lv-mo { transition: none; } }
.ccdn-lv-mo { grid-template-columns: minmax(0, 1fr) auto; }
.ccdn-lv-mo .bar { min-width: 0; width: 100%; }
.ccdn-lv-mo .w, .ccdn-lv-mo .s { white-space: nowrap; }
@media (max-width: 479px) { .ccdn-lv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ccdn-lv-mo { grid-template-areas: "m s" "bar bar" "w a"; }
.ccdn-lv-mo .s { text-align: right; }
@media (max-width: 359px) { .ccdn-lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ccdn-lv-mo { display: flex; flex-direction: column; justify-content: space-between; gap: 5px; }
.ccdn-lv-mo .r { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; min-width: 0; }
.ccdn-lv-mo .bar { flex: 0 0 8px; }
.ccdn-lv-mo { align-items: stretch; } .ccdn-lv-mo .r { width: 100%; }
@media (min-width: 1024px) and (max-width: 1279px) { .ccdn-lv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ccdn-lv-tbl thead th, .ccdn-lv-tbl tbody th, .ccdn-lv-tbl td { padding-right: 8px; overflow-wrap: anywhere; }
.ccdn-lv-tbl { table-layout: auto; }
.ccdn-lv-sec h2 { margin: 0; font-size: 18px; }

/* ==========================================================================
   TOOL-11 — Tính ngày báo trước nghỉ việc, thử việc, hết hạn hợp đồng (.ccdn-lb-*).  Identity: a COUNTING CALENDAR — the answer is a date, and under it every day of the limit is drawn on real month grids
   (the day notice is given, the numbered days, the weekends and holidays that are skipped, the last day). Three jobs share one counting rule. Grid cells, hatching for days off, no dial, no ledger.
   ========================================================================== */
.ccdn-lb { display: grid; gap: 16px; min-width: 0; }
.ccdn-lb-med { margin: 0; padding: 10px 14px; border-left: 4px solid var(--ccdn-primary); background: #EFF6FF; color: #1E3A8A; border-radius: 0 var(--ccdn-radius-sm) var(--ccdn-radius-sm) 0; font-size: 14.5px; }
.ccdn-lb-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ccdn-lb-form { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ccdn-lb-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.ccdn-lb-fs legend { padding: 0; margin-bottom: 6px; }
.ccdn-lb-fs2 { border: 0; margin: 0; padding: 0; min-width: 0; }
.ccdn-lb [hidden] { display: none !important; }
.ccdn-lb-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-lb-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ccdn-lb-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.ccdn-lb-seg.is-col { grid-template-columns: minmax(0, 1fr); }
.ccdn-lb-opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border: 1px solid var(--ccdn-border-strong); border-radius: 999px; background: var(--ccdn-surface); cursor: pointer; font-size: 14.5px; line-height: 1.3; }
.ccdn-lb-opt input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--ccdn-primary); }
.ccdn-lb-opt.is-on { border-color: var(--ccdn-primary); background: #EFF6FF; box-shadow: inset 0 0 0 1px var(--ccdn-primary); font-weight: 600; }
.ccdn-lb-opt:focus-within { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-lb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ccdn-lb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ccdn-lb-chip { min-height: 36px; padding: 4px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: 999px; background: var(--ccdn-surface); color: var(--ccdn-primary-deep); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ccdn-lb-chip:hover { border-color: var(--ccdn-primary); background: #EFF6FF; }
.ccdn-lb-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--ccdn-ink); cursor: pointer; }
.ccdn-lb-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ccdn-primary); }
.ccdn-lb-adv { border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); padding: 10px 14px; background: #F8FAFC; display: grid; gap: 12px; }
.ccdn-lb-adv summary { cursor: pointer; font-weight: 700; color: var(--ccdn-ink); min-height: 36px; display: flex; align-items: center; }
.ccdn-lb-adv[open] summary { margin-bottom: 4px; }
.ccdn-lb-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-lb-note { margin: 0; }

.ccdn-lb-out { display: grid; gap: 16px; min-width: 0; align-content: start; }
.ccdn-lb-head { display: grid; gap: 8px; padding: 0 0 14px; border-bottom: 2px solid var(--ccdn-ink); min-width: 0; }
.ccdn-lb-kick { margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-lb-big { margin: 0; line-height: 1.1; }
.ccdn-lb-big span { font-size: 38px; font-weight: 800; color: var(--ccdn-primary-deep); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ccdn-lb-big.is-ghost span { color: #64748B; }
.ccdn-lb-head.is-over .ccdn-lb-big span { color: #B91C1C; }
.ccdn-lb-sum { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-lb-verdict { margin: 0; padding: 8px 12px; border-left: 4px solid #15803D; background: #F0FDF4; font-size: 15px; font-weight: 700; color: #14532D; }
.ccdn-lb-verdict.over { border-left-color: #B91C1C; background: #FEF2F2; color: #7F1D1D; }
.ccdn-lb-alt { margin: 0; padding: 8px 12px; border-left: 4px solid #D97706; background: #FFFBEB; font-size: 14px; color: #78350F; }
.ccdn-lb-warn { margin: 0; padding: 8px 12px; border-left: 4px solid #D97706; background: #FFFBEB; font-size: 14px; color: #78350F; }
.ccdn-lb-facts { margin: 4px 0 0; display: grid; gap: 0; }
.ccdn-lb-facts > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dotted #94A3B8; }
.ccdn-lb-facts > div:last-child { border-bottom: 0; }
.ccdn-lb-facts dt { font-size: 13.5px; color: var(--ccdn-muted); font-weight: 600; }
.ccdn-lb-facts dd { margin: 0; font-size: 15px; color: var(--ccdn-ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ccdn-lb-facts dd small { display: block; font-weight: 400; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-lb-empty { padding: 0 0 6px; }
.ccdn-lb-hint { margin: 10px 0 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-lb-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-lb-sec h2 { margin: 0; font-size: 18px; }

.ccdn-lb-cal { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ccdn-lb-cal .mo { min-width: 0; }
.ccdn-lb-cal .mh { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ccdn-ink); padding: 0 0 4px; border-bottom: 2px solid var(--ccdn-ink); margin-bottom: 4px; }
.ccdn-lb-cal .g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ccdn-lb-cal .w { font-size: 11.5px; font-weight: 700; color: var(--ccdn-muted); text-align: center; padding: 2px 0; }
.ccdn-lb-cal .w.we { color: #B45309; }
.ccdn-lb-cal .e { min-height: 44px; }
.ccdn-lb-cal .d { position: relative; min-height: 44px; border: 1px solid #E2E8F0; border-radius: 4px; background: #fff; padding: 2px 3px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; }
.ccdn-lb-cal .d b { font-size: 11px; font-weight: 600; color: #475569; line-height: 1.1; }
.ccdn-lb-cal .d i { font-style: normal; font-size: 15px; font-weight: 800; color: #1E3A8A; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.ccdn-lb-cal .d i.tag { font-size: 11px; letter-spacing: -.02em; color: var(--ccdn-primary-deep); white-space: nowrap; }
.ccdn-lb-cal .d.off { background: repeating-linear-gradient(135deg, #F1F5F9 0 5px, #E2E8F0 5px 10px); }
.ccdn-lb-cal .d.hol { border-top: 3px solid #D97706; }
.ccdn-lb-cal .d.r-counted { background: #DBEAFE; border-color: #93C5FD; }
.ccdn-lb-cal .d.r-counted.off { background: repeating-linear-gradient(135deg, #DBEAFE 0 5px, #BFDBFE 5px 10px); }
.ccdn-lb-cal .d.r-notice, .ccdn-lb-cal .d.r-expiry { border: 2px solid var(--ccdn-primary); background: #fff; }
.ccdn-lb-cal .d.r-notice.off, .ccdn-lb-cal .d.r-expiry.off { background: repeating-linear-gradient(135deg, #F1F5F9 0 5px, #E2E8F0 5px 10px); }
.ccdn-lb-cal .d.r-rolled { border-style: dashed; border-color: #D97706; background: #FFFBEB; }
.ccdn-lb-cal .d.r-rolled.off { background: repeating-linear-gradient(135deg, #FFFBEB 0 5px, #FEF3C7 5px 10px); }
.ccdn-lb-cal .d.last { background: var(--ccdn-ink); border-color: var(--ccdn-ink); }
.ccdn-lb-cal .d.last b, .ccdn-lb-cal .d.last i { color: #fff; }
.ccdn-lb-cal .hl { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: #92400E; }
.ccdn-lb-cal .gap { margin: 0; font-size: 13px; color: var(--ccdn-muted); text-align: center; padding: 4px 0; }
.ccdn-lb-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-lb-legend li::before { content: ""; display: inline-block; width: 14px; height: 12px; margin-right: 6px; border: 1px solid #E2E8F0; border-radius: 3px; vertical-align: -2px; background: #fff; }
.ccdn-lb-legend li.lg-notice::before { border: 2px solid var(--ccdn-primary); }
.ccdn-lb-legend li.lg-count::before { background: #DBEAFE; border-color: #93C5FD; }
.ccdn-lb-legend li.lg-last::before { background: var(--ccdn-ink); border-color: var(--ccdn-ink); }
.ccdn-lb-legend li.lg-off::before { background: repeating-linear-gradient(135deg, #F1F5F9 0 3px, #CBD5E1 3px 6px); }
.ccdn-lb-legend li.lg-roll::before { border: 1px dashed #D97706; background: #FFFBEB; }
.ccdn-lb-det { margin-top: 2px; }
.ccdn-lb-det summary { cursor: pointer; font-weight: 700; color: var(--ccdn-primary-deep); min-height: 40px; display: flex; align-items: center; }
.ccdn-lb-tbl { font-size: 14.5px; }
.ccdn-lb-tbl thead th, .ccdn-lb-tbl tbody th, .ccdn-lb-tbl td { padding-right: 8px; overflow-wrap: anywhere; }
.ccdn-lb-export { padding-top: 8px; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-lb-export .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-lb-copied { font-size: 13.5px; color: #166534; font-weight: 600; }
.ccdn-lb-gt th small { display: block; margin-top: 2px; }

@media (min-width: 560px) { .ccdn-lb-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ccdn-lb-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ccdn-lb-layout { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); align-items: start; } .ccdn-lb-tabs { grid-template-columns: minmax(0, 1fr); } .ccdn-lb-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ccdn-lb-big span { font-size: 44px; } }
@media (max-width: 480px) { .ccdn-lb-big span { font-size: 30px; } .ccdn-lb-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .ccdn-lb-seg { grid-template-columns: minmax(0, 1fr); } .ccdn-lb-cal .d { min-height: 40px; } .ccdn-lb-cal .e { min-height: 40px; } }

.ccdn-lb-cal .d.last { background: #0F172A !important; border-color: #0F172A !important; } .ccdn-lb-cal .d.last b, .ccdn-lb-cal .d.last i { color: #fff !important; }

.ccdn-lb-check input { flex: 0 0 22px; }
.ccdn-lb-cal .d i.n3 { font-size: 12.5px; letter-spacing: -.03em; }

/* ==========================================================================
   TOOL-12 — Năm nhuận (.ccdn-nn-*).  Identity: a YEAR PLATE — one year in, two verdicts out (dương lịch: 29/02; âm lịch: tháng nhuận) side by side, and a plate of every year 1969–2049 where the two kinds of
   leap year are read together. Verdict panels with a thick ruled edge, a decade plate of year keys; no dial, no calendar grid of days, no ledger rows.
   ========================================================================== */
.ccdn-nn { display: grid; gap: 16px; min-width: 0; }
.ccdn-nn [hidden] { display: none !important; }
.ccdn-nn-form { display: grid; gap: 12px; max-width: 460px; min-width: 0; }
.ccdn-nn-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-nn-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; }
.ccdn-nn-stepper .ccdn-btn { padding: 0; font-size: 22px; line-height: 1; min-height: 44px; }
.ccdn-nn-stepper input { text-align: center; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; }
.ccdn-nn-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-nn-note { margin: 0; }
.ccdn-nn-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-nn-yr { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-nn-verdicts { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ccdn-nn-vd { display: grid; gap: 4px; padding: 12px 14px 12px 16px; border: 1px solid var(--ccdn-border-strong); border-left: 8px solid #94A3B8; border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; background: #fff; min-width: 0; }
.ccdn-nn-vd .k { margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-nn-vd .w { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--ccdn-ink); }
.ccdn-nn-vd .s { margin: 0; font-size: 15px; color: var(--ccdn-body); }
.ccdn-nn-vd .s strong { color: var(--ccdn-ink); }
.ccdn-nn-vd.is-solar.is-yes { border-left-color: #0F172A; background: #F1F5F9; }
.ccdn-nn-vd.is-lunar.is-yes { border-left-color: var(--ccdn-primary); background: #EFF6FF; }
.ccdn-nn-vd.is-yes .w { color: var(--ccdn-primary-deep); }
.ccdn-nn-vd.is-solar.is-yes .w { color: #0F172A; }
.ccdn-nn-vd.is-no .w { color: #475569; font-weight: 700; }
.ccdn-nn-vd.is-na { border-left-color: #CBD5E1; background: #F8FAFC; border-style: dashed; border-left-style: solid; }
.ccdn-nn-vd.is-na .w { font-size: 24px; color: #475569; }
.ccdn-nn-double { margin: 0; padding: 8px 12px; border-left: 4px solid #D97706; background: #FFFBEB; font-size: 15px; color: #78350F; }
.ccdn-nn-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-nn-sec h2 { margin: 0; font-size: 18px; }
.ccdn-nn-sec h3 { margin: 0 0 6px; font-size: 15px; }
.ccdn-nn-why { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ccdn-nn-why p { margin: 6px 0 0; font-size: 15px; color: var(--ccdn-body); }
.ccdn-nn-steps { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-nn-steps li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; color: var(--ccdn-ink); }
.ccdn-nn-steps li b { font-variant-numeric: tabular-nums; }
.ccdn-nn-steps li b.y { color: #166534; } .ccdn-nn-steps li b.n { color: #475569; }
.ccdn-nn-months { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ccdn-nn-months li { display: grid; gap: 1px; padding: 6px 8px; border: 1px solid var(--ccdn-border-strong); border-radius: 6px; background: #fff; min-width: 0; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-nn-months li b { font-size: 14px; color: var(--ccdn-ink); }
.ccdn-nn-months li.is-leap { border: 2px solid var(--ccdn-primary); background: #EFF6FF; }
.ccdn-nn-months li.is-leap b { color: var(--ccdn-primary-deep); }
.ccdn-nn-plate { display: grid; gap: 8px; min-width: 0; }
.ccdn-nn-plate .dec { display: grid; gap: 4px; min-width: 0; }
.ccdn-nn-plate .dec h3 { margin: 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-nn-plate .row { display: grid; gap: 4px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ccdn-nn-plate .y { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; min-height: 48px; padding: 4px 2px; border: 1px solid #CBD5E1; border-radius: 6px; background: #fff; color: var(--ccdn-ink); font: inherit; cursor: pointer; min-width: 0; }
.ccdn-nn-plate .y b { font-size: 14px; font-variant-numeric: tabular-nums; }
.ccdn-nn-plate .y span { display: flex; gap: 2px; align-items: center; min-height: 14px; }
.ccdn-nn-plate .y i { font-style: normal; font-size: 11px; font-weight: 800; line-height: 1; padding: 2px 3px; border-radius: 3px; white-space: nowrap; }
.ccdn-nn-plate .y i.ds { background: #0F172A; color: #fff; }
.ccdn-nn-plate .y i.dl { background: var(--ccdn-primary); color: #fff; min-width: 16px; text-align: center; }
.ccdn-nn-plate .y.s { background: #F1F5F9; border-color: #94A3B8; }
.ccdn-nn-plate .y.l { border-color: var(--ccdn-primary); }
.ccdn-nn-plate .y.is-cur { outline: 3px solid #F59E0B; outline-offset: 1px; }
.ccdn-nn-plate .y:hover { box-shadow: 0 0 0 2px #93C5FD; }
.ccdn-nn-plate .y:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-nn-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-nn-legend li::before { content: ""; display: inline-block; width: 14px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -2px; border: 1px solid #94A3B8; }
.ccdn-nn-legend li.lg-s::before { background: #0F172A; border-color: #0F172A; }
.ccdn-nn-legend li.lg-l::before { background: var(--ccdn-primary); border-color: var(--ccdn-primary); }
.ccdn-nn-legend li.lg-c::before { background: #fff; outline: 2px solid #F59E0B; border-color: #fff; }
.ccdn-nn-tbl { font-size: 14.5px; }
.ccdn-nn-tbl thead th, .ccdn-nn-tbl tbody th, .ccdn-nn-tbl td { padding-right: 8px; overflow-wrap: anywhere; }
.ccdn-nn-tbl td .ccdn-btn-text { min-height: 32px; font-weight: 700; }
.ccdn-nn-tbl td .none { color: var(--ccdn-muted); }
.ccdn-nn-tbl tr.is-leap th, .ccdn-nn-tbl tr.is-leap td { background: #F1F5F9; }
.ccdn-nn-export .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-nn-copied { font-size: 13.5px; color: #166534; font-weight: 600; }
.ccdn-nn-gt th small { display: block; margin-top: 2px; }
.ccdn-nn-gt td p { margin: 0 0 6px; }

@media (min-width: 640px) { .ccdn-nn-verdicts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ccdn-nn-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ccdn-nn-months { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ccdn-nn-plate .row { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ccdn-nn-vd .w { font-size: 38px; } }
@media (max-width: 480px) { .ccdn-nn-vd .w { font-size: 28px; } }
@media (max-width: 479px) { .ccdn-nn-plate .row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   TOOL-13 — 24 tiết khí (.ccdn-st-*).  Identity: a YEAR RULER — the 24 terms as ticks on one line (tall tick = trung khí) above the lunar months of the same year, so the leap month (the one no tall tick crosses)
   can be seen; plus a "today" strip, a day lookup and a one-term-across-years table with a date histogram. No dial, no year plate, no verdict panels.
   ========================================================================== */
.ccdn-st { display: grid; gap: 16px; min-width: 0; }
.ccdn-st [hidden] { display: none !important; }
.ccdn-st-now { padding: 10px 14px; border-left: 4px solid var(--ccdn-primary); background: #EFF6FF; font-size: 15px; color: var(--ccdn-body); }
.ccdn-st-now p { margin: 0; }
.ccdn-st-now .lab { font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .08em; color: var(--ccdn-primary-deep); margin-right: 4px; }
.ccdn-st-now .ccdn-btn-text { min-height: 32px; padding: 4px 2px; font-weight: 700; }
.ccdn-st-form { display: grid; gap: 12px; max-width: 520px; min-width: 0; }
.ccdn-st-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-st-modes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ccdn-st-modes legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ccdn-st-modes .seg { position: relative; flex: 1 1 auto; min-width: 0; }
.ccdn-st-modes .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccdn-st-modes .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); background: #fff; color: var(--ccdn-ink); font-weight: 700; font-size: 15px; }
.ccdn-st-modes .seg input:checked + span { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-st-modes .seg input:focus-visible + span { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-st-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; }
.ccdn-st-stepper .ccdn-btn { padding: 0; font-size: 22px; line-height: 1; min-height: 44px; }
.ccdn-st-stepper input { text-align: center; font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; min-width: 0; }
.ccdn-st-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-st-note { margin: 0; }
.ccdn-st-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-st-yr { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-st-sum { margin: 0; font-size: 16px; color: var(--ccdn-body); }
.ccdn-st-sum strong { color: var(--ccdn-ink); }
.ccdn-st-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-st-sec h2 { margin: 0; font-size: 18px; }
.ccdn-st-card { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--ccdn-border-strong); border-top: 4px solid var(--ccdn-ink); border-radius: 0 0 var(--ccdn-radius-md) var(--ccdn-radius-md); background: #fff; min-width: 0; }
.ccdn-st-card .k { margin: 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-st-card .w { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--ccdn-primary-deep); overflow-wrap: anywhere; }
.ccdn-st-card .w .han { font-size: 22px; font-weight: 600; color: var(--ccdn-muted); }
.ccdn-st-card .s { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-st-card .s strong { color: var(--ccdn-ink); }
.ccdn-st-note-line { margin: 0; padding: 8px 12px; border-left: 4px solid var(--ccdn-warning); background: #FFFBEB; font-size: 15px; color: #78350F; }
.ccdn-st-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.ccdn-st-jump .ccdn-btn { min-height: 44px; }
.ccdn-st-badge { display: inline-block; font-size: 12px; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 4px; white-space: nowrap; vertical-align: 1px; }
.ccdn-st-badge.is-khi { background: var(--ccdn-primary); color: #fff; }
.ccdn-st-badge.is-tiet { background: #fff; color: var(--ccdn-muted); border: 1px solid #94A3B8; }
.ccdn-st-badge.is-now { background: #0F172A; color: #fff; }
.ccdn-st-warn { color: #B45309; font-weight: 800; text-decoration: none; cursor: help; }
.ccdn-st-up { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-st-up li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--ccdn-border); font-size: 15px; color: var(--ccdn-body); }
.ccdn-st-up .nm { font-weight: 800; color: var(--ccdn-ink); margin-right: 6px; }
.ccdn-st-up .far { color: var(--ccdn-muted); font-size: 13.5px; }
.ccdn-st-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ccdn-st-dist li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ccdn-st-dist .d { font-weight: 800; color: var(--ccdn-ink); }
.ccdn-st-dist .bar { display: block; height: 14px; background: var(--ccdn-primary); border-radius: 2px; min-width: 3px; }
.ccdn-st-dist .c { color: var(--ccdn-muted); text-align: right; }
.ccdn-st-export .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-st-copied { font-size: 13.5px; color: #166534; font-weight: 600; }
/* the ruler */
.ccdn-st-ruler { position: relative; height: 118px; margin: 8px 0 4px; min-width: 0; }
.ccdn-st-ruler .axis { position: absolute; left: 0; right: 0; top: 0; height: 18px; border-bottom: 1px solid #CBD5E1; }
.ccdn-st-ruler .axis span { position: absolute; top: 0; height: 18px; line-height: 17px; font-size: 11px; color: var(--ccdn-muted); text-align: center; border-left: 1px solid var(--ccdn-border); overflow: hidden; }
.ccdn-st-ruler .lane { position: absolute; left: 0; right: 0; }
.ccdn-st-ruler .tl { top: 22px; height: 34px; }
.ccdn-st-ruler .tl .t { position: absolute; bottom: 0; width: 2px; height: 12px; margin-left: -1px; background: #475569; }
.ccdn-st-ruler .tl .t.is-khi { height: 32px; width: 4px; margin-left: -2px; }
.ccdn-st-ruler .t.s-xuan { background: #16A34A; } .ccdn-st-ruler .t.s-ha { background: #D97706; } .ccdn-st-ruler .t.s-thu { background: #475569; } .ccdn-st-ruler .t.s-dong { background: #1D4ED8; }
.ccdn-st-ruler .bands { position: absolute; left: 0; right: 0; top: 60px; height: 6px; }
.ccdn-st-ruler .bands b { position: absolute; top: 0; height: 6px; }
.ccdn-st-ruler .bands b.s-xuan { background: #16A34A; } .ccdn-st-ruler .bands b.s-ha { background: #D97706; } .ccdn-st-ruler .bands b.s-thu { background: #475569; } .ccdn-st-ruler .bands b.s-dong { background: #1D4ED8; }
.ccdn-st-ruler .ll { top: 72px; height: 40px; background: #F8FAFC; border: 1px solid var(--ccdn-border); }
.ccdn-st-ruler .ll .m { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--ccdn-ink); border-left: 1px solid #94A3B8; background: #fff; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ccdn-st-ruler .ll .m:nth-child(even) { background: #F1F5F9; }
.ccdn-st-ruler .ll .m.is-leap { background: repeating-linear-gradient(135deg, #DBEAFE 0 5px, #fff 5px 10px); color: var(--ccdn-primary-deep); border: 2px solid var(--ccdn-primary); }
.ccdn-st-ruler .ll .m.is-odd { box-shadow: inset 0 -4px 0 #D97706; }
.ccdn-st-ruler .g { position: absolute; top: 24px; height: 88px; width: 0; margin-left: 0; border-left: 1px dashed rgba(29,78,216,.6); }
.ccdn-st-ruler .today { position: absolute; top: 0; height: 114px; width: 2px; margin-left: -1px; background: #0F172A; }
.ccdn-st-ruler .today::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: #0F172A; border-bottom-width: 0; }
.ccdn-st-legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-st-legend li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 2px; }
.ccdn-st-legend .lg-t::before { width: 4px; height: 9px; background: #475569; margin-right: 8px; vertical-align: 0; }
.ccdn-st-legend .lg-k::before { width: 4px; height: 14px; background: #475569; border-right: 1px dashed #1D4ED8; margin-right: 8px; vertical-align: -2px; }
.ccdn-st-legend .lg-m::before { border: 2px solid var(--ccdn-primary); background: repeating-linear-gradient(135deg, #DBEAFE 0 3px, #fff 3px 6px); }
.ccdn-st-legend .lg-n::before { width: 3px; background: #0F172A; border-radius: 0; margin-right: 8px; }
/* tables */
.ccdn-st-scroll { min-width: 0; }
.ccdn-st-tbl { font-size: 14.5px; margin-top: 4px; }
.ccdn-st-tbl thead th, .ccdn-st-tbl tbody th, .ccdn-st-tbl td { padding-right: 8px; overflow-wrap: anywhere; }
.ccdn-st-tbl tbody th .nm { font-weight: 800; color: var(--ccdn-ink); }
.ccdn-st-tbl tbody th .han { font-weight: 500; color: var(--ccdn-muted); font-size: 13.5px; }
.ccdn-st-tbl tr.grp th { width: auto; padding: 6px 8px; background: #F1F5F9; border-bottom: 1px solid var(--ccdn-border-strong); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-st-tbl tr.is-khi th, .ccdn-st-tbl tr.is-khi td { background: #F8FAFF; }
.ccdn-st-tbl tr.is-now th, .ccdn-st-tbl tr.is-now td { background: #DBEAFE; }
.ccdn-st-tbl tr.is-leap th, .ccdn-st-tbl tr.is-leap td { background: #EFF6FF; }
.ccdn-st-tbl tr.is-odd th, .ccdn-st-tbl tr.is-odd td { background: #FFFBEB; }
.ccdn-st-tbl td .none { color: var(--ccdn-muted); }
@media (max-width: 899px) {
  .ccdn-st-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-st-tbl tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--ccdn-border); }
  .ccdn-st-tbl tbody th, .ccdn-st-tbl td { display: block; width: auto; border: 0; padding: 2px 8px; }
  .ccdn-st-tbl tbody th { padding-bottom: 4px; font-size: 16px; }
  .ccdn-st-tbl td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ccdn-muted); font-size: 13.5px; }
  .ccdn-st-tbl tr.grp { padding: 0; border-bottom: 0; }
  .ccdn-st-tbl tr.grp th { padding: 6px 8px; }
}
@media (min-width: 640px) { .ccdn-st-up li { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: baseline; gap: 10px; } .ccdn-st-up .when { display: block; } }
@media (min-width: 1024px) { .ccdn-st-card .w { font-size: 40px; } .ccdn-st-ruler { height: 124px; } }
@media (max-width: 480px) { .ccdn-st-card .w { font-size: 28px; } .ccdn-st-modes .seg span { font-size: 14px; padding: 6px 8px; } }
@media (min-width: 900px) { .ccdn-st-mtbl td[data-label="Mùng 1"], .ccdn-st-ttbl td[data-label="Ngày"] { white-space: nowrap; } }

/* ==========================================================================
   TOOL-14 — Đổi múi giờ (.ccdn-tz-*).  Identity: PARALLEL HOUR STRIPS — one source-local day cut in 30-minute cells for every place at once (work / awake / night), a cursor on the chosen time,
   and a plain list of the windows where everyone is up. No dial, no ruler, no calendar plate.
   ========================================================================== */
.ccdn-tz { display: grid; gap: 16px; min-width: 0; }
.ccdn-tz [hidden] { display: none !important; }
.ccdn-tz-form { display: grid; gap: 14px; max-width: 760px; min-width: 0; }
.ccdn-tz-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-tz-modes, .ccdn-tz-choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ccdn-tz-modes legend, .ccdn-tz-choice legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ccdn-tz-modes .seg, .ccdn-tz-choice .seg { position: relative; flex: 1 1 auto; min-width: 0; }
.ccdn-tz-modes .seg input, .ccdn-tz-choice .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccdn-tz-modes .seg span, .ccdn-tz-choice .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); background: #fff; color: var(--ccdn-ink); font-weight: 700; font-size: 15px; }
.ccdn-tz-modes .seg input:checked + span, .ccdn-tz-choice .seg input:checked + span { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-tz-modes .seg input:focus-visible + span, .ccdn-tz-choice .seg input:focus-visible + span { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-tz-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ccdn-tz-grid select, .ccdn-tz-form select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.ccdn-tz-livebar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ccdn-tz-livebar .ccdn-btn { min-height: 40px; }
.ccdn-tz-live { font-size: 13.5px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-tz-live.is-on { color: #166534; }
.ccdn-tz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ccdn-tz-chips .chip { display: inline-flex; align-items: stretch; border: 1px solid var(--ccdn-primary); border-radius: 999px; background: #EFF6FF; color: var(--ccdn-primary-deep); font-size: 14px; font-weight: 700; min-width: 0; max-width: 100%; }
.ccdn-tz-chips .chip > span { padding: 7px 4px 7px 12px; overflow-wrap: anywhere; }
.ccdn-tz-chips .chip button { border: 0; background: transparent; color: var(--ccdn-primary-deep); font-size: 20px; line-height: 1; min-width: 36px; padding: 0 10px 2px 6px; cursor: pointer; border-radius: 0 999px 999px 0; }
.ccdn-tz-chips .chip button:hover { background: #DBEAFE; }
.ccdn-tz-pop { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ccdn-tz-pop .ccdn-btn { min-height: 38px; padding: 4px 12px; font-size: 14px; }
.ccdn-tz-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; max-width: 320px; }
.ccdn-tz-stepper .ccdn-btn { padding: 0; font-size: 22px; line-height: 1; min-height: 44px; }
.ccdn-tz-stepper input { text-align: center; font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; min-width: 0; }
.ccdn-tz-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-tz-note { margin: 0; }
.ccdn-tz-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-tz-yr { margin: 0; font-size: 15px; font-weight: 800; color: var(--ccdn-ink); }
.ccdn-tz-sum { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-tz-warn { margin: 0; padding: 8px 12px; border-left: 4px solid var(--ccdn-warning); background: #FFFBEB; font-size: 15px; color: #78350F; }
.ccdn-tz-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-tz-sec h2 { margin: 0; font-size: 18px; }
.ccdn-tz-sec h3 { margin: 6px 0 0; font-size: 15px; }
.ccdn-tz-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-tz-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0 10px 12px; border-bottom: 1px solid var(--ccdn-border); border-left: 6px solid #94A3B8; min-width: 0; }
.ccdn-tz-row.p-work { border-left-color: var(--ccdn-primary); }
.ccdn-tz-row.p-awake { border-left-color: #93C5FD; }
.ccdn-tz-row.p-night { border-left-color: #475569; background: #F8FAFC; }
.ccdn-tz-row.is-src { background: #EFF6FF; }
.ccdn-tz-row .who { min-width: 0; display: grid; gap: 1px; }
.ccdn-tz-row .who b { font-size: 16px; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-tz-row .who span { font-size: 13px; color: var(--ccdn-muted); overflow-wrap: anywhere; }
.ccdn-tz-row .clock { text-align: right; display: grid; gap: 0; }
.ccdn-tz-row .clock .t { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-tz-row .clock .d { font-size: 13px; color: var(--ccdn-muted); white-space: nowrap; }
.ccdn-tz-row .meta { grid-column: 1 / -1; display: grid; gap: 1px; font-size: 14px; color: var(--ccdn-body); min-width: 0; }
.ccdn-tz-row .meta .pt { font-weight: 700; color: var(--ccdn-ink); }
.ccdn-tz-row .meta .nx { color: var(--ccdn-muted); font-size: 13.5px; }
.ccdn-tz-strip { --lab: 0px; position: relative; display: grid; gap: 6px; padding-top: 18px; min-width: 0; }
.ccdn-tz-strip .ax { position: absolute; left: var(--lab); right: 0; top: 0; height: 14px; }
.ccdn-tz-strip .ax span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--ccdn-muted); line-height: 14px; }
.ccdn-tz-strip .ax span:first-child { transform: none; } .ccdn-tz-strip .ax span:last-child { transform: translateX(-100%); }
.ccdn-tz-strip .ln { display: grid; gap: 2px; min-width: 0; }
.ccdn-tz-strip .nm { font-size: 12.5px; font-weight: 700; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-tz-strip .cells { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 1px; height: 18px; }
.ccdn-tz-strip .cells i { display: block; position: relative; }
.ccdn-tz-strip .cells i.work { background: var(--ccdn-primary); }
.ccdn-tz-strip .cells i.awake { background: #BFDBFE; }
.ccdn-tz-strip .cells i.night { background: #475569; }
.ccdn-tz-strip .cells i.nd { box-shadow: -2px 0 0 #D97706; }
.ccdn-tz-strip .cells i.nd::after { content: attr(data-d); position: absolute; left: 3px; top: 1px; font-size: 11px; font-style: normal; font-weight: 800; color: #fff; text-shadow: 0 0 2px #0F172A; line-height: 16px; white-space: nowrap; }
.ccdn-tz-strip .cur { position: absolute; left: calc(var(--lab) + (100% - var(--lab)) * var(--p, 0)); top: 14px; bottom: 0; width: 0; border-left: 2px solid #D97706; z-index: 2; pointer-events: none; }
.ccdn-tz-legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-tz-legend li::before { content: ""; display: inline-block; width: 14px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 2px; }
.ccdn-tz-legend .lg-w::before { background: var(--ccdn-primary); } .ccdn-tz-legend .lg-a::before { background: #BFDBFE; } .ccdn-tz-legend .lg-n::before { background: #475569; }
.ccdn-tz-legend .lg-c::before { width: 3px; background: #D97706; border-radius: 0; margin-right: 9px; }
.ccdn-tz-win { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ccdn-tz-win > li.w { border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); padding: 6px 12px 8px; background: #fff; min-width: 0; }
.ccdn-tz-win .ccdn-btn-text { font-weight: 800; min-height: 36px; text-align: left; }
.ccdn-tz-win ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ccdn-tz-win ul li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding: 2px 0; border-top: 1px dotted #CBD5E1; }
.ccdn-tz-win ul li b { font-variant-numeric: tabular-nums; }
.ccdn-tz-export .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-tz-copied { font-size: 13.5px; color: #166534; font-weight: 600; }
.ccdn-tz-scroll { min-width: 0; }
.ccdn-tz-tbl { font-size: 14.5px; margin-top: 4px; }
.ccdn-tz-tbl thead th, .ccdn-tz-tbl tbody th, .ccdn-tz-tbl td { padding-right: 8px; overflow-wrap: anywhere; }
.ccdn-tz-tbl tbody th { font-weight: 700; }
.ccdn-tz-tbl tr.is-future th, .ccdn-tz-tbl tr.is-future td { background: #F8FAFF; }
.ccdn-tz-badge { display: inline-block; font-size: 12px; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 4px; background: #fff; color: var(--ccdn-muted); border: 1px solid #94A3B8; white-space: nowrap; vertical-align: 1px; }
@media (max-width: 899px) {
  .ccdn-tz-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-tz-tbl tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--ccdn-border); }
  .ccdn-tz-tbl tbody th, .ccdn-tz-tbl td { display: block; width: auto; border: 0; padding: 2px 8px; }
  .ccdn-tz-tbl tbody th { padding-bottom: 4px; font-size: 16px; }
  .ccdn-tz-tbl td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ccdn-muted); font-size: 13.5px; }
}
@media (min-width: 700px) { .ccdn-tz-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } .ccdn-tz-row { grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 2fr); align-items: center; } .ccdn-tz-row .meta { grid-column: auto; } .ccdn-tz-strip .ln { grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 10px; } .ccdn-tz-strip { --lab: 200px; } .ccdn-tz-win { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ccdn-tz-row .clock .t { font-size: 26px; } .ccdn-tz-modes .seg span, .ccdn-tz-choice .seg span { font-size: 14px; padding: 6px 8px; } }

/* TOOL-14 mobile refinements: the answer rows stack name over clock, and the quick-add chips are ONE scrollable row so the result starts higher */
@media (max-width: 639px) {
  .ccdn-tz-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ccdn-tz-row .clock { text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .ccdn-tz-pop { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .ccdn-tz-pop .ccdn-btn { flex: 0 0 auto; white-space: nowrap; }
}
.ccdn-tz-form, .ccdn-tz-form > *, .ccdn-tz-form .ccdn-field, .ccdn-tz-pop { min-width: 0; max-width: 100%; }

/* ==========================================================================
   TOOL-15 — Ghép ngày phép với ngày lễ (.ccdn-br-*).  Identity: DAY TILES — each break is a ribbon of calendar tiles (lễ / nghỉ hằng tuần / nghỉ bù / xin phép) so the visitor reads exactly which working days to take;
   a ladder table shows what each extra leave day buys. No dial, no ruler, no parallel strips.
   ========================================================================== */
.ccdn-br { display: grid; gap: 16px; min-width: 0; }
.ccdn-br [hidden] { display: none !important; }
.ccdn-br-form { display: grid; gap: 14px; max-width: 780px; min-width: 0; }
.ccdn-br-form, .ccdn-br-form > *, .ccdn-br-form .ccdn-field { min-width: 0; max-width: 100%; }
.ccdn-br-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-br-modes, .ccdn-br-radios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ccdn-br-modes legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ccdn-br-modes .seg, .ccdn-br-radios .seg { position: relative; flex: 1 1 auto; min-width: 0; }
.ccdn-br-modes .seg input, .ccdn-br-radios .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccdn-br-modes .seg span, .ccdn-br-radios .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); background: #fff; color: var(--ccdn-ink); font-weight: 700; font-size: 15px; }
.ccdn-br-modes .seg input:checked + span, .ccdn-br-radios .seg input:checked + span { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-br-modes .seg input:focus-visible + span, .ccdn-br-radios .seg input:focus-visible + span { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-br-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.ccdn-br-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; max-width: 340px; }
.ccdn-br-stepper .ccdn-btn { padding: 0; font-size: 22px; line-height: 1; min-height: 44px; }
.ccdn-br-stepper input { text-align: center; font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; min-width: 0; }
.ccdn-br-opts { display: grid; gap: 10px; }
.ccdn-br-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ccdn-body); cursor: pointer; }
.ccdn-br-check input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ccdn-primary); }
.ccdn-br-check b { color: var(--ccdn-ink); }
.ccdn-br-scen { display: grid; gap: 10px; padding: 12px 14px; border-left: 4px solid var(--ccdn-warning); background: #FFFBEB; }
.ccdn-br-scen-h { margin: 0; font-weight: 800; color: #78350F; font-size: 15px; }
.ccdn-br-scenbox { display: grid; gap: 6px; }
.ccdn-br-presets { display: grid; gap: 6px; }
.ccdn-br-presets .row { display: flex; flex-wrap: wrap; gap: 6px; }
.ccdn-br-presets .ccdn-btn { min-height: 40px; font-size: 14px; text-align: left; }
.ccdn-br-presets .ccdn-btn[aria-pressed="true"] { background: var(--ccdn-primary); color: #fff; border-color: var(--ccdn-primary); }
.ccdn-br-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-br-note { margin: 0; }
.ccdn-br-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-br-hero { display: grid; gap: 4px; padding: 12px 16px; border-left: 8px solid var(--ccdn-primary); background: #EFF6FF; min-width: 0; }
.ccdn-br-hero .k { margin: 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-br-hero .w { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-br-hero .w b { font-size: 40px; font-weight: 800; color: var(--ccdn-primary-deep); font-variant-numeric: tabular-nums; }
.ccdn-br-hero .s { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-br-hero .s strong { color: var(--ccdn-ink); }
.ccdn-br-warn { margin: 0; padding: 8px 12px; border-left: 4px solid var(--ccdn-warning); background: #FFFBEB; font-size: 15px; color: #78350F; }
.ccdn-br-okline { margin: 0; padding: 8px 12px; border-left: 4px solid var(--ccdn-success); background: #F0FDF4; font-size: 15px; color: #14532D; }
.ccdn-br-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-br-sec h2 { margin: 0; font-size: 18px; }
.ccdn-br-breaks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-br-brk { display: grid; gap: 6px; padding: 12px 0 14px; border-bottom: 1px solid var(--ccdn-border); min-width: 0; }
.ccdn-br-brk.is-past { opacity: .72; }
.ccdn-br-brk .hd { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.ccdn-br-brk .nm { font-size: 17px; color: var(--ccdn-ink); }
.ccdn-br-brk .rng { margin: 0; font-size: 14.5px; color: var(--ccdn-body); }
.ccdn-br-brk .act { margin: 0; font-size: 15px; color: var(--ccdn-ink); }
.ccdn-br-brk .act.none { color: var(--ccdn-muted); }
.ccdn-br-brk .hint { color: #78350F; }
.ccdn-br-chip { display: inline-block; font-size: 12px; font-weight: 800; line-height: 1; padding: 4px 7px; border-radius: 4px; background: #fff; color: var(--ccdn-muted); border: 1px solid #94A3B8; white-space: nowrap; }
.ccdn-br-chip.is-ok { background: #F0FDF4; color: #14532D; border-color: #16A34A; }
.ccdn-br-chip.is-warn { background: #FFFBEB; color: #78350F; border-color: #D97706; }
.ccdn-br-tiles { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ccdn-br-tiles .t { display: grid; grid-template-rows: auto auto auto auto; justify-items: center; width: 44px; padding: 3px 0 4px; border-radius: 6px; border: 1px solid #94A3B8; background: #fff; color: var(--ccdn-ink); line-height: 1.15; }
.ccdn-br-tiles .wd { font-size: 11px; font-weight: 700; }
.ccdn-br-tiles .dn { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ccdn-br-tiles .mo { font-size: 11px; color: inherit; opacity: .85; min-height: 12px; }
.ccdn-br-tiles .ty { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.ccdn-br-tiles .t-h { background: #0F172A; border-color: #0F172A; color: #fff; }
.ccdn-br-tiles .t-r { background: #E2E8F0; border-color: #CBD5E1; color: #334155; }
.ccdn-br-tiles .t-b { background: repeating-linear-gradient(135deg, #DBEAFE 0 4px, #fff 4px 8px); border: 2px solid var(--ccdn-primary); color: var(--ccdn-primary-deep); }
.ccdn-br-tiles .t-p { background: #FEF3C7; border: 2px solid #D97706; color: #78350F; }
.ccdn-br-tiles .t-w { background: #fff; border-style: dashed; }
.ccdn-br-tiles .is-sel { box-shadow: 0 0 0 3px #93C5FD; }
.ccdn-br-legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-br-legend li::before { content: ""; display: inline-block; width: 14px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 3px; border: 1px solid #94A3B8; }
.ccdn-br-legend .t-h::before { background: #0F172A; border-color: #0F172A; } .ccdn-br-legend .t-r::before { background: #E2E8F0; } .ccdn-br-legend .t-b::before { background: repeating-linear-gradient(135deg, #DBEAFE 0 3px, #fff 3px 6px); border: 2px solid var(--ccdn-primary); } .ccdn-br-legend .t-p::before { background: #FEF3C7; border: 2px solid #D97706; }
.ccdn-br-facts { margin: 4px 0 0; display: grid; gap: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-br-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; }
.ccdn-br-facts dt { margin: 0; color: var(--ccdn-muted); } .ccdn-br-facts dd { margin: 0; font-weight: 800; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-br-scroll { min-width: 0; }
.ccdn-br-tbl { font-size: 14.5px; margin-top: 4px; }
.ccdn-br-tbl thead th, .ccdn-br-tbl tbody th, .ccdn-br-tbl td { padding-right: 8px; overflow-wrap: anywhere; vertical-align: top; }
.ccdn-br-tbl tbody th { font-weight: 800; }
.ccdn-br-tbl td small { display: block; color: var(--ccdn-muted); font-size: 12.5px; }
.ccdn-br-tbl td small.up { display: inline; color: #166534; font-weight: 800; }
.ccdn-br-tbl tr.is-past th, .ccdn-br-tbl tr.is-past td { opacity: .7; }
.ccdn-br-export .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-br-copied { font-size: 13.5px; color: #166534; font-weight: 600; }
@media (max-width: 899px) {
  .ccdn-br-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-br-tbl tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--ccdn-border); }
  .ccdn-br-tbl tbody th, .ccdn-br-tbl td { display: block; width: auto; border: 0; padding: 2px 8px; }
  .ccdn-br-tbl tbody th { padding-bottom: 4px; font-size: 16px; }
  .ccdn-br-tbl td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ccdn-muted); font-size: 13.5px; }
}
@media (min-width: 700px) { .ccdn-br-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ccdn-br-grid[data-mode~="range"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ccdn-br-opts { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; } .ccdn-br-opts .ccdn-br-check { grid-column: 2; } .ccdn-br-opts .ccdn-field { grid-row: 1 / span 2; } }
@media (min-width: 1024px) { .ccdn-br-hero .w b { font-size: 48px; } .ccdn-br-tiles .t { width: 48px; } }
@media (max-width: 480px) { .ccdn-br-hero .w { font-size: 20px; } .ccdn-br-hero .w b { font-size: 34px; } .ccdn-br-modes .seg span, .ccdn-br-radios .seg span { font-size: 14px; padding: 6px 8px; } .ccdn-br-tiles .t { width: 40px; } .ccdn-br-tiles .dn { font-size: 16px; } }

/* TOOL-15 mobile: year and leave side by side, secondary help only for screen readers, so the answer starts higher */
@media (max-width: 699px) {
  .ccdn-br-grid[data-mode~="plan"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ccdn-br-grid[data-mode~="range"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ccdn-br-stepper { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 4px; }
  .ccdn-br-stepper .ccdn-btn { min-height: 44px; font-size: 20px; }
  .ccdn-br-stepper input { font-size: 17px; padding-left: 4px; padding-right: 4px; }
  #ccdn-br-yearhelp, #ccdn-br-leavehelp, .ccdn-br-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ccdn-br-grid .ccdn-label { font-size: 13px; }
}

/* ============================================================ TOOL-16 /tinh-ngay-nghi-thai-san/ — leave rail (.ccdn-mt-*) */
.ccdn-mt { --mt-a: #0F766E; --mt-a-deep: #115E59; --mt-a-soft: #E7F5F2; --mt-b: #1E40AF; --mt-b-soft: #EAF1FE; --mt-warn: #78350F; display: grid; gap: 16px; min-width: 0; }
.ccdn-mt [hidden] { display: none !important; }
.ccdn-mt-form { display: grid; gap: 14px; max-width: 820px; min-width: 0; }
.ccdn-mt-form, .ccdn-mt-form > *, .ccdn-mt-form .ccdn-field { min-width: 0; max-width: 100%; }
.ccdn-mt-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-mt-modes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ccdn-mt-modes legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ccdn-mt-modes .seg { position: relative; flex: 1 1 140px; min-width: 0; }
.ccdn-mt-modes .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccdn-mt-modes .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 6px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); background: #fff; color: var(--ccdn-ink); font-weight: 700; font-size: 15px; line-height: 1.25; }
.ccdn-mt-modes .seg input:checked + span { background: var(--mt-a); border-color: var(--mt-a); color: #fff; }
.ccdn-mt-modes .seg input:focus-visible + span { outline: 3px solid #5EEAD4; outline-offset: 2px; }
.ccdn-mt-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.ccdn-mt-opts { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.ccdn-mt-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ccdn-body); cursor: pointer; margin-top: 6px; }
.ccdn-mt-opts > .ccdn-mt-check { margin-top: 0; }
.ccdn-mt-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.ccdn-mt-checks .ccdn-mt-check { margin-top: 0; }
.ccdn-mt-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--mt-a); }
.ccdn-mt-blocksbox { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); background: #FAFCFF; }
.ccdn-mt-blocksbox > .ccdn-label { margin: 0; }
.ccdn-mt-brow { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 110px) auto; align-items: end; padding: 6px 0; border-top: 1px solid var(--ccdn-border); }
.ccdn-mt-brow:first-child { border-top: 0; }
.ccdn-mt-brow .ccdn-btn { min-height: 44px; }
#ccdn-mt-addblock { justify-self: start; }
.ccdn-mt-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-mt-note { margin: 0; }
.ccdn-mt-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-mt-out h3 { margin: 6px 0 0; font-size: 18px; color: var(--ccdn-ink); }
.ccdn-mt-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); color: var(--ccdn-body); background: #fff; }
.ccdn-mt-hero { display: grid; gap: 6px; padding: 14px 16px 14px 18px; border-left: 8px solid var(--mt-a); background: var(--mt-a-soft); min-width: 0; border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; }
.ccdn-mt-hero.is-father { border-left-color: var(--mt-b); background: var(--mt-b-soft); }
.ccdn-mt-hero.is-other { border-left-color: #92400E; background: #FEF6E7; }
.ccdn-mt-hero .k { margin: 0; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; color: #334155; }
.ccdn-mt-hero .w { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--ccdn-ink); }
.ccdn-mt-hero .w b { font-size: 26px; font-weight: 800; color: var(--mt-a-deep); font-variant-numeric: tabular-nums; }
.ccdn-mt-hero.is-father .w b { color: var(--mt-b); font-size: 40px; line-height: 1.1; }
.ccdn-mt-hero.is-other .w b { color: #92400E; font-size: 40px; line-height: 1.1; }
.ccdn-mt-hero .w .to { font-weight: 600; color: var(--ccdn-body); font-size: 17px; }
.ccdn-mt-hero .s { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-mt-hero .s b { color: var(--ccdn-ink); }
.ccdn-mt-ribbon { display: grid; gap: 6px; min-width: 0; }
.ccdn-mt-ribbon .ticks { position: relative; height: 18px; border-bottom: 1px solid #94A3B8; }
.ccdn-mt-ribbon .ticks i { position: absolute; bottom: 0; height: 8px; border-left: 1px solid #64748B; }
.ccdn-mt-ribbon .ticks i b { position: absolute; bottom: 8px; left: 2px; font-size: 11px; line-height: 1; font-weight: 700; color: #475569; white-space: nowrap; font-style: normal; }
.ccdn-mt-ribbon .bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid #94A3B8; background: #fff; }
.ccdn-mt-ribbon .bar span { min-width: 3px; }
.ccdn-mt-ribbon .pre, .ccdn-mt-ribbon i.pre { background: #99D8CE; }
.ccdn-mt-ribbon .post, .ccdn-mt-ribbon i.post { background: var(--mt-a); }
.ccdn-mt-ribbon .rec, .ccdn-mt-ribbon i.rec { background: repeating-linear-gradient(135deg, #FDE68A 0 4px, #fff 4px 8px); }
.ccdn-mt-ribbon .bar .post { box-shadow: -2px 0 0 #0F172A inset; }
.ccdn-mt-ribbon .key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ccdn-body); }
.ccdn-mt-ribbon .key i { display: inline-block; width: 14px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 3px; border: 1px solid #64748B; }
.ccdn-mt-rail { list-style: none; margin: 4px 0 0; padding: 0 0 0 20px; border-left: 3px solid #CBD5E1; display: grid; gap: 0; }
.ccdn-mt-rail li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; padding: 10px 0 12px; border-bottom: 1px solid var(--ccdn-border); }
.ccdn-mt-rail li:last-child { border-bottom: 0; }
.ccdn-mt-rail li::before { content: ""; position: absolute; left: -31px; top: 15px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid #64748B; }
.ccdn-mt-rail .is-start::before, .ccdn-mt-rail .is-return::before { border-color: var(--mt-a); background: var(--mt-a); }
.ccdn-mt-rail .is-birth::before { border-color: #0F172A; background: #0F172A; }
.ccdn-mt-rail .is-end::before { border-color: var(--mt-a); }
.ccdn-mt-rail .is-rec::before { border-color: #B45309; }
.ccdn-mt-rail .is-file::before { border-color: var(--mt-b); }
.ccdn-mt-rail .d { display: grid; align-content: start; font-variant-numeric: tabular-nums; }
.ccdn-mt-rail .d b { font-size: 16px; color: var(--ccdn-ink); }
.ccdn-mt-rail .d small, .ccdn-mt-rail .t small { display: block; font-size: 13px; color: var(--ccdn-muted); line-height: 1.4; margin-top: 2px; }
.ccdn-mt-rail .t { font-size: 15.5px; font-weight: 700; color: var(--ccdn-ink); min-width: 0; overflow-wrap: anywhere; }
.ccdn-mt-rail .is-return .t, .ccdn-mt-rail .is-start .t { color: var(--mt-a-deep); }
.ccdn-mt-facts { margin: 4px 0 0; display: grid; gap: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-mt-facts > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; }
.ccdn-mt-facts dt { margin: 0; color: var(--ccdn-muted); flex: 0 1 40%; } .ccdn-mt-facts dd { margin: 0; font-weight: 800; color: var(--ccdn-ink); text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.ccdn-mt-warn { margin: 0; padding: 9px 12px; border-left: 4px solid #D97706; background: #FFFBEB; font-size: 15px; color: var(--mt-warn); }
.ccdn-mt-warn.is-info { border-left-color: var(--mt-a); background: var(--mt-a-soft); color: #134E4A; }
.ccdn-mt-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ccdn-mt-tbl thead th { text-align: left; padding: 0 10px 8px 0; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ccdn-muted); border-bottom: 1px solid var(--ccdn-border-strong); }
.ccdn-mt-tbl tbody th, .ccdn-mt-tbl td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--ccdn-border); overflow-wrap: anywhere; }
.ccdn-mt-tbl tbody th { font-weight: 800; color: var(--ccdn-ink); }
.ccdn-mt-tbl small { display: block; color: var(--ccdn-muted); font-size: 12.5px; font-weight: 400; }
.ccdn-mt-tbl .bad { color: #B91C1C; }
.ccdn-mt-tbl tr.is-plan { background: var(--mt-a-soft); }
.ccdn-mt-cal { display: grid; gap: 6px; min-width: 0; }
.ccdn-mt-cal .hds, .ccdn-mt-cal .cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ccdn-mt-cal .hd { text-align: center; font-size: 12px; font-weight: 800; color: #475569; }
.ccdn-mt-cal .cells > span { position: relative; display: grid; place-items: center; min-height: 40px; border-radius: 6px; border: 1px solid #CBD5E1; background: #fff; color: var(--ccdn-ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.ccdn-mt-cal .cells b { font-weight: 700; line-height: 1.1; }
.ccdn-mt-cal .cells em { display: block; font-style: normal; font-size: 11px; line-height: 1; font-weight: 700; color: inherit; opacity: .9; }
.ccdn-mt-cal .cells > span { align-content: center; }
.ccdn-mt-cal .cells > span.c-rest { background: #E2E8F0; color: #334155; }
.ccdn-mt-cal .cells > span.c-holiday { background: #0F172A; border-color: #0F172A; color: #fff; }
.ccdn-mt-cal .cells > span.out { opacity: .45; }
.ccdn-mt-cal .cells > span.best { background: #CCFBF1; border: 2px solid var(--mt-a); font-weight: 800; }
.ccdn-mt-cal .cells > span.leave { background: #BFD4FB; border: 2px solid var(--mt-b); font-weight: 800; }
.ccdn-mt-cal .cells > span.birth { box-shadow: 0 0 0 3px #0F172A; z-index: 1; }
.ccdn-mt-cal .cells > span.edge { border: 2px dashed #B45309; opacity: 1; }
.ccdn-mt-cal .key { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ccdn-body); }
.ccdn-mt-cal .key i { display: inline-block; width: 14px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 3px; border: 1px solid #64748B; background: #fff; }
.ccdn-mt-cal .key .c-leave { background: #BFD4FB; border-color: var(--mt-b); } .ccdn-mt-cal .key .c-rest { background: #E2E8F0; } .ccdn-mt-cal .key .c-hol { background: #0F172A; } .ccdn-mt-cal .key .c-birth { box-shadow: 0 0 0 2px #0F172A; } .ccdn-mt-cal .key .c-edge { border: 2px dashed #B45309; }
.ccdn-mt-best, .ccdn-mt-blist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ccdn-mt-best li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; }
.ccdn-mt-best .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mt-a); color: #fff; font-weight: 800; }
.ccdn-mt-best .t { min-width: 0; font-size: 15.5px; color: var(--ccdn-ink); } .ccdn-mt-best small, .ccdn-mt-blist small { display: block; font-size: 13.5px; color: var(--ccdn-body); margin-top: 2px; font-weight: 400; }
.ccdn-mt-best .ccdn-btn { min-height: 44px; white-space: nowrap; }
.ccdn-mt-blist li { padding: 10px 12px; border-left: 4px solid var(--mt-b); background: var(--mt-b-soft); font-size: 15px; color: var(--ccdn-ink); }
.ccdn-mt-export { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding-top: 6px; border-top: 1px solid var(--ccdn-border); }
.ccdn-mt-copied { font-size: 13px; color: #14532D; font-weight: 700; }
@media (min-width: 640px) {
  .ccdn-mt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .ccdn-mt-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ccdn-mt-opts > .ccdn-mt-check { align-self: center; }
}
@media (max-width: 720px) {
  .ccdn-mt-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-mt-tbl, .ccdn-mt-tbl tbody, .ccdn-mt-tbl tr, .ccdn-mt-tbl th, .ccdn-mt-tbl td { display: block; width: 100%; }
  .ccdn-mt-tbl tr { padding: 8px 0; border-bottom: 1px solid var(--ccdn-border-strong); }
  .ccdn-mt-tbl tbody th, .ccdn-mt-tbl td { border-bottom: 0; padding: 3px 0; }
  .ccdn-mt-tbl td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ccdn-muted); font-size: 13px; }
  .ccdn-mt-tbl td small { display: inline; margin-left: 6px; }
}
@media (max-width: 520px) {
  .ccdn-mt-rail { padding-left: 16px; } .ccdn-mt-rail li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0 11px; } .ccdn-mt-rail li::before { left: -26px; top: 13px; }
  .ccdn-mt-rail .d { grid-auto-flow: column; justify-content: start; gap: 8px; align-items: baseline; }
  .ccdn-mt-hero .w { font-size: 18px; } .ccdn-mt-hero .w b { font-size: 20px; display: inline; } .ccdn-mt-hero.is-father .w b, .ccdn-mt-hero.is-other .w b { font-size: 34px; }
  .ccdn-mt-brow { grid-template-columns: minmax(0, 1fr) 84px auto; gap: 6px; } .ccdn-mt-brow .ccdn-btn { padding-left: 10px; padding-right: 10px; }
  .ccdn-mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ccdn-mt-grid > .ccdn-field:first-child { grid-column: 1 / -1; }
  .ccdn-mt-best li { grid-template-columns: 30px minmax(0, 1fr); } .ccdn-mt-best .ccdn-btn { grid-column: 1 / -1; }
  .ccdn-mt-facts > div { flex-direction: column; gap: 2px; } .ccdn-mt-facts dd { text-align: left; }
  .ccdn-mt-cal .cells > span { min-height: 38px; font-size: 12px; }
}

/* ============================================================ TOOL-17 /hoc-lop-may-theo-nam-sinh/ — school-year strip (.ccdn-sc-*) */
.ccdn-sc { --sc-th: #16A34A; --sc-th-soft: #ECFDF3; --sc-thcs: #B45309; --sc-thcs-soft: #FEF6E7; --sc-thpt: #1D4ED8; --sc-thpt-soft: #EAF1FE; display: grid; gap: 16px; min-width: 0; }
.ccdn-sc [hidden] { display: none !important; }
.ccdn-sc-form { display: grid; gap: 14px; max-width: 860px; min-width: 0; }
.ccdn-sc-form, .ccdn-sc-form > *, .ccdn-sc-form .ccdn-field { min-width: 0; max-width: 100%; }
.ccdn-sc-help { display: block; font-size: 13.5px; color: var(--ccdn-muted); margin: 0; }
.ccdn-sc-modes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ccdn-sc-modes legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ccdn-sc-modes .seg { position: relative; flex: 1 1 200px; min-width: 0; }
.ccdn-sc-modes .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccdn-sc-modes .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 6px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); background: #fff; color: var(--ccdn-ink); font-weight: 700; font-size: 15px; line-height: 1.25; }
.ccdn-sc-modes .seg input:checked + span { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-sc-modes .seg input:focus-visible + span { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-sc-kidsbox { display: grid; gap: 8px; }
.ccdn-sc-kid { display: grid; gap: 8px 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 12px 12px; border: 1px solid var(--ccdn-border-strong); border-left: 4px solid var(--ccdn-primary); border-radius: var(--ccdn-radius-input); background: #FAFCFF; margin-bottom: 8px; }
.ccdn-sc-kid > .ccdn-field:nth-child(1), .ccdn-sc-kid > .ccdn-field:nth-child(2) { grid-column: 1 / -1; }
.ccdn-sc-kid > .ccdn-btn { grid-column: 1 / -1; justify-self: start; min-height: 40px; }
#ccdn-sc-add { justify-self: start; }
.ccdn-sc-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.ccdn-sc-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-sc-note { margin: 0; }
.ccdn-sc-out { display: grid; gap: 16px; min-width: 0; align-content: start; }
.ccdn-sc-out h3 { margin: 6px 0 0; font-size: 18px; color: var(--ccdn-ink); }
.ccdn-sc-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--ccdn-border-strong); border-radius: var(--ccdn-radius-input); color: var(--ccdn-body); background: #fff; }
.ccdn-sc-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ccdn-ink); }
.ccdn-sc-answers li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 12px 0 12px 12px; border-bottom: 1px solid var(--ccdn-border-strong); border-left: 4px solid transparent; }
.ccdn-sc-answers li.is-sel { border-left-color: var(--ccdn-primary); background: #F4F8FF; }
.ccdn-sc-answers .who { font-weight: 800; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-sc-answers .who small { display: block; font-weight: 400; font-size: 13.5px; color: var(--ccdn-muted); }
.ccdn-sc-answers .ans { display: grid; gap: 2px; min-width: 0; }
.ccdn-sc-answers .ans b { font-size: 30px; line-height: 1.1; color: var(--ccdn-primary-deep); font-weight: 800; }
.ccdn-sc-answers .ans em { font-style: normal; font-size: 15.5px; color: var(--ccdn-ink); font-weight: 600; }
.ccdn-sc-answers .ans i { font-style: normal; font-size: 14.5px; color: var(--ccdn-body); }
.ccdn-sc-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ccdn-sc-pick .ccdn-label { margin: 0 4px 0 0; }
.ccdn-sc-pick .ccdn-btn { min-height: 40px; font-size: 14.5px; }
.ccdn-sc-pick .ccdn-btn.is-on { background: var(--ccdn-primary); color: #fff; border-color: var(--ccdn-primary); }
.ccdn-sc-warn { margin: 0; padding: 9px 12px; border-left: 4px solid #D97706; background: #FFFBEB; font-size: 15px; color: #78350F; }
.ccdn-sc-warn.is-info { border-left-color: var(--ccdn-primary); background: #EFF6FF; color: #1E3A8A; }
.ccdn-sc-strip { display: grid; gap: 10px; min-width: 0; }
.ccdn-sc-strip .g { min-width: 0; border-top: 4px solid #94A3B8; padding-top: 4px; }
.ccdn-sc-strip .g p { margin: 0 0 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ccdn-ink); }
.ccdn-sc-strip .g ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; }
.ccdn-sc-strip .g-tieu-hoc { border-top-color: var(--sc-th); } .ccdn-sc-strip .g-thcs { border-top-color: var(--sc-thcs); } .ccdn-sc-strip .g-thpt { border-top-color: var(--sc-thpt); }
.ccdn-sc-strip .c { display: grid; gap: 1px; justify-items: center; align-content: start; padding: 7px 2px 7px; border: 1px solid #94A3B8; border-radius: 6px; background: #fff; color: var(--ccdn-ink); min-width: 0; text-align: center; }
.ccdn-sc-strip .g-tieu-hoc .c { background: var(--sc-th-soft); } .ccdn-sc-strip .g-thcs .c { background: var(--sc-thcs-soft); } .ccdn-sc-strip .g-thpt .c { background: var(--sc-thpt-soft); }
.ccdn-sc-strip .c b { font-size: 14.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.ccdn-sc-strip .c span { font-size: 11.5px; font-variant-numeric: tabular-nums; color: #1E293B; white-space: nowrap; }
.ccdn-sc-strip .c small { font-size: 11.5px; color: #334155; white-space: nowrap; }
.ccdn-sc-strip .c.is-past { background: #EEF2F6; color: #475569; border-style: dashed; }
.ccdn-sc-strip .c.is-now { background: var(--ccdn-primary); border-color: var(--ccdn-primary-deep); color: #fff; box-shadow: 0 0 0 3px #BFD4FB; }
.ccdn-sc-strip .c.is-now span, .ccdn-sc-strip .c.is-now small { color: #fff; }
.ccdn-sc-strip .c.is-out { opacity: .6; }
.ccdn-sc-ms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-sc-ms li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--ccdn-border); }
.ccdn-sc-ms .y b { font-size: 20px; color: var(--ccdn-primary-deep); font-variant-numeric: tabular-nums; }
.ccdn-sc-ms .t { font-size: 15.5px; font-weight: 700; color: var(--ccdn-ink); min-width: 0; overflow-wrap: anywhere; }
.ccdn-sc-ms .t small { display: block; font-weight: 400; font-size: 14px; color: var(--ccdn-body); line-height: 1.45; margin-top: 2px; }
.ccdn-sc-facts { margin: 4px 0 0; display: grid; gap: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-sc-facts > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; }
.ccdn-sc-facts dt { margin: 0; color: var(--ccdn-muted); flex: 0 1 50%; } .ccdn-sc-facts dd { margin: 0; font-weight: 800; color: var(--ccdn-ink); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ccdn-sc-cal { list-style: none; margin: 4px 0 0; padding: 0; display: grid; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-sc-cal li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--ccdn-border); }
.ccdn-sc-cal .d { font-weight: 800; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; } .ccdn-sc-cal .d small { display: block; font-weight: 400; font-size: 13px; color: var(--ccdn-muted); }
.ccdn-sc-cal .t { font-size: 15px; color: var(--ccdn-body); min-width: 0; }
.ccdn-sc-tbl { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ccdn-sc-tbl thead th { text-align: left; padding: 0 8px 8px 0; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ccdn-muted); border-bottom: 1px solid var(--ccdn-border-strong); overflow-wrap: anywhere; }
.ccdn-sc-tbl tbody th, .ccdn-sc-tbl td { text-align: left; vertical-align: top; padding: 8px 8px 8px 8px; border-bottom: 1px solid var(--ccdn-border); overflow-wrap: anywhere; }
.ccdn-sc-tbl tbody th { font-weight: 800; color: var(--ccdn-ink); padding-left: 0; white-space: nowrap; }
.ccdn-sc-tbl td small { display: block; font-size: 12.5px; color: #1E3A8A; font-weight: 700; }
.ccdn-sc-tbl td span { color: var(--ccdn-muted); font-size: 13.5px; }
.ccdn-sc-tbl td.s-tieu-hoc { background: var(--sc-th-soft); box-shadow: inset 4px 0 0 var(--sc-th); } .ccdn-sc-tbl td.s-thcs { background: var(--sc-thcs-soft); box-shadow: inset 4px 0 0 var(--sc-thcs); } .ccdn-sc-tbl td.s-thpt { background: var(--sc-thpt-soft); box-shadow: inset 4px 0 0 var(--sc-thpt); }
.ccdn-sc-tbl td.is-turn b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ccdn-sc-tbl tr.is-now th { color: var(--ccdn-primary-deep); } .ccdn-sc-tbl tr.is-hit { background: #EFF6FF; }
.ccdn-sc-blist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ccdn-sc-blist li { padding: 10px 12px; border-left: 4px solid var(--ccdn-primary); background: #EFF6FF; font-size: 15px; color: var(--ccdn-ink); }
.ccdn-sc-hero { display: grid; gap: 6px; padding: 14px 16px 14px 18px; border-left: 8px solid var(--ccdn-primary); background: #EFF6FF; min-width: 0; border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; }
.ccdn-sc-hero .k { margin: 0; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; color: #334155; }
.ccdn-sc-hero .w { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--ccdn-ink); } .ccdn-sc-hero .w b { font-size: 36px; color: var(--ccdn-primary-deep); font-variant-numeric: tabular-nums; }
.ccdn-sc-hero .s { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-sc-export { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding-top: 6px; border-top: 1px solid var(--ccdn-border); }
.ccdn-sc-copied { font-size: 13px; color: #14532D; font-weight: 700; }
@media (min-width: 640px) {
  .ccdn-sc-kid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; }
  .ccdn-sc-kid > .ccdn-field:nth-child(1), .ccdn-sc-kid > .ccdn-field:nth-child(2) { grid-column: auto; }
  .ccdn-sc-kid > .ccdn-btn { grid-column: auto; justify-self: stretch; min-height: 44px; }
  .ccdn-sc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) { .ccdn-sc-strip { grid-template-columns: 5fr 4fr 3fr; gap: 10px; } }
@media (max-width: 720px) {
  .ccdn-sc-tbl.is-roster thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-sc-tbl.is-roster, .ccdn-sc-tbl.is-roster tbody, .ccdn-sc-tbl.is-roster tr, .ccdn-sc-tbl.is-roster th, .ccdn-sc-tbl.is-roster td { display: block; width: 100%; }
  .ccdn-sc-tbl.is-roster tr { padding: 8px 0; border-bottom: 1px solid var(--ccdn-border-strong); }
  .ccdn-sc-tbl.is-roster tbody th, .ccdn-sc-tbl.is-roster td { border-bottom: 0; padding: 2px 0; }
  .ccdn-sc-tbl.is-roster td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ccdn-muted); font-size: 13px; }
}
@media (max-width: 520px) {
  .ccdn-sc-answers li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-left: 10px; }
  .ccdn-sc-answers .ans b { font-size: 28px; }
  .ccdn-sc-ms li { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; } .ccdn-sc-ms .y b { font-size: 18px; }
  .ccdn-sc-cal li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ccdn-sc-facts > div { flex-direction: column; gap: 2px; } .ccdn-sc-facts dd { text-align: left; }
  .ccdn-sc-strip .c b { font-size: 13.5px; } .ccdn-sc-strip .c span, .ccdn-sc-strip .c small { font-size: 11px; }
  .ccdn-sc-tbl { font-size: 14px; } .ccdn-sc-tbl tbody th { white-space: normal; font-size: 13px; }
  .ccdn-sc-hero .w { font-size: 19px; } .ccdn-sc-hero .w b { font-size: 30px; }
}

/* ============================================================ Số ngày trong tháng (.ccdn-dm-*).  Identity: a MONTH RULER — one month in, its length and weekday mix out, and the twelve months drawn as bars of 28–31 days. No dial, no day grid. */
.ccdn-dm { display: grid; gap: 16px; min-width: 0; }
.ccdn-dm [hidden] { display: none !important; }
.ccdn-dm-form { display: grid; gap: 12px; max-width: 520px; min-width: 0; }
.ccdn-dm-row { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: end; }
.ccdn-dm-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-dm-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; }
.ccdn-dm-stepper .ccdn-btn { padding: 0; font-size: 22px; line-height: 1; min-height: 44px; }
.ccdn-dm-stepper input { text-align: center; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; }
.ccdn-dm-chk { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--ccdn-body); cursor: pointer; }
.ccdn-dm-chk input { width: 22px; height: 22px; flex: none; }
.ccdn-dm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-dm-note { margin: 0; }
.ccdn-dm-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-dm-hero { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--ccdn-border-strong); border-left: 8px solid var(--ccdn-primary); border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; background: #EFF6FF; min-width: 0; }
.ccdn-dm-hero .k { margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-dm-hero .big { margin: 0; font-size: 20px; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-dm-hero .big b { font-size: 40px; line-height: 1.1; color: var(--ccdn-primary-deep); font-variant-numeric: tabular-nums; }
.ccdn-dm-hero .s { margin: 0; font-size: 15px; color: var(--ccdn-body); }
.ccdn-dm-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-dm-sec h2 { margin: 0; font-size: 18px; }
.ccdn-dm-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-dm-facts > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; }
.ccdn-dm-facts dt { color: var(--ccdn-muted); }
.ccdn-dm-facts dd { margin: 0; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-dm-nums { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccdn-dm-nums .n { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; min-width: 0; }
.ccdn-dm-nums .v { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-dm-nums .l { font-size: 14px; color: var(--ccdn-body); }
.ccdn-dm-nums .l small { display: block; font-size: 12.5px; color: var(--ccdn-muted); }
.ccdn-dm-items { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ccdn-body); }
.ccdn-dm-wd { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ccdn-dm-wd li { display: grid; justify-items: center; gap: 0; padding: 8px 2px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; min-width: 0; }
.ccdn-dm-wd .d { font-size: 13px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-dm-wd b { font-size: 24px; line-height: 1.2; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-dm-wd .u { font-size: 12px; color: var(--ccdn-muted); }
.ccdn-dm-wd .is-we { background: #F1F5F9; }
.ccdn-dm-wd .is-five { border-color: var(--ccdn-primary); border-width: 2px; background: #EFF6FF; }
.ccdn-dm-wd .is-five b { color: var(--ccdn-primary-deep); }
.ccdn-dm-ruler { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ccdn-dm-ruler .r { display: grid; grid-template-columns: 40px minmax(0, 1fr) 34px 34px; gap: 10px; align-items: center; width: 100%; min-height: 44px; padding: 4px 8px; font: inherit; font-size: 15px; color: var(--ccdn-ink); background: #fff; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); cursor: pointer; text-align: left; }
.ccdn-dm-ruler .r:hover { background: #F8FAFC; }
.ccdn-dm-ruler .r:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-dm-ruler .m { font-weight: 700; }
.ccdn-dm-ruler .bar { display: block; height: 14px; background: #E2E8F0; border-radius: 3px; overflow: hidden; }
.ccdn-dm-ruler .bar i { display: block; height: 100%; background: #64748B; }
.ccdn-dm-ruler .is-feb .bar i { background: #D97706; }
.ccdn-dm-ruler .is-cur { border-color: var(--ccdn-primary); border-width: 2px; background: #EFF6FF; }
.ccdn-dm-ruler .is-cur .bar i { background: var(--ccdn-primary); }
.ccdn-dm-ruler .d, .ccdn-dm-ruler .w { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.ccdn-dm-ruler .w { color: var(--ccdn-muted); font-weight: 600; }
.ccdn-dm-export .bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 560px) {
	.ccdn-dm-row { grid-template-columns: minmax(0, 1fr); }
	.ccdn-dm-nums { grid-template-columns: minmax(0, 1fr); }
	.ccdn-dm-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.ccdn-dm-hero .big b { font-size: 34px; }
	.ccdn-dm-wd { gap: 4px; }
	.ccdn-dm-wd b { font-size: 20px; }
}

/* ============================================================ Bảng tuổi 12 con giáp (.ccdn-zd-*).  Identity: a ZODIAC TABLE — one year or date in, the animal and Can Chi out, then twelve animal rows of birth-year keys where the visitor's own animal is lit. No wheel graphic, no day grid. */
.ccdn-zd { display: grid; gap: 16px; min-width: 0; }
.ccdn-zd [hidden] { display: none !important; }
.ccdn-zd-form { display: grid; gap: 12px; max-width: 520px; min-width: 0; }
.ccdn-zd-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-zd-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-zd-note { margin: 0; }
.ccdn-zd-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-zd-hero { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--ccdn-border-strong); border-left: 8px solid var(--ccdn-primary); border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; background: #EFF6FF; min-width: 0; }
.ccdn-zd-hero .k { margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-zd-hero .big { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.15; color: var(--ccdn-primary-deep); overflow-wrap: anywhere; }
.ccdn-zd-hero .big .an { font-size: 20px; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-zd-hero .s { margin: 0; font-size: 15px; color: var(--ccdn-body); }
.ccdn-zd-warn { margin: 0; padding: 8px 12px; border-left: 4px solid #D97706; background: #FFFBEB; font-size: 15px; color: #78350F; }
.ccdn-zd-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-zd-sec h2 { margin: 0; font-size: 18px; }
.ccdn-zd-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-zd-facts > div { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; }
.ccdn-zd-facts dt { color: var(--ccdn-muted); }
.ccdn-zd-facts dd { margin: 0; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-zd-facts small { color: var(--ccdn-muted); font-size: 13px; }
.ccdn-zd-wheel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ccdn-zd-wheel > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 8px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; min-width: 0; }
.ccdn-zd-wheel > li.is-cur { border-color: var(--ccdn-primary); border-width: 2px; background: #EFF6FF; }
.ccdn-zd-wheel .a { margin: 0; display: grid; align-content: center; min-height: 44px; }
.ccdn-zd-wheel .a b { font-size: 17px; color: var(--ccdn-ink); }
.ccdn-zd-wheel .a span { font-size: 13px; color: var(--ccdn-muted); }
.ccdn-zd-wheel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ccdn-zd-wheel .y { display: grid; justify-items: center; min-width: 62px; min-height: 44px; padding: 3px 6px; font: inherit; color: var(--ccdn-ink); background: #fff; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); cursor: pointer; }
.ccdn-zd-wheel .y span { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ccdn-zd-wheel .y small { font-size: 11.5px; color: var(--ccdn-muted); }
.ccdn-zd-wheel .y:hover { background: #F8FAFC; }
.ccdn-zd-wheel .y:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-zd-wheel .y.is-cur { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-zd-wheel .y.is-cur small { color: #DBEAFE; }
.ccdn-zd-export .bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 560px) {
	.ccdn-zd-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.ccdn-zd-hero .big { font-size: 26px; }
	.ccdn-zd-wheel > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.ccdn-zd-wheel .a { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; min-height: 0; }
}

/* TOOL-13 upgrade: "Tiết khí sắp tới" list inside the today strip (.ccdn-st-nowup) */
.ccdn-st-now h2.ccdn-st-nowh { margin: 10px 0 0; font-size: 13px; line-height: 1.3; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ccdn-primary-deep); }
.ccdn-st-nowup { margin-top: 4px; border-top: 1px solid #BFDBFE; }
.ccdn-st-nowup li { border-bottom-color: #DBEAFE; padding: 7px 0; }

/* ============================================================ Rằm và mùng 1 âm lịch (.ccdn-rm-*).  Identity: a MOON LEDGER — the next rằm and mùng 1 on top, then every lunar month as a row of new-moon / full-moon dates (CSS moons, no image). */
.ccdn-rm { display: grid; gap: 16px; min-width: 0; }
.ccdn-rm [hidden] { display: none !important; }
.ccdn-rm-now { padding: 10px 14px; border-left: 4px solid var(--ccdn-primary); background: #EFF6FF; font-size: 15px; color: var(--ccdn-body); display: grid; gap: 8px; }
.ccdn-rm-now p { margin: 0; }
.ccdn-rm-now .lab { font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .08em; color: var(--ccdn-primary-deep); margin-right: 4px; }
.ccdn-rm-now2 { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.ccdn-rm-now h2.ccdn-rm-nowh { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ccdn-primary-deep); }
.ccdn-rm-up { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid #BFDBFE; }
.ccdn-rm-up li { display: grid; gap: 1px; padding: 7px 0; border-bottom: 1px solid #DBEAFE; font-size: 15px; }
.ccdn-rm-up .nm { font-weight: 800; color: var(--ccdn-ink); }
.ccdn-rm-up .far { color: var(--ccdn-muted); font-size: 13.5px; }
.ccdn-rm-form { display: grid; gap: 12px; max-width: 520px; min-width: 0; }
.ccdn-rm-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-rm-modes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ccdn-rm-modes legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ccdn-rm-modes .seg { position: relative; flex: 1 1 auto; min-width: 0; }
.ccdn-rm-modes .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccdn-rm-modes .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-rm-modes .seg input:checked + span { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-rm-modes .seg input:focus-visible + span { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-rm-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; }
.ccdn-rm-stepper .ccdn-btn { padding: 0; font-size: 22px; line-height: 1; min-height: 44px; }
.ccdn-rm-stepper input { text-align: center; font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; min-width: 0; }
.ccdn-rm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-rm-note { margin: 0; }
.ccdn-rm-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-rm-yr { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-rm-card { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--ccdn-border-strong); border-top: 4px solid var(--ccdn-ink); border-radius: 0 0 var(--ccdn-radius-md) var(--ccdn-radius-md); background: #fff; min-width: 0; }
.ccdn-rm-card .w { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--ccdn-primary-deep); overflow-wrap: anywhere; }
.ccdn-rm-card .s { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-rm-card .s strong { color: var(--ccdn-ink); }
.ccdn-rm-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-rm-sec h2 { margin: 0; font-size: 18px; }
.ccdn-rm-scroll { min-width: 0; overflow-x: auto; }
.ccdn-rm-tbl th, .ccdn-rm-tbl td { vertical-align: middle; }
.ccdn-rm-tbl td .d { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ccdn-ink); }
.ccdn-rm-tbl td .w { display: block; margin-left: 20px; color: var(--ccdn-muted); font-size: 14px; }
.ccdn-rm-tbl .is-leap th, .ccdn-rm-tbl .is-leap td { background: #FFFBEB; }
.ccdn-rm-tbl td.is-next { outline: 2px solid var(--ccdn-primary); outline-offset: -2px; background: #EFF6FF; }
.ccdn-rm-moon { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; border: 1.5px solid #0F172A; box-sizing: border-box; }
.ccdn-rm-moon.is-new { background: #0F172A; }
.ccdn-rm-moon.is-full { background: #FEF3C7; border-color: #B45309; }
.ccdn-rm-export .bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (min-width: 640px) { .ccdn-rm-now2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .ccdn-rm-up li { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: baseline; } }
@media (max-width: 560px) { .ccdn-rm-card .w { font-size: 22px; } }

/* ============================================================ Đổi đơn vị thời gian (.ccdn-un-*).  Identity: a UNIT LEDGER — one value in, seven units out on one ruled sheet; the source row is marked, rounded cells are flagged, the month / year convention is stated beside the result. */
.ccdn-un { display: grid; gap: 16px; min-width: 0; }
.ccdn-un [hidden] { display: none !important; }
.ccdn-un-form { display: grid; gap: 12px; max-width: 560px; min-width: 0; }
.ccdn-un-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-un-modes, .ccdn-un-conv { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ccdn-un-modes legend, .ccdn-un-conv legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ccdn-un-modes .seg { position: relative; flex: 1 1 auto; min-width: 0; }
.ccdn-un-modes .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccdn-un-modes .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-un-modes .seg input:checked + span { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-un-modes .seg input:focus-visible + span { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-un-row { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
.ccdn-un-parts { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccdn-un-chips { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ccdn-un-chips .ccdn-btn-text { min-height: 32px; padding: 4px 2px; font-weight: 700; }
.ccdn-un-conv .opt { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; cursor: pointer; }
.ccdn-un-conv .opt input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.ccdn-un-conv .opt span { display: grid; gap: 1px; min-width: 0; }
.ccdn-un-conv .opt small { color: var(--ccdn-muted); font-size: 13px; }
.ccdn-un-conv .opt:has(input:checked) { border-color: var(--ccdn-primary); background: #EFF6FF; }
.ccdn-un-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-un-note { margin: 0; }
.ccdn-un-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-un-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--ccdn-border-strong); border-left: 8px solid var(--ccdn-primary); border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; background: #EFF6FF; min-width: 0; }
.ccdn-un-card .k { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); overflow-wrap: anywhere; }
.ccdn-un-card .w { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--ccdn-primary-deep); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ccdn-un-card .s { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-un-card .s strong { color: var(--ccdn-ink); }
.ccdn-un-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-un-sec h2 { margin: 0; font-size: 18px; }
.ccdn-un-scroll { min-width: 0; }
.ccdn-un-tbl td.v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-un-tbl tr.is-src th, .ccdn-un-tbl tr.is-src td { background: #DBEAFE; }
.ccdn-un-tbl tr.is-round td:last-child { color: #92400E; }
.ccdn-un-export .bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 560px) { .ccdn-un-row { grid-template-columns: minmax(0, 1fr); } .ccdn-un-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ccdn-un-card .w { font-size: 24px; } }

/* ============================================================ Quý và mùa trong năm (.ccdn-sq-*).  Identity: a SEASON LEDGER — four quarters as ruled rows, then the four seasons under three stated conventions side by side (a matrix of start dates), then one table per convention. */
.ccdn-sq { display: grid; gap: 16px; min-width: 0; }
.ccdn-sq [hidden] { display: none !important; }
.ccdn-sq-now { padding: 10px 14px; border-left: 4px solid var(--ccdn-primary); background: #EFF6FF; font-size: 15px; color: var(--ccdn-body); display: grid; gap: 8px; }
.ccdn-sq-now p { margin: 0; }
.ccdn-sq-now .lab { font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .08em; color: var(--ccdn-primary-deep); margin-right: 4px; }
.ccdn-sq-seasons { list-style: none; margin: 0; padding: 0; border-top: 1px solid #BFDBFE; }
.ccdn-sq-seasons li { display: grid; gap: 1px; padding: 7px 0; border-bottom: 1px solid #DBEAFE; font-size: 15px; }
.ccdn-sq-seasons .cv { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-sq-seasons strong { color: var(--ccdn-ink); }
.ccdn-sq-form { display: grid; gap: 12px; max-width: 460px; min-width: 0; }
.ccdn-sq-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-sq-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; }
.ccdn-sq-stepper .ccdn-btn { padding: 0; font-size: 22px; line-height: 1; min-height: 44px; }
.ccdn-sq-stepper input { text-align: center; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; min-width: 0; }
.ccdn-sq-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-sq-note { margin: 0; }
.ccdn-sq-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-sq-yr { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-sq-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-sq-sec h2 { margin: 0; font-size: 18px; }
.ccdn-sq-scroll { min-width: 0; }
.ccdn-sq-tbl { font-size: 14.5px; }
.ccdn-sq-tbl td.n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-sq-tbl td small { display: block; color: var(--ccdn-muted); font-size: 12.5px; }
.ccdn-sq-mtbl tbody th { white-space: nowrap; }
.ccdn-sq-export .bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (min-width: 640px) { .ccdn-sq-seasons li { grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: baseline; } }

/* ============================================================ /lich-ngay/ upgrade (Batch 03): "hôm kia … ngày kia" ledger and the year calendar (.ccdn-cr-*) */
.ccdn-cr-scroll { min-width: 0; }
.ccdn-cr-around tr.is-today th, .ccdn-cr-around tr.is-today td { background: #EFF6FF; font-weight: 700; }
.ccdn-cr-around td a { font-weight: 700; }
.ccdn-cr-yform { display: grid; gap: 6px; max-width: 420px; margin: 8px 0 12px; }
.ccdn-cr-yform label { font-weight: 700; font-size: 14px; color: var(--ccdn-ink); }
.ccdn-cr-yearg { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ccdn-cr-ym { min-width: 0; }
.ccdn-cr-ym h3 { margin: 0 0 6px; font-size: 16px; }
.ccdn-cr-year .ccdn-mcal-n em { display: none; }
.ccdn-cr-year .ccdn-mcal td { height: 52px; }
@media (min-width: 900px) { .ccdn-cr-yearg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .ccdn-cr-yform { display: none; } .ccdn-cr-yearg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ccdn-cr-ym { break-inside: avoid; } }
.ccdn-cr-yform .ccdn-pg-lookup-row input { min-width: 120px; }

/* ============================================================ Còn bao nhiêu ngày nữa hết năm (.ccdn-ye-*).  Identity: a YEAR-END CLOCK — four live tiles over a progress rule, the calendar and working-day counts beside it; the target period is explicit and rolls over at midnight. */
.ccdn-ye { display: grid; gap: 16px; min-width: 0; }
.ccdn-ye [hidden] { display: none !important; }
.ccdn-ye-form { display: grid; gap: 12px; max-width: 560px; min-width: 0; }
.ccdn-ye-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-ye-kinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ccdn-ye-kinds legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ccdn-ye-kinds .seg { position: relative; flex: 1 1 auto; min-width: 0; }
.ccdn-ye-kinds .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccdn-ye-kinds .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-ye-kinds .seg input:checked + span { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-ye-kinds .seg input:focus-visible + span { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-ye-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ccdn-ye-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-ye-note { margin: 0; }
.ccdn-ye-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-ye-card { display: grid; gap: 8px; padding: 14px 16px 16px; border: 1px solid var(--ccdn-border-strong); border-top: 0; border-radius: var(--ccdn-radius-md); background: #EFF6FF; min-width: 0; overflow: hidden; }
.ccdn-ye-card.is-past { background: #F8FAFC; }
.ccdn-ye-card.is-future { background: #FFFBEB; }
p.ccdn-ye-rule { margin: -14px -16px 6px; display: block; height: 8px; background: #DBEAFE; }
p.ccdn-ye-rule i { display: block; height: 100%; background: var(--ccdn-primary); }
.ccdn-ye-card.is-past p.ccdn-ye-rule i { background: #64748B; }
.ccdn-ye-card .k { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); }
.ccdn-ye-card .s { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-ye-card .s strong { color: var(--ccdn-ink); }
.ccdn-ye-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccdn-ye-tiles li { display: grid; justify-items: center; padding: 8px 4px; background: #fff; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); min-width: 0; }
.ccdn-ye-tiles b { font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--ccdn-primary-deep); font-variant-numeric: tabular-nums; }
.ccdn-ye-tiles span { font-size: 13px; color: var(--ccdn-muted); }
.ccdn-ye-tiles.is-past b { color: #475569; }
.ccdn-ye-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-ye-sec h2 { margin: 0; font-size: 18px; }
.ccdn-ye-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-ye-facts > div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; }
.ccdn-ye-facts dt { color: var(--ccdn-muted); }
.ccdn-ye-facts dd { margin: 0; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-ye-facts small { color: var(--ccdn-muted); font-size: 13px; }
.ccdn-ye-export .bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 560px) { .ccdn-ye-tiles b { font-size: 28px; } .ccdn-ye-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@media (min-width: 900px) { .ccdn-ye-tiles b { font-size: 52px; } }

/* ============================================================ Cộng trừ giờ phút giây (.ccdn-ts-*).  Identity: a TIME LEDGER — rows of ± giờ : phút : giây added up like a tape, or one clock time moved forward / back, with day rollover and negative results spelled out. */
.ccdn-ts { display: grid; gap: 16px; min-width: 0; }
.ccdn-ts [hidden] { display: none !important; }
.ccdn-ts-form { display: grid; gap: 12px; max-width: 620px; min-width: 0; }
.ccdn-ts-help { display: block; font-size: 13px; color: var(--ccdn-muted); margin: 0; }
.ccdn-ts-modes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ccdn-ts-modes legend { padding: 0; margin-bottom: 6px; width: 100%; }
.ccdn-ts-modes .seg { position: relative; flex: 1 1 auto; min-width: 0; }
.ccdn-ts-modes .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccdn-ts-modes .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-ts-modes .seg input:checked + span { background: var(--ccdn-primary); border-color: var(--ccdn-primary); color: #fff; }
.ccdn-ts-modes .seg input:focus-visible + span { outline: 3px solid #93C5FD; outline-offset: 2px; }
.ccdn-ts-clockin { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.ccdn-ts-now { grid-column: 1 / -1; }
.ccdn-ts-rows { display: grid; gap: 10px; min-width: 0; }
.ccdn-ts-row { display: grid; gap: 8px; grid-template-columns: 76px repeat(3, minmax(0, 1fr)) auto; align-items: end; padding: 8px; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); background: #fff; min-width: 0; }
.ccdn-ts-row .rm { min-height: 44px; padding: 0 6px; font-weight: 700; color: #B91C1C; }
.ccdn-ts-row select { font-size: 20px; font-weight: 800; text-align: center; }
.ccdn-ts-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ccdn-ts-note { margin: 0; }
.ccdn-ts-out { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ccdn-ts-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--ccdn-border-strong); border-left: 8px solid var(--ccdn-primary); border-radius: 0 var(--ccdn-radius-md) var(--ccdn-radius-md) 0; background: #EFF6FF; min-width: 0; }
.ccdn-ts-card.is-neg { border-left-color: #B91C1C; background: #FEF2F2; }
.ccdn-ts-card .k { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--ccdn-muted); overflow-wrap: anywhere; }
.ccdn-ts-card .w { margin: 0; font-size: 38px; font-weight: 800; line-height: 1.1; color: var(--ccdn-primary-deep); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ccdn-ts-card.is-neg .w { color: #B91C1C; }
.ccdn-ts-card .s { margin: 0; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-ts-card .s strong { color: var(--ccdn-ink); }
.ccdn-ts-warn { margin: 0; padding: 8px 12px; border-left: 4px solid #D97706; background: #FFFBEB; font-size: 15px; color: #78350F; }
.ccdn-ts-sec { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.ccdn-ts-sec h2 { margin: 0; font-size: 18px; }
.ccdn-ts-tape { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ccdn-border-strong); font-variant-numeric: tabular-nums; }
.ccdn-ts-tape li { display: grid; grid-template-columns: 28px 8em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dotted #94A3B8; font-size: 16px; }
.ccdn-ts-tape .sg { font-weight: 800; color: var(--ccdn-muted); text-align: center; }
.ccdn-ts-tape .v { font-weight: 700; color: var(--ccdn-ink); }
.ccdn-ts-tape small { color: var(--ccdn-muted); font-size: 13px; overflow-wrap: anywhere; }
.ccdn-ts-tape .tot { border-top: 2px solid var(--ccdn-ink); border-bottom: 0; }
.ccdn-ts-tape .tot .v { font-size: 20px; }
.ccdn-ts-tbl td.v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-ts-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-ts-facts > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; }
.ccdn-ts-facts dt { color: var(--ccdn-muted); }
.ccdn-ts-facts dd { margin: 0; color: var(--ccdn-ink); overflow-wrap: anywhere; }
.ccdn-ts-export .bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 560px) { .ccdn-ts-row { grid-template-columns: 76px repeat(3, minmax(0, 1fr)); } .ccdn-ts-row .rm { grid-column: 1 / -1; justify-self: start; min-height: 44px; } .ccdn-ts-clockin { grid-template-columns: minmax(0, 1fr); } .ccdn-ts-card .w { font-size: 30px; } .ccdn-ts-tape li { grid-template-columns: 24px 7em minmax(0, 1fr); } .ccdn-ts-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.ccdn-cr-yform input { min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--ccdn-ink); background: #fff; border: 1px solid var(--ccdn-border-strong); border-radius: var(--ccdn-radius-md); box-sizing: border-box; }
.ccdn-cr-yform .ccdn-btn { min-height: 44px; }

/* Số ngày trong tháng — weekday dates (Batch 04): table of dates per weekday and the one-weekday-through-the-year list */
.ccdn-dm-wdt td.n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-dm-wdt tr.is-we th, .ccdn-dm-wdt tr.is-we td { background: #F8FAFC; }
.ccdn-dm-wdsel { max-width: 260px; }
.ccdn-dm-wdy { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-dm-wdy li { display: grid; grid-template-columns: 78px minmax(0, 1fr) 28px; gap: 10px; padding: 7px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; align-items: baseline; }
.ccdn-dm-wdy .mo { font-weight: 700; color: var(--ccdn-ink); }
.ccdn-dm-wdy .ds { color: var(--ccdn-body); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ccdn-dm-wdy .c { text-align: right; color: var(--ccdn-muted); font-variant-numeric: tabular-nums; }

/* Thứ Sáu ngày 13 (Batch 04): nearest-date hero + countdown, month strip, upcoming list, years table. Form/stepper reuse .ccdn-dm-* */
.ccdn-f13-hero { background: linear-gradient(180deg, #F1F5F9, #fff); border: 1px solid var(--ccdn-border-strong); border-radius: 14px; padding: 22px 20px; margin-top: 18px; text-align: center; }
.ccdn-f13-hero h2 { margin: 0 0 6px; font-size: 16px; color: var(--ccdn-muted); font-weight: 600; }
.ccdn-f13-big { margin: 0; font-size: clamp(34px, 9vw, 52px); font-weight: 800; line-height: 1.1; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-f13-sub { margin: 6px 0 14px; color: var(--ccdn-body); font-size: 16px; }
.ccdn-f13-clock { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; min-height: 56px; }
.ccdn-f13-clock span { background: #fff; border: 1px solid var(--ccdn-border-strong); border-radius: 10px; padding: 8px 12px; min-width: 76px; color: var(--ccdn-muted); font-size: 14px; }
.ccdn-f13-clock b { display: block; font-size: 24px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ccdn-f13-clock .now { font-weight: 700; color: var(--ccdn-ink); min-width: 0; }
.ccdn-f13-prev { margin: 14px 0 0; font-size: 15px; color: var(--ccdn-body); }
.ccdn-f13-sec { margin-top: 26px; }
.ccdn-f13-sec h2 { font-size: 20px; margin: 0 0 10px; }
.ccdn-f13-yline { margin: 0 0 12px; }
.ccdn-f13-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ccdn-f13-months li { border: 1px solid var(--ccdn-border-strong); border-radius: 10px; padding: 8px 6px; text-align: center; background: #fff; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ccdn-f13-months .m { color: var(--ccdn-muted); font-size: 13px; }
.ccdn-f13-months .w { font-weight: 700; color: var(--ccdn-ink); font-size: 17px; }
.ccdn-f13-months li.is-f { background: #0F172A; border-color: #0F172A; }
.ccdn-f13-months li.is-f .m, .ccdn-f13-months li.is-f .w, .ccdn-f13-months li.is-f .t { color: #fff; }
.ccdn-f13-months .t { font-size: 12px; font-weight: 700; }
.ccdn-f13-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-f13-list li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px dotted #94A3B8; font-size: 15px; }
.ccdn-f13-list .d { font-weight: 700; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-f13-list .r { text-align: right; color: var(--ccdn-body); }
.ccdn-f13-table td.n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ccdn-ink); }
.ccdn-f13-table tr.is-cur th, .ccdn-f13-table tr.is-cur td { background: #F1F5F9; }
.ccdn-f13-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
@media (max-width: 560px) { .ccdn-f13-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ccdn-f13-clock span { min-width: 68px; padding: 8px; } .ccdn-f13-list li { grid-template-columns: 1fr auto; } .ccdn-f13-list .w { display: none; } }

/* Ngày kỷ niệm là thứ mấy (Batch 04): three tables by rule kind, badges, calculator rows. Form/stepper reuse .ccdn-dm-*, bar reuses .ccdn-f13-bar */
.ccdn-ey-sum { margin: 18px 0 0; font-size: 16px; color: var(--ccdn-body); }
.ccdn-ey-sec { margin-top: 26px; }
.ccdn-ey-sec h2 { font-size: 20px; margin: 0 0 6px; }
.ccdn-ey-intro { margin: 0 0 10px; color: var(--ccdn-body); font-size: 15px; }
.ccdn-ey-table td.wd { font-weight: 700; color: var(--ccdn-ink); }
.ccdn-ey-table td.lf { color: var(--ccdn-body); font-variant-numeric: tabular-nums; }
.ccdn-ey-table tr.is-we th, .ccdn-ey-table tr.is-we td { background: #F8FAFC; }
.ccdn-ey-b { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6; vertical-align: middle; }
.ccdn-ey-b.hol { background: #0F172A; color: #fff; }
.ccdn-ey-b.we { background: #E2E8F0; color: #0F172A; }
.ccdn-ey-calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.ccdn-ey-res { margin: 12px 0 0; font-size: 16px; color: var(--ccdn-body); }
.ccdn-ey-res strong { color: var(--ccdn-ink); }
@media (max-width: 560px) { .ccdn-ey-calc { grid-template-columns: 1fr 1fr; } .ccdn-ey-b { margin: 4px 6px 0 0; } }

/* Đếm ngày yêu (Batch 04): wedding-anniversary names block reuses .ccdn-ly-all / .ccdn-ly-allwrap */
.ccdn-ly-wed { margin-top: 14px; border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); }
.ccdn-ly-wed summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--ccdn-primary); min-height: 44px; display: flex; align-items: center; }
.ccdn-ly-wed summary:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-ly-wed .ccdn-ly-small { margin: 0 0 10px; }
.ccdn-ly-allwrap tr.is-next th, .ccdn-ly-allwrap tr.is-next td { background: #F1F5F9; color: var(--ccdn-ink); font-weight: 700; }
.ccdn-ly-en { color: var(--ccdn-muted); font-weight: 400; }

/* Số ngày trong tháng — tháng trước / tháng này / tháng sau comparison (Batch 05); reuses .ccdn-hg-table */
.ccdn-dm-cmpwrap { overflow-x: auto; }
.ccdn-dm-cmp { width: 100%; }
.ccdn-dm-cmp th.is-cur, .ccdn-dm-cmp td.is-cur { background: #F1F5F9; }
.ccdn-dm-cmp td b { font-size: 18px; color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-dm-cmpsub { display: block; font-size: 13px; font-weight: 400; color: var(--ccdn-muted); }

/* Hết năm / quý / tháng (Batch 05): lunar-month fields and the "end of period today" quick list */
.ccdn-ye-leapf { align-self: end; }
.ccdn-ye-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--ccdn-body); cursor: pointer; }
.ccdn-ye-chk input { width: 20px; height: 20px; }
.ccdn-ye-quick ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-ye-quick li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-bottom: 1px dotted #94A3B8; }
.ccdn-ye-quick .n { font-weight: 700; color: var(--ccdn-ink); }
.ccdn-ye-quick .v b { color: var(--ccdn-ink); font-variant-numeric: tabular-nums; }
.ccdn-ye-quick .v small { display: block; color: var(--ccdn-muted); font-size: 13.5px; }
.ccdn-ye-quick .cur { font-size: 13px; font-weight: 700; color: var(--ccdn-muted); }
.ccdn-ye-quick .ccdn-btn-text { min-height: 44px; }
@media (max-width: 560px) { .ccdn-ye-quick li { grid-template-columns: 1fr auto; } .ccdn-ye-quick .n { grid-column: 1 / -1; } }
.ccdn-ye-export .ccdn-btn-text { min-height: 44px; }

/* Tính tuổi em bé — milestone ledger (Batch 05): months by the calendar vs round day counts */
.ccdn-bb-ledger { margin-top: 22px; }
.ccdn-bb-ledger h3 { margin: 0 0 6px; }
.ccdn-bb-led { margin-top: 12px; border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); }
.ccdn-bb-led summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--ccdn-primary); min-height: 44px; display: flex; align-items: center; }
.ccdn-bb-led summary:focus-visible { outline: 3px solid var(--ccdn-primary); outline-offset: 2px; }
.ccdn-bb-ledwrap { padding: 0 16px 14px; overflow-x: auto; }
.ccdn-bb-lt { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ccdn-bb-lt th, .ccdn-bb-lt td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ccdn-border); vertical-align: top; color: var(--ccdn-body); }
.ccdn-bb-lt thead th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ccdn-muted); }
.ccdn-bb-lt tbody th { color: var(--ccdn-ink); white-space: nowrap; }
.ccdn-bb-lt tr.is-past th, .ccdn-bb-lt tr.is-past td { color: var(--ccdn-muted); }
.ccdn-bb-lt small { display: block; color: var(--ccdn-muted); font-size: 12.5px; }
.ccdn-bb-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #0F172A; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; }
.ccdn-bb-na { color: var(--ccdn-muted); }
.ccdn-bb-thoinoi { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--ccdn-border); border-radius: var(--ccdn-radius-md); background: #F8FAFC; }
.ccdn-bb-thoinoi h4 { margin: 0 0 6px; font-size: 16px; }
.ccdn-bb-thoinoi p { margin: 6px 0; }
@media (max-width: 640px) {
  .ccdn-bb-lt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccdn-bb-lt tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--ccdn-border); }
  .ccdn-bb-lt th, .ccdn-bb-lt td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: right; }
  .ccdn-bb-lt tbody th { text-align: left; white-space: normal; font-size: 15.5px; }
  .ccdn-bb-lt td::before { content: attr(data-label); font-weight: 700; color: var(--ccdn-muted); text-align: left; flex: none; }
  .ccdn-bb-lt td, .ccdn-bb-lt th { flex-wrap: wrap; min-width: 0; }
  .ccdn-bb-lt td small { display: block; flex-basis: 100%; margin: 0; text-align: right; }
  .ccdn-bb-ledwrap { padding: 0 10px 12px; }
}

/* /lich-nghi-le/ quick answers (Audit fix LNL-02) */
.ccdn-hl-quick { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 4px; font-size: 15.5px; color: var(--ccdn-body); }
.ccdn-hl-quick li { padding-left: 14px; position: relative; }
.ccdn-hl-quick li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ccdn-primary); }

/* ===== Design remediation A1 (C1): 320px-class phones. Controls reflow instead of clipping. ===== */
@media (max-width: 359px) {
  /* home workbench: from/to dates stacked, full width, 16px text (was 99px-wide fields cutting "10/11/20") */
  .ccdn-wb-panel .ccdn-field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ccdn-wb-panel .ccdn-field-row .ccdn-swap-btn { width: 100%; height: 40px; margin: 0 0 12px; }
  .ccdn-wb-panel .ccdn-field-row .ccdn-input[type="date"] { font-size: 16px; }
  /* working-day exceptions: date field takes its own row, add button below */
  .ccdn-wd-add-row { flex-wrap: wrap; }
  .ccdn-wd-add-row .ccdn-input { flex: 1 1 100%; }
  /* date + time moments: stacked, full width */
  .ccdn-dt-m-in { grid-template-columns: minmax(0, 1fr); }
  /* leave-bridge year/leave steppers: one per row so the 4-digit year is not squeezed to 30px */
  .ccdn-br-grid[data-mode~="plan"], .ccdn-br-grid[data-mode~="range"] { grid-template-columns: minmax(0, 1fr); }
}
/* A1: the mode tabs wrap to 2-3 lines on very narrow phones; the segmented-control shell had a fixed 46px height and clipped them */
@media (max-width: 639px) { .ccdn-dt-modes.ccdn-seg { height: auto; min-height: 46px; } }
/* A1b: found on visual verification. (1) Large result date was wider than the card at 320px; scale with the card width, capped at the original 44px.
   (2) Segmented controls that wrap to two rows had a fixed 46px shell that hid "Năm"/"Ngày làm việc" (thời hạn) and the second direction (đổi lịch). */
@media (max-width: 559px) { .ccdn-as-date { font-size: min(44px, calc((100vw - 92px) / 6.3)); } }
.ccdn-seg.ccdn-dl-units, .ccdn-seg.ccdn-lc-dirs { height: auto; min-height: 46px; }
/* A1b: home range result: the two dates sit in 123px columns at 320px, 20px dates ran past the card edge */
@media (max-width: 359px) { .ccdn-rg-end strong { font-size: 17px; } }

/* ===== Design remediation A2 / C5: touch targets on phones (target 44px; text links in running copy untouched) ===== */
@media (max-width: 639px) {
  .ccdn-brand { min-height: 44px; }
  .ccdn-footer-links a { padding: 12px 0; }
  .ccdn-chip, .ccdn-as-grid .ccdn-chip, .ccdn-wb .ccdn-chip { min-height: 44px; }
  .ccdn-opts summary, .ccdn-detail summary, .ccdn-why > summary, .ccdn-weekday-detail > summary,
  .ccdn-pd-holidays > summary, .ccdn-hl-sources > summary, .ccdn-dl-quotes > summary { min-height: 44px; }
  .ccdn-btn-text, .ccdn-nn-tbl td .ccdn-btn-text, .ccdn-st-now .ccdn-btn-text, .ccdn-tz-win .ccdn-btn-text,
  .ccdn-un-chips .ccdn-btn-text, .ccdn-wd-detail .ccdn-btn-text, .ccdn-pd-back .ccdn-btn-text { min-height: 44px; }
  /* tiny helper buttons that sit inside a field label ("hôm nay"): keep the label row compact, enlarge the hit area instead */
  .ccdn-label .ccdn-btn-text, .ccdn-wb .ccdn-label .ccdn-btn-text { min-height: 0; position: relative; }
  .ccdn-label .ccdn-btn-text::after { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -6px; }
  .ccdn-hg-try { display: inline-block; padding: 11px 0; }
  .ccdn-btn-secondary.ccdn-swap-btn, .ccdn-wb-panel .ccdn-field-row .ccdn-swap-btn { min-width: 44px; }
  .ccdn-wb-panel .ccdn-field-row { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
  .ccdn-wb-panel .ccdn-field-row .ccdn-swap-btn { width: 44px; }
  .ccdn-br-stepper { grid-template-columns: 40px minmax(0, 1fr) 40px; }
}
@media (max-width: 359px) {
  .ccdn-wb-panel .ccdn-field-row { grid-template-columns: minmax(0, 1fr); }
  .ccdn-wb-panel .ccdn-field-row .ccdn-swap-btn { width: 100%; }
  .ccdn-br-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
}
/* A2 / C5, second pass (phones): remaining controls found by measurement */
@media (max-width: 639px) {
  main .ccdn-chip.ccdn-chip, main .ccdn-btn.ccdn-btn, .ccdn-ev-fchip.ccdn-ev-fchip { min-height: 44px; }
  .ccdn-hg-sec details > summary { padding-top: 10px; padding-bottom: 10px; }
  .ccdn-ev-src > summary, .ccdn-gx-recon > summary, .ccdn-ev-jump { min-height: 44px; }
  .ccdn-as-result-col .ccdn-context-links a, .ccdn-context-links a { padding-top: 12px; padding-bottom: 12px; }
  .ccdn-hg-list li a, .ccdn-dg-l li a, .ccdn-hl-sources-list li a { display: inline-block; padding: 10px 0; }
  /* breadcrumb and heading links: layout unchanged, hit area grown vertically */
  .ccdn-dt-crumb a, main h3 > a { position: relative; }
  .ccdn-dt-crumb a::after, main h3 > a::after { content: ""; position: absolute; left: -4px; right: -4px; top: -14px; bottom: -14px; }
}

/* A2 / C6: placeholder text (e.g. the default year shown in an empty "Năm" field) was Chrome's #757575 = 4.61:1, which read as disabled. Use the palette's muted slate (7.6:1). */
.ccdn-input::placeholder, .ccdn-dm-stepper input::placeholder, .ccdn-br-stepper input::placeholder { color: var(--ccdn-muted); opacity: 1; }

/* A2 / C7: 12px floor for real text (labels, badges, notes, data under values, axis ticks); was 10-11.7px.
   Deliberately NOT touched: text inside tiny in-cell markers (.ccdn-mt-cal em, .ccdn-mt-ribbon ticks, .ccdn-tz-strip day marks) where 12px would break the cell. */
.ccdn-zd-wheel .y small, .ccdn-ev-row .d small, .ccdn-ev-clock .t span, .ccdn-ev-rb .lane .ll,
.ccdn-ev-rb .axis i span, .ccdn-ev-rb .axis .now span,
.ccdn-wk-tab3 th[scope="row"] .cur, .ccdn-wk-tab3 .b, .ccdn-wk-day .n, .ccdn-wk-day .m, .ccdn-wk-cell button i,
.ccdn-br-tiles .wd, .ccdn-br-tiles .mo, .ccdn-br-tiles .ty,
.ccdn-lb-cal .w, .ccdn-lb-cal .d b, .ccdn-lb-cal .d i.tag, .ccdn-nn-plate .y i,
.ccdn-dt-day .dl, .ccdn-dt-day .h, .ccdn-sc-strip .c span, .ccdn-sc-strip .c small,
.ccdn-st-ruler .axis span, .ccdn-tz-strip .ax span,
.ccdn-cal .ccdn-cal-w, .ccdn-cal .ccdn-cal-l, .ccdn-mcal th.ccdn-mcal-w small, .ccdn-wd-table th { font-size: 12px; }
@media (max-width: 559px) { .ccdn-pd-table th.num { font-size: 12px; } .ccdn-ev-clock .t span, .ccdn-sc-strip .c span, .ccdn-sc-strip .c small { font-size: 12px; } }
main small { font-size: max(12px, 0.8333em); }

/* ==========================================================================
   Layered Elevation, Level 4 — main section boxes in the HOMEPAGE body only
   (workbench, "Công cụ của bạn", "Công cụ phổ biến", guide sections A–C and FAQ).
   Inner components keep their own flat/level 1–2 styling; no other page is affected.
   ========================================================================== */
.ccdn-home .ccdn-wb,
.ccdn-home .ccdn-mine,
.ccdn-home .ccdn-pop,
.ccdn-home .ccdn-hg-sec {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
}
.ccdn-home .ccdn-mine, .ccdn-home .ccdn-pop { padding: 20px; }
.ccdn-home .ccdn-hg-sec { padding: 20px 20px 22px; margin-top: 28px; }
.ccdn-home .ccdn-band, .ccdn-home .ccdn-up, .ccdn-home .ccdn-disc2, .ccdn-home .ccdn-hg { margin-top: 28px; }
.ccdn-home .ccdn-band { gap: 28px; }
@media (min-width: 640px) {
	.ccdn-home .ccdn-mine, .ccdn-home .ccdn-pop { padding: 28px; }
	.ccdn-home .ccdn-hg-sec { padding: 28px 28px 30px; }
}
@media (min-width: 900px) {
	.ccdn-home .ccdn-mine, .ccdn-home .ccdn-pop { padding: 32px 34px; }
	.ccdn-home .ccdn-hg-sec { padding: 32px 36px 34px; margin-top: 32px; }
	.ccdn-home .ccdn-band, .ccdn-home .ccdn-up, .ccdn-home .ccdn-disc2, .ccdn-home .ccdn-hg { margin-top: 32px; }
	.ccdn-home .ccdn-band { gap: 32px; }
}
/* Level 4 padding narrows the "Mốc đã lưu" card: keep the name field full width instead of squeezing it to ~96px */
@media (min-width: 1200px) {
	.ccdn-home .ccdn-save-row { grid-template-columns: minmax(0, 1fr) auto; }
	.ccdn-home .ccdn-save-row .ccdn-field:first-child { grid-column: 1 / -1; }
}

/* Level 4 for the remaining body sections so every main section shares one box language */
.ccdn-home .ccdn-ql, .ccdn-home .ccdn-up, .ccdn-home .ccdn-disc2 {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
	padding: 20px;
	margin-top: 28px;
}
@media (min-width: 640px) { .ccdn-home .ccdn-ql, .ccdn-home .ccdn-up, .ccdn-home .ccdn-disc2 { padding: 28px; } }
@media (min-width: 900px) { .ccdn-home .ccdn-ql, .ccdn-home .ccdn-up, .ccdn-home .ccdn-disc2 { padding: 32px 36px; margin-top: 32px; } }

/* ==========================================================================
   Homepage hero: centred navy header (H1 + intro + the four tabs) joined to the white tool card below.
   Scope: .ccdn-home only. Palette: navy #10213E / royal blue #2563EB / accent #60A5FA.
   ========================================================================== */
.ccdn-home .ccdn-home-intro {
	background: #10213E; border: 1px solid #10213E; border-bottom: 0; border-radius: 20px 20px 0 0;
	text-align: center; padding: 30px 20px 14px; margin: 0;
}
.ccdn-home .ccdn-home-intro h1 { color: #FFFFFF; font-size: 30px; line-height: 1.15; margin: 0 0 10px; }
.ccdn-home .ccdn-home-intro p { color: #E2E8F0; max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.6; }
@media (min-width: 768px) {
	.ccdn-home .ccdn-home-intro { padding: 44px 40px 20px; }
	.ccdn-home .ccdn-home-intro h1 { font-size: 40px; margin-bottom: 12px; }
	.ccdn-home .ccdn-home-intro p { font-size: 17px; }
}
.ccdn-home .ccdn-wb { border-color: #10213E; border-top: 0; border-radius: 0 0 20px 20px; }
.ccdn-home .ccdn-wb-tabs {
	background: #10213E; border-bottom: 0; gap: 8px; padding: 6px 16px 20px;
}
@media (min-width: 768px) { .ccdn-home .ccdn-wb-tabs { padding: 6px 40px 24px; gap: 10px; } }
.ccdn-home .ccdn-wb-tab {
	background: #243A5B; color: #F1F5F9; border: 1px solid #405575; border-radius: 12px; margin-bottom: 0;
	transition: background-color .15s, border-color .15s;
}
.ccdn-home .ccdn-wb-tab:last-child { border: 1px solid #405575; }
.ccdn-home .ccdn-wb-tab:hover { background: #2F4A73; border-color: #60A5FA; }
.ccdn-home .ccdn-wb-tab.is-active, .ccdn-home .ccdn-wb-tab.is-active:hover { background: #2563EB; color: #FFFFFF; border-color: #2563EB; }
.ccdn-home .ccdn-wb-tab:focus-visible { outline: 3px solid #60A5FA; outline-offset: 2px; }
.ccdn-home .ccdn-home-intro { position: relative; z-index: 1; }   /* keeps the tool card's shadow from tinting the navy header */
.ccdn-home .ccdn-wb-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 359px) {
	.ccdn-home .ccdn-wb-tabs { padding: 6px 12px 16px; gap: 6px; }
	.ccdn-home .ccdn-wb-tab { font-size: 12.5px; padding: 6px 2px; }
}
@media (max-width: 479px) { .ccdn-home .ccdn-home-intro h1 { font-size: 27px; } }
@media (max-width: 359px) { .ccdn-home .ccdn-home-intro h1 { font-size: 24px; } }
.ccdn-home .ccdn-home-intro h1, .ccdn-home .ccdn-home-intro p { text-wrap: balance; }

/* ============================================================ SILO-2: "Cùng nhóm" block + menu group heading */
.ccdn-silo-rel { margin-top: 8px; margin-bottom: 28px; padding-top: 18px; border-top: 1px solid var(--ccdn-border-strong); }
.ccdn-silo-rel h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; color: var(--ccdn-ink); }
.ccdn-silo-rel h3 { margin: 16px 0 4px; font-size: 16px; color: var(--ccdn-ink); }
.ccdn-silo-rel-l { list-style: none; margin: 0; padding: 0; }
.ccdn-silo-rel-l li { padding: 9px 0; border-top: 1px solid var(--ccdn-border); font-size: 15px; color: var(--ccdn-ink); }
.ccdn-silo-rel-l li > a { font-weight: 700; font-size: 16px; color: var(--ccdn-ink); }
.ccdn-silo-rel-l li > a::after { content: " \2192"; color: var(--ccdn-primary); }
.ccdn-silo-rel-l li > a:hover { color: var(--ccdn-primary-deep); text-decoration: underline; }
.ccdn-silo-rel-l li > span { display: block; font-size: 14px; color: var(--ccdn-muted); margin-top: 1px; line-height: 1.4; }
.ccdn-nav-menu .ccdn-nav-grp, .ccdn-nav-acc-list .ccdn-nav-grp { padding: 8px 16px 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ccdn-muted); }
@media (min-width: 720px) { .ccdn-silo-rel-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.ccdn-brand span { white-space: nowrap; }
@media (min-width: 1120px) and (max-width: 1199px) { .ccdn-nav { gap: 0; } .ccdn-nav a { padding-left: 8px; padding-right: 8px; } .ccdn-nav-item.has-menu > a { padding-right: 2px; } }