/* tinhdiemonline.com — components.css Mọi selector đều qua class tiền tố td-. Không style trực tiếp thẻ HTML. Mobile-first: base = 375px, media query mở rộng lên desktop 1280px. */ /* ============ 0. Reset tối thiểu ============ */ .td-page { margin: 0; background: var(--td-bg); color: var(--td-ink); font-family: var(--td-font); font-size: var(--td-fs-300); line-height: var(--td-lh-body); -webkit-text-size-adjust: 100%; } .td-page *, .td-page *::before, .td-page *::after { box-sizing: border-box; } .td-container { width: 100%; max-width: var(--td-container); margin: 0 auto; padding: 0 var(--td-s-4); } .td-container--narrow { max-width: var(--td-container-narrow); } .td-main { display: block; padding: var(--td-s-5) 0 var(--td-s-8); } .td-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============ 1. Chữ ============ */ .td-h1 { margin: 0 0 var(--td-s-3); font-size: var(--td-fs-700); line-height: var(--td-lh-tight); font-weight: 700; letter-spacing: -.02em; text-wrap: pretty; } .td-h2 { margin: var(--td-s-7) 0 var(--td-s-4); font-size: var(--td-fs-600); line-height: var(--td-lh-snug); font-weight: 700; letter-spacing: -.01em; text-wrap: pretty; } .td-h3 { margin: var(--td-s-5) 0 var(--td-s-3); font-size: var(--td-fs-400); font-weight: 600; } .td-lead { margin: 0 0 var(--td-s-5); font-size: var(--td-fs-400); color: var(--td-ink-2); text-wrap: pretty; } .td-p { margin: 0 0 var(--td-s-4); } .td-muted { color: var(--td-ink-3); font-size: var(--td-fs-200); } .td-strong { font-weight: 600; color: var(--td-ink); } .td-eyebrow { display: block; margin: 0 0 var(--td-s-2); font-size: var(--td-fs-100); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--td-hub); } /* .td-page nằm trên nên rule này chạm mọi link; loại trừ các link đã có màu riêng (nút bấm, skip link) để chúng không bị tô thành xanh trên nền xanh. */ .td-page a:not(.td-btn):not(.td-skip-link) { color: var(--td-primary); text-underline-offset: 2px; } .td-page a:not(.td-btn):not(.td-skip-link):hover { color: var(--td-primary-dark); } /* ============ 2. Header + menu ============ */ .td-header { position: sticky; top: 0; z-index: 40; background: var(--td-surface); border-bottom: 1px solid var(--td-line); } .td-header__bar { display: flex; align-items: center; gap: var(--td-s-4); min-height: var(--td-header-h); } .td-logo { display: inline-flex; align-items: center; gap: var(--td-s-2); font-size: var(--td-fs-400); font-weight: 700; letter-spacing: -.02em; color: var(--td-ink); text-decoration: none; } .td-logo__mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--td-primary); color: #fff; } .td-logo__mark svg { width: 20px; height: 20px; } .td-logo__text { white-space: nowrap; } .td-logo__b { color: var(--td-primary); } .td-nav { display: none; } .td-nav__list { display: flex; align-items: center; gap: var(--td-s-1); margin: 0; padding: 0; list-style: none; } .td-nav__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--td-s-3); border-radius: var(--td-radius-sm); font-size: var(--td-fs-200); font-weight: 500; color: var(--td-ink-2); text-decoration: none; } .td-nav__link:hover { background: var(--td-primary-soft); color: var(--td-primary-dark); } .td-nav__link[aria-current="page"], .td-nav__link--section { background: var(--td-primary-soft); color: var(--td-primary-dark); font-weight: 600; } .td-burger { display: inline-grid; place-items: center; margin-left: auto; width: var(--td-tap); height: var(--td-tap); border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: var(--td-surface); color: var(--td-ink); cursor: pointer; } .td-burger svg { width: 22px; height: 22px; } .td-menu-mobile { border-top: 1px solid var(--td-line); background: var(--td-surface); padding: var(--td-s-2) 0 var(--td-s-4); } .td-menu-mobile__list { margin: 0; padding: 0; list-style: none; } .td-menu-mobile__link { display: flex; align-items: center; gap: var(--td-s-3); min-height: 52px; padding: 0 var(--td-s-4); border-bottom: 1px solid var(--td-line); font-size: var(--td-fs-300); font-weight: 500; color: var(--td-ink); text-decoration: none; } .td-menu-mobile__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--td-line-strong); } .td-menu-mobile__foot { padding: var(--td-s-4) var(--td-s-4) 0; } /* ============ 3. Breadcrumb ============ */ .td-breadcrumb { margin: 0 0 var(--td-s-4); font-size: var(--td-fs-200); color: var(--td-ink-3); } .td-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-s-2); margin: 0; padding: 0; list-style: none; } .td-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--td-s-2); } .td-breadcrumb__item::after { content: "›"; color: var(--td-line-strong); } .td-breadcrumb__item:last-child::after { content: none; } .td-breadcrumb__link { color: var(--td-ink-3); text-decoration: none; } .td-breadcrumb__link:hover { color: var(--td-primary); text-decoration: underline; } .td-breadcrumb__current { color: var(--td-ink-2); font-weight: 500; } /* ============ 4. Nút ============ */ .td-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--td-s-2); min-height: var(--td-tap); padding: 0 var(--td-s-5); border: 1px solid transparent; border-radius: var(--td-radius-sm); font-family: var(--td-font); font-size: var(--td-fs-300); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .td-btn svg { width: 18px; height: 18px; flex: none; } .td-btn:focus-visible { outline: none; box-shadow: var(--td-ring); } .td-btn--primary { background: var(--td-primary); color: #fff; } .td-btn--primary:hover { background: var(--td-primary-dark); color: #fff; } .td-btn--secondary { background: var(--td-surface); border-color: var(--td-line-strong); color: var(--td-ink); } .td-btn--secondary:hover { background: var(--td-primary-soft); border-color: var(--td-primary); color: var(--td-primary-dark); } .td-btn--ghost { background: transparent; color: var(--td-primary); padding: 0 var(--td-s-3); } .td-btn--ghost:hover { background: var(--td-primary-soft); } .td-btn--block { width: 100%; } .td-btn--sm { min-height: 40px; padding: 0 var(--td-s-4); font-size: var(--td-fs-200); } /* ============ 5. Ô tìm nhanh ============ */ .td-search { position: relative; display: flex; align-items: center; } .td-search__icon { position: absolute; left: var(--td-s-4); width: 20px; height: 20px; color: var(--td-ink-3); } .td-search__input { width: 100%; min-height: 56px; padding: 0 var(--td-s-4) 0 48px; border: 1px solid var(--td-line-strong); border-radius: var(--td-radius); background: var(--td-surface); font-family: var(--td-font); font-size: var(--td-fs-400); color: var(--td-ink); } .td-search__input::placeholder { color: var(--td-ink-3); } .td-search__input:focus { outline: none; border-color: var(--td-primary); box-shadow: var(--td-ring); } /* ============ 6. Card tool / hub ============ */ .td-grid { display: grid; gap: var(--td-s-3); grid-template-columns: 1fr; } .td-grid--2 { grid-template-columns: 1fr; } .td-grid--3 { grid-template-columns: 1fr; } .td-card-tool { display: flex; gap: var(--td-s-3); padding: var(--td-s-4); border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-surface); text-decoration: none; color: var(--td-ink); box-shadow: var(--td-shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .td-card-tool:hover { border-color: var(--td-hub); box-shadow: var(--td-shadow); transform: translateY(-1px); color: var(--td-ink); } .td-card-tool__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--td-hub-soft); color: var(--td-hub); } .td-card-tool__icon svg { width: 22px; height: 22px; } .td-card-tool__body { min-width: 0; } .td-card-tool__name { display: block; font-size: var(--td-fs-300); font-weight: 600; line-height: var(--td-lh-snug); } .td-card-tool__desc { display: block; margin-top: var(--td-s-1); font-size: var(--td-fs-200); color: var(--td-ink-3); line-height: var(--td-lh-snug); } .td-card-tool--p1 .td-card-tool__name::after { content: "Ưu tiên"; display: none; } .td-card-hub { padding: var(--td-s-5); border: 1px solid var(--td-line); border-top: 4px solid var(--td-hub); border-radius: var(--td-radius); background: var(--td-surface); box-shadow: var(--td-shadow-sm); } .td-card-hub__head { display: flex; align-items: center; gap: var(--td-s-3); margin-bottom: var(--td-s-4); } .td-card-hub__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--td-hub-soft); color: var(--td-hub); } .td-card-hub__icon svg { width: 22px; height: 22px; } .td-card-hub__title { margin: 0; font-size: var(--td-fs-500); font-weight: 700; letter-spacing: -.01em; } .td-card-hub__count { font-size: var(--td-fs-200); color: var(--td-ink-3); font-weight: 500; } .td-card-hub__list { display: grid; gap: var(--td-s-2); } .td-card-hub__foot { margin-top: var(--td-s-4); } /* Card tool dạng ngang (trang hub) */ .td-card-tool--wide { align-items: flex-start; padding: var(--td-s-5); } .td-card-tool--wide .td-card-tool__icon { width: 48px; height: 48px; } .td-card-tool--wide .td-card-tool__name { font-size: var(--td-fs-400); } .td-card-tool--wide .td-card-tool__desc { font-size: var(--td-fs-300); color: var(--td-ink-2); } .td-card-tool__more { display: inline-block; margin-top: var(--td-s-3); font-size: var(--td-fs-200); font-weight: 600; color: var(--td-hub); } /* Card bài viết */ .td-card-post { display: block; padding: var(--td-s-4); border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-surface); text-decoration: none; color: var(--td-ink); box-shadow: var(--td-shadow-sm); } .td-card-post:hover { border-color: var(--td-line-strong); box-shadow: var(--td-shadow); color: var(--td-ink); } .td-card-post__cat { display: inline-block; margin-bottom: var(--td-s-2); padding: 3px 10px; border-radius: var(--td-radius-pill); background: var(--td-hub-soft); color: var(--td-hub); font-size: var(--td-fs-100); font-weight: 600; } .td-card-post__title { display: block; font-size: var(--td-fs-300); font-weight: 600; line-height: var(--td-lh-snug); } .td-card-post__meta { display: block; margin-top: var(--td-s-2); font-size: var(--td-fs-100); color: var(--td-ink-3); } /* ============ 7. Calculator ============ */ .td-calc { border: 1px solid var(--td-line); border-radius: var(--td-radius-lg); background: var(--td-surface); box-shadow: var(--td-shadow); overflow: hidden; } .td-calc__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-s-3); padding: var(--td-s-4) var(--td-s-4); border-bottom: 1px solid var(--td-line); background: var(--td-surface-2); } .td-calc__title { margin: 0; font-size: var(--td-fs-400); font-weight: 700; } .td-calc__hint { margin: 0; font-size: var(--td-fs-200); color: var(--td-ink-3); } .td-calc__body { display: grid; gap: var(--td-s-5); padding: var(--td-s-4); } .td-calc__group { border: 0; margin: 0; padding: 0; } .td-calc__legend { display: flex; align-items: center; gap: var(--td-s-2); width: 100%; margin: 0 0 var(--td-s-3); padding: 0; font-size: var(--td-fs-300); font-weight: 700; color: var(--td-ink); } .td-calc__legend-num { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--td-hub-soft); color: var(--td-hub); font-size: var(--td-fs-100); font-weight: 700; } .td-calc__fields { display: grid; gap: var(--td-s-4); grid-template-columns: 1fr; } .td-calc__fields--2 { grid-template-columns: 1fr 1fr; } .td-calc__fields--3 { grid-template-columns: 1fr; } .td-calc__actions { display: flex; flex-wrap: wrap; gap: var(--td-s-3); padding: var(--td-s-4); border-top: 1px solid var(--td-line); background: var(--td-surface-2); } .td-calc__note { flex: 1 1 100%; margin: 0; font-size: var(--td-fs-100); color: var(--td-ink-3); } /* ---- Field ---- */ .td-field { display: grid; gap: 6px; } .td-field__label { font-size: var(--td-fs-200); font-weight: 600; color: var(--td-ink); } .td-field__opt { font-weight: 500; color: var(--td-ink-3); } .td-field__input { width: 100%; min-height: var(--td-tap); padding: 0 var(--td-s-4); border: 1px solid var(--td-line-strong); border-radius: var(--td-radius-sm); background: var(--td-surface); font-family: var(--td-font); font-size: var(--td-fs-400); font-weight: 600; color: var(--td-ink); } .td-field__input::placeholder { font-weight: 400; color: var(--td-ink-3); } .td-field__input:focus { outline: none; border-color: var(--td-primary); box-shadow: var(--td-ring); } .td-field__help { font-size: var(--td-fs-100); color: var(--td-ink-3); } .td-field__error { display: none; align-items: center; gap: 6px; font-size: var(--td-fs-100); font-weight: 600; color: var(--td-danger); } .td-field__error svg { width: 14px; height: 14px; flex: none; } .td-field--error .td-field__input { border-color: var(--td-danger); background: var(--td-danger-soft); } .td-field--error .td-field__input:focus { box-shadow: 0 0 0 3px rgba(188, 42, 34, .2); } .td-field--error .td-field__error { display: flex; } .td-field--error .td-field__help { display: none; } .td-field--select .td-field__input { appearance: none; padding-right: 40px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; } .td-field--pair { display: grid; gap: var(--td-s-2); grid-template-columns: 1fr 96px; align-items: end; } .td-field--pair > .td-field { min-width: 0; } .td-check { display: flex; align-items: center; gap: var(--td-s-3); min-height: var(--td-tap); padding: 0 var(--td-s-3); border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: var(--td-surface-2); font-size: var(--td-fs-200); font-weight: 500; cursor: pointer; } .td-check__box { width: 22px; height: 22px; flex: none; accent-color: var(--td-primary); } /* ---- Toggle thang điểm ---- */ .td-toggle { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: var(--td-surface-2); } .td-toggle__btn { flex: 1; min-height: 40px; border: 0; border-radius: 6px; background: transparent; font-family: var(--td-font); font-size: var(--td-fs-200); font-weight: 600; color: var(--td-ink-2); cursor: pointer; } .td-toggle__btn[aria-pressed="true"] { background: var(--td-surface); color: var(--td-hub); box-shadow: var(--td-shadow-sm); } /* ---- Bảng nhập nhiều dòng ---- */ .td-row-table { display: grid; gap: var(--td-s-3); } .td-row-table__head { display: none; } .td-row-table__row { display: grid; gap: var(--td-s-2); align-items: end; grid-template-columns: 1fr 1fr; padding: var(--td-s-3); border: 1px solid var(--td-line); border-radius: var(--td-radius-sm); background: var(--td-surface-2); } .td-row-table__row > .td-field--name { grid-column: 1 / -1; } .td-row-table__del { display: inline-grid; place-items: center; width: var(--td-tap); height: var(--td-tap); border: 1px solid var(--td-line-strong); border-radius: var(--td-radius-sm); background: var(--td-surface); color: var(--td-ink-3); cursor: pointer; } .td-row-table__del:hover { border-color: var(--td-danger); color: var(--td-danger); background: var(--td-danger-soft); } .td-row-table__del svg { width: 18px; height: 18px; } .td-row-table__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--td-s-3); } .td-row-table__total { font-size: var(--td-fs-200); color: var(--td-ink-2); } /* ---- Ô kết quả ---- */ .td-result { display: grid; gap: var(--td-s-4); padding: var(--td-s-5); border: 1px solid var(--td-line); border-radius: var(--td-radius-lg); background: linear-gradient(180deg, var(--td-surface-2), var(--td-surface)); } .td-result--in-calc { border-radius: 0; border-width: 1px 0 0; } .td-result__label { margin: 0; font-size: var(--td-fs-200); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--td-ink-3); } .td-result__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-s-4); } .td-result__value { font-size: var(--td-fs-result); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--td-ink); font-variant-numeric: tabular-nums; } .td-result__value--empty { color: var(--td-line-strong); } .td-result__unit { font-size: var(--td-fs-400); font-weight: 600; color: var(--td-ink-3); } .td-result__hint { margin: 0; font-size: var(--td-fs-200); color: var(--td-ink-3); } .td-result__reason { margin: 0; font-size: var(--td-fs-300); color: var(--td-ink-2); } .td-result__badge { display: inline-flex; align-items: center; gap: var(--td-s-2); padding: 8px var(--td-s-4); border-radius: var(--td-radius-pill); border: 1px solid transparent; font-size: var(--td-fs-300); font-weight: 700; letter-spacing: .01em; } .td-result__badge svg { width: 18px; height: 18px; flex: none; } .td-result__badge--success { background: var(--td-success-soft); border-color: rgba(18,120,74,.3); color: var(--td-success); } .td-result__badge--warning { background: var(--td-warning-soft); border-color: rgba(162,84,10,.3); color: var(--td-warning); } .td-result__badge--danger { background: var(--td-danger-soft); border-color: rgba(188,42,34,.3); color: var(--td-danger); } .td-result__badge--muted { background: var(--td-surface); border-color: var(--td-line); color: var(--td-ink-3); font-weight: 600; } .td-result__grid { display: grid; gap: var(--td-s-3); grid-template-columns: 1fr 1fr; padding-top: var(--td-s-4); border-top: 1px dashed var(--td-line); } .td-result__cell-label { display: block; font-size: var(--td-fs-100); color: var(--td-ink-3); } .td-result__cell-value { display: block; margin-top: 2px; font-size: var(--td-fs-400); font-weight: 700; font-variant-numeric: tabular-nums; } .td-result--pending .td-result__grid { opacity: .45; } .td-result--error { background: var(--td-danger-soft); border-color: rgba(188,42,34,.35); } /* ============ 8. Bảng công thức / ví dụ / tra cứu ============ */ .td-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-surface); } .td-formula-table, .td-example-table, .td-lookup-table { width: 100%; border-collapse: collapse; font-size: var(--td-fs-200); } .td-formula-table th, .td-example-table th, .td-lookup-table th { padding: var(--td-s-3) var(--td-s-4); text-align: left; white-space: nowrap; background: var(--td-surface-2); border-bottom: 1px solid var(--td-line); font-size: var(--td-fs-100); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--td-ink-3); } .td-formula-table td, .td-example-table td, .td-lookup-table td { padding: var(--td-s-3) var(--td-s-4); border-bottom: 1px solid var(--td-line); vertical-align: top; color: var(--td-ink-2); } .td-formula-table tr:last-child td, .td-example-table tr:last-child td, .td-lookup-table tr:last-child td { border-bottom: 0; } .td-formula-table__term { width: 34%; font-weight: 600; color: var(--td-ink); } .td-formula-table__math, .td-example-table__num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; color: var(--td-ink); font-weight: 600; } .td-example-table__num--total { color: var(--td-hub); } .td-lookup-table--sticky th:first-child, .td-lookup-table--sticky td:first-child { position: sticky; left: 0; background: var(--td-surface); box-shadow: 1px 0 0 var(--td-line); font-weight: 600; } .td-lookup-table--sticky th:first-child { background: var(--td-surface-2); } .td-table-caption { margin: var(--td-s-2) 0 0; font-size: var(--td-fs-100); color: var(--td-ink-3); } .td-scroll-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--td-s-2); font-size: var(--td-fs-100); color: var(--td-ink-3); } .td-scroll-hint svg { width: 14px; height: 14px; } /* ============ 9. Badge nguồn ============ */ .td-source-badge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-s-2) var(--td-s-3); padding: var(--td-s-3) var(--td-s-4); border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-surface); font-size: var(--td-fs-200); } .td-source-badge__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--td-info-soft); color: var(--td-info); } .td-source-badge__icon svg { width: 18px; height: 18px; } .td-source-badge__text { color: var(--td-ink-2); } .td-source-badge__date { margin-left: auto; padding: 4px 10px; border-radius: var(--td-radius-pill); background: var(--td-surface-2); border: 1px solid var(--td-line); font-size: var(--td-fs-100); font-weight: 600; color: var(--td-ink-3); white-space: nowrap; } /* ============ 10. Callout ============ */ .td-callout { display: flex; gap: var(--td-s-3); padding: var(--td-s-4); border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-info-soft); font-size: var(--td-fs-200); color: var(--td-ink-2); } .td-callout__icon { width: 20px; height: 20px; flex: none; color: var(--td-info); } .td-callout__title { display: block; margin-bottom: 2px; font-weight: 700; color: var(--td-ink); } .td-callout--warning { background: var(--td-warning-soft); border-color: rgba(162,84,10,.28); } .td-callout--warning .td-callout__icon { color: var(--td-warning); } /* ============ 11. FAQ ============ */ .td-faq { border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-surface); overflow: hidden; } .td-faq__item { border-bottom: 1px solid var(--td-line); } .td-faq__item:last-child { border-bottom: 0; } .td-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--td-s-3); min-height: 56px; padding: var(--td-s-3) var(--td-s-4); cursor: pointer; font-size: var(--td-fs-300); font-weight: 600; color: var(--td-ink); list-style: none; } .td-faq__q::-webkit-details-marker { display: none; } .td-faq__q:hover { background: var(--td-surface-2); } .td-faq__icon { width: 20px; height: 20px; flex: none; color: var(--td-ink-3); transition: transform .15s ease; } .td-faq__item[open] .td-faq__icon { transform: rotate(180deg); color: var(--td-hub); } .td-faq__a { padding: 0 var(--td-s-4) var(--td-s-4); color: var(--td-ink-2); } .td-faq__a > :last-child { margin-bottom: 0; } /* ============ 12. Khối liên quan ============ */ .td-related { display: grid; gap: var(--td-s-5); } .td-related__title { margin: 0 0 var(--td-s-3); font-size: var(--td-fs-500); font-weight: 700; } .td-related__list { display: grid; gap: var(--td-s-3); } /* ============ 13. Mục lục ============ */ .td-toc { padding: var(--td-s-4); border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-surface); } .td-toc__title { margin: 0 0 var(--td-s-3); font-size: var(--td-fs-100); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--td-ink-3); } .td-toc__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; } .td-toc__link { display: block; padding: 9px var(--td-s-3); border-radius: 6px; font-size: var(--td-fs-200); color: var(--td-ink-2); text-decoration: none; } .td-toc__link:hover { background: var(--td-primary-soft); color: var(--td-primary-dark); } .td-toc__link--active { background: var(--td-primary-soft); color: var(--td-primary-dark); font-weight: 600; } /* ============ 14. Bài blog ============ */ .td-article { max-width: 100%; } .td-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-s-3); margin: 0 0 var(--td-s-4); font-size: var(--td-fs-200); color: var(--td-ink-3); } .td-article__body { font-size: var(--td-fs-300); } .td-article__body .td-h2 { margin-top: var(--td-s-6); } .td-list { margin: 0 0 var(--td-s-4); padding-left: var(--td-s-5); color: var(--td-ink-2); } .td-list li { margin-bottom: var(--td-s-2); } .td-cta-tool { display: grid; gap: var(--td-s-3); padding: var(--td-s-5); border: 1px solid var(--td-hub); border-radius: var(--td-radius-lg); background: var(--td-hub-soft); margin: var(--td-s-6) 0; } .td-cta-tool__label { font-size: var(--td-fs-100); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--td-hub); } .td-cta-tool__title { margin: 0; font-size: var(--td-fs-500); font-weight: 700; } .td-cta-tool__desc { margin: 0; font-size: var(--td-fs-200); color: var(--td-ink-2); } /* ============ 15. Trang chủ: khối lý do & cập nhật ============ */ .td-hero { padding: var(--td-s-6) 0 var(--td-s-5); } .td-hero__inner { display: grid; gap: var(--td-s-4); } .td-reason { display: flex; gap: var(--td-s-3); padding: var(--td-s-4); border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-surface); } .td-reason__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--td-accent-soft); color: var(--td-accent); } .td-reason__icon svg { width: 20px; height: 20px; } .td-reason__title { display: block; font-size: var(--td-fs-300); font-weight: 600; } .td-reason__desc { display: block; margin-top: 2px; font-size: var(--td-fs-200); color: var(--td-ink-3); } .td-updates { border: 1px solid var(--td-line); border-radius: var(--td-radius); background: var(--td-surface); } .td-updates__item { display: grid; gap: 2px; padding: var(--td-s-4); border-bottom: 1px solid var(--td-line); text-decoration: none; color: var(--td-ink); } .td-updates__item:last-child { border-bottom: 0; } .td-updates__item:hover { background: var(--td-surface-2); color: var(--td-ink); } .td-updates__date { font-size: var(--td-fs-100); font-weight: 600; color: var(--td-hub-d); } .td-updates__text { font-size: var(--td-fs-300); font-weight: 500; line-height: var(--td-lh-snug); } .td-section { margin-top: var(--td-s-7); } .td-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--td-s-3); margin-bottom: var(--td-s-4); } .td-section__title { margin: 0; font-size: var(--td-fs-600); font-weight: 700; letter-spacing: -.01em; } .td-section__link { font-size: var(--td-fs-200); font-weight: 600; } /* ============ 16. Footer ============ */ .td-footer { margin-top: var(--td-s-8); border-top: 1px solid var(--td-line); background: var(--td-surface); } .td-footer__inner { display: grid; gap: var(--td-s-6); padding: var(--td-s-6) 0; } .td-footer__col-title { margin: 0 0 var(--td-s-3); font-size: var(--td-fs-100); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--td-ink-3); } .td-footer__list { display: grid; gap: var(--td-s-2); margin: 0; padding: 0; list-style: none; } .td-footer__link { font-size: var(--td-fs-200); color: var(--td-ink-2); text-decoration: none; } .td-footer__link:hover { color: var(--td-primary); text-decoration: underline; } .td-footer__bottom { padding: var(--td-s-4) 0 var(--td-s-6); border-top: 1px solid var(--td-line); } .td-footer__disclaimer { margin: 0 0 var(--td-s-2); font-size: var(--td-fs-200); color: var(--td-ink-2); } .td-footer__copy { margin: 0; font-size: var(--td-fs-100); color: var(--td-ink-3); } /* ============ 17. Tiện ích ============ */ .td-stack-4 { display: grid; gap: var(--td-s-4); } .td-stack-5 { display: grid; gap: var(--td-s-5); } .td-hub-a { --td-hub: var(--td-hub-a); --td-hub-soft: var(--td-hub-a-soft); } .td-hub-b { --td-hub: var(--td-hub-b); --td-hub-soft: var(--td-hub-b-soft); } .td-hub-c { --td-hub: var(--td-hub-c); --td-hub-soft: var(--td-hub-c-soft); } .td-hub-d { --td-hub: var(--td-hub-d); --td-hub-soft: var(--td-hub-d-soft); } /* ============ 18. Desktop ============ */ @media (min-width: 640px) { .td-grid--2 { grid-template-columns: 1fr 1fr; } .td-calc__fields--3 { grid-template-columns: repeat(3, 1fr); } .td-row-table__row { grid-template-columns: minmax(0,1fr) 110px 110px var(--td-tap); align-items: end; } .td-row-table__row > .td-field--name { grid-column: auto; } .td-result__grid { grid-template-columns: repeat(3, 1fr); } .td-footer__inner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .td-calc__fields--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .td-calc__fields--3 { grid-template-columns: 1fr 1fr; } .td-container { padding: 0 var(--td-s-6); } .td-nav { display: block; margin-left: auto; } .td-burger { display: none; } .td-menu-mobile { display: none; } .td-h1 { font-size: var(--td-fs-800); } .td-grid--3 { grid-template-columns: repeat(3, 1fr); } .td-calc__body { padding: var(--td-s-5); } .td-calc__head, .td-calc__actions { padding: var(--td-s-4) var(--td-s-5); } .td-result { padding: var(--td-s-5) var(--td-s-6); } .td-result__value { font-size: 64px; } .td-footer__inner { grid-template-columns: repeat(4, 1fr); } .td-tool-layout { display: grid; gap: var(--td-s-7); grid-template-columns: minmax(0,1fr) 280px; align-items: start; } .td-tool-layout__side { position: sticky; top: calc(var(--td-header-h) + var(--td-s-4)); } .td-formula-table, .td-example-table, .td-lookup-table { font-size: var(--td-fs-300); } } /* ============ 19. In ============ */ @media print { .td-header, .td-footer, .td-toc, .td-related, .td-calc__actions, .td-burger { display: none; } .td-page { background: #fff; } .td-table-scroll { overflow: visible; } }