/* ==========================================================================
   EMR CHECK 2026 — Thư viện component
   ========================================================================== */

/* ==========================================================================
   1. BUTTON
   Chiều cao 56px (desktop) / full-width (mobile) theo spec §38
   ========================================================================== */

.btn {
  --btn-h: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  padding-inline: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn__arrow { transition: transform var(--t-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- Primary: gradient brand --- */
.btn--primary {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 6px 18px rgba(1, 86, 138, .26);
}
.btn--primary:hover {
  color: #fff;
  box-shadow: 0 10px 26px rgba(1, 86, 138, .34);
}

/* --- Secondary: viền --- */
.btn--secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-900);
  box-shadow: var(--sh-sm);
}
.btn--secondary:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: var(--blue-50);
}

/* --- Ghost: chỉ chữ --- */
.btn--ghost {
  background: transparent;
  color: var(--brand-blue);
  padding-inline: var(--s-3);
  min-height: 44px;
}
.btn--ghost:hover { background: var(--blue-50); }

/* --- Trên nền tối --- */
.btn--onDark {
  background: #fff;
  color: var(--brand-blue-deep);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.btn--onDark:hover { background: #fff; color: var(--brand-blue); }

/* --- Đỏ thương hiệu: dùng RẤT hạn chế, chỉ cho hành động khẩn --- */
.btn--accent {
  background: var(--brand-red);
  color: #fff;
  box-shadow: 0 6px 18px rgba(236, 28, 36, .26);
}
.btn--accent:hover { background: var(--red-600); color: #fff; }

/* --- Kích thước --- */
.btn--lg { --btn-h: 60px; padding-inline: var(--s-8); font-size: var(--fs-lead); }
.btn--sm { --btn-h: 42px; padding-inline: var(--s-4); font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

@media (max-width: 639px) {
  .btn--fluidMobile { display: flex; width: 100%; }
}

/* ==========================================================================
   2. CHIP / BADGE
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  background: var(--surface-blue);
  color: var(--brand-blue);
  border: 1px solid transparent;
}

.chip--outline { background: var(--surface); border-color: var(--line); color: var(--ink-500); }
.chip--low  { background: var(--score-low-soft);  color: var(--score-low-ink); }
.chip--mid  { background: var(--score-mid-soft);  color: var(--score-mid-ink); }
.chip--good { background: var(--score-good-soft); color: var(--score-good-ink); }
.chip--high { background: var(--score-high-soft); color: var(--score-high-ink); }

/* Chấm trạng thái + hiệu ứng nhịp (dùng cho pressure level) */
.chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.chip__dot--pulse { position: relative; }
.chip__dot--pulse::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: pulseRing 2s var(--ease-out) infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(.6); opacity: .45; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ==========================================================================
   3. CARD
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-6);
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.card--hover:hover {
  border-color: var(--blue-200);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.card--soft { background: var(--surface-soft); border-color: transparent; }
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--sh-md); border-color: transparent; }

.card__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--s-4);
  border-radius: 12px;
  background: var(--surface-blue);
  color: var(--brand-blue);
}

.card__title { margin-bottom: var(--s-2); font-size: var(--fs-h3); }
.card__body  { color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.6; }

/* Số thứ tự lớn cho Education section */
.card__num {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  color: var(--blue-300);
}

/* ==========================================================================
   4. THANH ĐIỂM (score bar)
   ========================================================================== */

.bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  overflow: hidden;
}
.bar--thin { height: 6px; }

.bar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--brand-blue);
  transition: width 900ms var(--ease-out);
}

.bar__fill[data-level="low"]  { background: var(--score-low-bar); }
.bar__fill[data-level="mid"]  { background: var(--score-mid-bar); }
.bar__fill[data-level="good"] { background: var(--score-good-bar); }
.bar__fill[data-level="high"] { background: var(--score-high-bar); }

/* Một dòng breakdown: nhãn — thanh — số */
.metric { display: grid; gap: 7px; }
.metric__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.metric__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); }
.metric__value { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-500); }
.metric__note  { font-size: var(--fs-xs); color: var(--ink-400); }

/* ==========================================================================
   5. VÒNG ĐIỂM (score ring)
   ========================================================================== */

