/* tinhdiemonline.com — features.css
   Các tính năng thêm sau bản design: nút hành động của calculator, lịch sử tính,
   mã nhúng, chế độ nhúng iframe và nền tối. Không sửa components.css để còn đồng bộ lại được với design. */

/* ============ 1. Hàng nút của calculator ============ */
.td-calc__buttons { display: flex; flex-wrap: wrap; gap: var(--td-s-2); align-items: center; }
.td-calc__flash {
  margin: var(--td-s-3) 0 0; padding: var(--td-s-3) var(--td-s-4);
  background: var(--td-hub-soft); border-radius: var(--td-radius);
  font-size: var(--td-fs-200); color: var(--td-ink);
}

/* ============ 2. Mã nhúng ============ */
.td-embed-box { margin-top: var(--td-s-4); display: grid; gap: var(--td-s-2); }
.td-embed-box__code {
  width: 100%; padding: var(--td-s-3); resize: vertical;
  border: 1px solid var(--td-line-strong); border-radius: var(--td-radius);
  background: var(--td-surface-2); color: var(--td-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--td-fs-100); line-height: 1.5;
}

/* ============ 3. Lịch sử tính gần đây ============ */
.td-history {
  margin-top: var(--td-s-5); padding-top: var(--td-s-4);
  border-top: 1px solid var(--td-line);
}
.td-history__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--td-s-3); }
.td-history__title { font-size: var(--td-fs-200); font-weight: 600; color: var(--td-ink); }
.td-history__clear {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--td-fs-100); color: var(--td-ink-3); text-decoration: underline;
}
.td-history__clear:hover { color: var(--td-danger); }
.td-history__list { margin: var(--td-s-3) 0 var(--td-s-2); padding: 0; list-style: none; display: grid; gap: var(--td-s-2); }
.td-history__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--td-s-2) var(--td-s-3);
  padding: var(--td-s-3); border: 1px solid var(--td-line); border-radius: var(--td-radius);
  background: var(--td-surface-2);
}
.td-history__result { flex: 1; min-width: 140px; font-weight: 600; font-variant-numeric: tabular-nums; }
.td-history__time { font-size: var(--td-fs-100); color: var(--td-ink-3); font-variant-numeric: tabular-nums; }

/* ============ 4. Nút đổi nền sáng/tối ============ */
.td-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: var(--td-s-2);
  border: 1px solid var(--td-line); border-radius: var(--td-radius);
  background: var(--td-surface); color: var(--td-ink-2); cursor: pointer;
}
.td-theme:hover { border-color: var(--td-primary); color: var(--td-primary); }
.td-theme svg { width: 20px; height: 20px; }
.td-theme__moon { display: none; }
:root[data-theme="dark"] .td-theme__sun { display: none; }
:root[data-theme="dark"] .td-theme__moon { display: block; }

/* ============ 5. Chế độ nhúng iframe (?embed=1) ============ */
.td-embed .td-header,
.td-embed .td-footer,
.td-embed .td-breadcrumb,
.td-embed .td-tool-layout__side,
.td-embed .td-related,
.td-embed .td-menu-mobile,
.td-embed .td-skip-link,
.td-embed .td-h2,
.td-embed .td-table-scroll,
.td-embed .td-callout,
.td-embed .td-source-badge,
.td-embed .td-faq,
.td-embed .td-eyebrow,
.td-embed .td-lead,
.td-embed [data-role="embed"] { display: none !important; }
.td-embed .td-main { padding: var(--td-s-4) 0; }
.td-embed .td-h1 { font-size: var(--td-fs-500); margin-bottom: var(--td-s-4); }
.td-embed .td-tool-layout { display: block; }
.td-embed .td-embed-credit { display: block; }
.td-embed-credit {
  display: none; margin: var(--td-s-4) 0 0;
  font-size: var(--td-fs-100); color: var(--td-ink-3); text-align: center;
}

/* ============ 6. Nền tối ============ */
:root[data-theme="dark"] {
  --td-primary: #7FA8FF;
  --td-primary-dark: #A3C0FF;
  --td-primary-soft: #1A2540;
  --td-accent: #3AC9B8;
  --td-accent-soft: #12302E;

  --td-ink: #E9EDF6;
  --td-ink-2: #B7C1D3;
  --td-ink-3: #8B95A9;
  --td-bg: #0E1420;
  --td-surface: #151D2C;
  --td-surface-2: #1B2434;
  --td-line: #2A3548;
  --td-line-strong: #3D4A62;

  --td-success: #4ADE80;
  --td-success-soft: #10291C;
  --td-warning: #FBBF24;
  --td-warning-soft: #2C2110;
  --td-danger: #FF7A72;
  --td-danger-soft: #2F1715;
  --td-info: #7FA8FF;
  --td-info-soft: #1A2540;

  --td-hub-a: #7FA8FF;
  --td-hub-b: #B394FF;
  --td-hub-c: #3AC9B8;
  --td-hub-d: #FF9457;
  --td-hub-a-soft: #1A2540;
  --td-hub-b-soft: #241C3D;
  --td-hub-c-soft: #10302C;
  --td-hub-d-soft: #331F13;

  --td-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --td-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  --td-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  --td-ring: 0 0 0 3px rgba(127, 168, 255, .3);

  color-scheme: dark;
}

/* Nút primary cần nền đậm hơn màu link để chữ trắng vẫn đủ tương phản trên nền tối. */
:root[data-theme="dark"] .td-btn--primary { background: #2B5FD9; color: #fff; }
:root[data-theme="dark"] .td-btn--primary:hover { background: #3A6FE8; color: #fff; }
:root[data-theme="dark"] .td-logo__mark { color: #fff; }

/* ============ 7. In ============ */
@media print {
  /* Trang in luôn dùng nền sáng, kể cả khi người dùng đang bật nền tối. */
  :root[data-theme="dark"] {
    --td-ink: #101828; --td-ink-2: #3E4A60; --td-ink-3: #6B7688;
    --td-bg: #FFFFFF; --td-surface: #FFFFFF; --td-surface-2: #FAFBFD;
    --td-line: #DEE3ED; --td-line-strong: #C3CBDA;
    --td-primary: #1D4ED8; --td-hub: #1D4ED8;
  }
  .td-theme, .td-history, .td-embed-box, .td-calc__flash { display: none !important; }
  .td-calc { border: 0; box-shadow: none; }
}

/* ============ 8. Điền nhanh (danh sách môn / bộ trọng số) ============ */
.td-preset {
  margin: 0 0 var(--td-s-4); padding: var(--td-s-4);
  background: var(--td-hub-soft); border-radius: var(--td-radius);
}
.td-preset__label {
  display: block; margin-bottom: var(--td-s-2);
  font-size: var(--td-fs-100); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--td-hub);
}
.td-preset__row { display: flex; flex-wrap: wrap; gap: var(--td-s-2); margin-bottom: var(--td-s-2); }
.td-preset__btn--on { border-color: var(--td-hub); color: var(--td-hub); font-weight: 600; }
@media print { .td-preset { display: none !important; } }