.ring {
  --ring-size: 168px;
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  flex: none;
}
.ring--sm { --ring-size: 116px; }
.ring--lg { --ring-size: 220px; }

.ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { stroke: var(--blue-50); }
.ring__value {
  stroke: url(#ringGradient);
  stroke-linecap: round;
  transition: stroke-dashoffset 1400ms var(--ease-out);
}

.ring__center {
  position: absolute; inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
}
.ring__num {
  font-size: calc(var(--ring-size) * .30);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.ring__den {
  font-size: calc(var(--ring-size) * .085);
  font-weight: 600;
  color: var(--ink-400);
}

/* ==========================================================================
   6. DÒNG TRẠNG THÁI (✓ / ⚠) trong report card
   ========================================================================== */

.statline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: 9px;
}
.statline + .statline { border-top: 1px solid var(--line); }
.statline__label { flex: 1; font-size: var(--fs-sm); color: var(--ink-700); }
.statline__bar { width: 62px; flex: none; }

.statline__mark {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  flex: none;
  font-size: 11px;
  font-weight: 700;
}
.statline__mark[data-state="ok"]   { background: var(--score-high-soft); color: var(--score-high-ink); }
.statline__mark[data-state="warn"] { background: var(--score-mid-soft);  color: var(--score-mid-ink); }
.statline__mark[data-state="bad"]  { background: var(--score-low-soft);  color: var(--score-low-ink); }

/* ==========================================================================
   7. TRUST POINTS
   ========================================================================== */

.trustlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
}
.trustlist li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.trustlist svg { color: var(--success); flex: none; }
.trustlist strong { color: var(--ink-900); font-weight: 600; }

/* ==========================================================================
   8. OPTION QUIZ (dùng lại ở M2)
   ========================================================================== */

.option {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: 56px;
  padding: var(--s-4);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  text-align: left;
  font-size: var(--fs-body);
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.option:hover { border-color: var(--blue-300); background: var(--blue-50); }
.option[aria-pressed="true"],
.option.is-selected {
  border-color: var(--brand-blue);
  background: var(--blue-50);
  box-shadow: var(--sh-focus);
}

.option__mark {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: transparent;
  transition: all var(--t-fast) var(--ease-out);
}
.option__mark--box { border-radius: 6px; }
.option.is-selected .option__mark {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.option__text { flex: 1; line-height: 1.4; }

/* ==========================================================================
   9. FORM
   ========================================================================== */

.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); }
.field__label .req { color: var(--brand-red); }

.input, .select {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s-4);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.input::placeholder { color: var(--ink-300); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: var(--sh-focus);
}
.input[aria-invalid="true"] { border-color: var(--brand-red); }

.select {
  appearance: none;
  padding-right: var(--s-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B7B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
}

.field__error { font-size: var(--fs-xs); color: var(--brand-red); }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-700);
  cursor: pointer;
}
.checkbox input {
  width: 20px; height: 20px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--brand-blue);
}

/* ==========================================================================
   10. GHI CHÚ PHÁP LÝ
   ========================================================================== */

.disclaimer {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-500);
}
.disclaimer svg { flex: none; color: var(--ink-400); margin-top: 2px; }

/* ==========================================================================
   11. LOGO
   ========================================================================== */

.logo { display: flex; align-items: center; gap: var(--s-3); }
.logo__img { height: 30px; width: auto; }
.logo__divider { width: 1px; height: 22px; background: var(--line-strong); }
.logo__tool {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-blue-deep);
}

/* ==========================================================================
   12. HIỆU ỨNG XUẤT HIỆN
   ========================================================================== */

/* ĐỪNG dùng cho nội dung nằm trong màn hình đầu tiên.
   opacity:0 cho tới khi JavaScript chạy xong sẽ đẩy Largest Contentful Paint
   lên rất cao — Lighthouse đo được 5,8s chỉ vì thẻ h1 ở hero mang thuộc tính
   này. Hero giờ hiện ngay, reveal chỉ dùng cho các section phía dưới. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   13. NHÃN CÁCH CHẤM
   Đánh dấu phần nội dung được tính bằng bộ tiêu chí cố định, để người đọc
   biết điểm số đến từ đâu.
   ========================================================================== */

.rule-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-500);
  white-space: nowrap;
}
.rule-badge svg { flex: none; }