/* ==========================================================================
   HAM AI — Component Library
   Phụ thuộc: ham-tokens.css
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--ham-bg-void);
  color: var(--ham-text-2);
  font-family: var(--ham-font-body);
  font-size: var(--ham-fs-body);
  line-height: var(--ham-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ánh sáng nền toàn cục — thay cho ảnh background nặng */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 620px at 12% -8%,  rgba(47,128,255,.20), transparent 62%),
    radial-gradient(760px 560px at 92% 4%,   rgba(51,214,255,.13), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(130,87,255,.14), transparent 62%);
}
body > * { position: relative; z-index: var(--ham-z-base); }

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

a { color: var(--ham-blue-300); text-decoration: none; transition: color var(--ham-t-fast) var(--ham-ease); }
a:hover { color: var(--ham-cyan); }

::selection { background: rgba(51,214,255,.28); color: var(--ham-text); }

:focus-visible { outline: none; box-shadow: var(--ham-focus); border-radius: var(--ham-r-xs); }

/* Thanh cuộn */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: var(--ham-r-pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: content-box; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ham-font-display);
  color: var(--ham-text);
  font-weight: var(--ham-fw-bold);
  line-height: var(--ham-lh-snug);
  letter-spacing: var(--ham-ls-head);
  margin: 0 0 var(--ham-s-4);
}
h1 { font-size: var(--ham-fs-h1); }
h2 { font-size: var(--ham-fs-h2); }
h3 { font-size: var(--ham-fs-h3); }
h4 { font-size: var(--ham-fs-h4); font-weight: var(--ham-fw-semi); }
p  { margin: 0 0 var(--ham-s-4); }

.ham-display {
  font-family: var(--ham-font-display);
  font-size: var(--ham-fs-display);
  font-weight: var(--ham-fw-black);
  line-height: var(--ham-lh-tight);
  letter-spacing: var(--ham-ls-display);
  color: var(--ham-text);
  margin: 0 0 var(--ham-s-5);
}
.ham-lead { font-size: var(--ham-fs-lead); color: var(--ham-text-2); max-width: 62ch; }
.ham-muted { color: var(--ham-text-3); }
.ham-small { font-size: var(--ham-fs-sm); }

/* Eyebrow — nhãn phân mục */
.ham-eyebrow {
  display: inline-flex; align-items: center; gap: var(--ham-s-2);
  font-size: var(--ham-fs-label); font-weight: var(--ham-fw-semi);
  letter-spacing: var(--ham-ls-label); text-transform: uppercase;
  color: var(--ham-cyan); margin-bottom: var(--ham-s-3);
}
.ham-eyebrow::before {
  content: ""; width: 20px; height: 1px;
  background: var(--ham-grad-brand);
}

.ham-grad-text {
  background: var(--ham-grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Số liệu tài chính — luôn cùng bề rộng ký tự */
.ham-num {
  font-family: var(--ham-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -.01em;
}
.ham-up   { color: var(--ham-up); }
.ham-down { color: var(--ham-down); }
.ham-flat { color: var(--ham-flat); }

/* ---------- Layout ---------- */
.ham-container { width: 100%; max-width: var(--ham-container); margin-inline: auto; padding-inline: var(--ham-gutter); }
.ham-container--wide   { max-width: var(--ham-container-w); }
.ham-container--narrow { max-width: var(--ham-container-n); }

.ham-section { padding-block: var(--ham-section-y); }

.ham-grid { display: grid; gap: var(--ham-gap); grid-template-columns: repeat(var(--ham-cols), minmax(0, 1fr)); }
.ham-cols-2 { display: grid; gap: var(--ham-gap); grid-template-columns: repeat(2, minmax(0,1fr)); }
.ham-cols-3 { display: grid; gap: var(--ham-gap); grid-template-columns: repeat(3, minmax(0,1fr)); }
.ham-cols-4 { display: grid; gap: var(--ham-gap); grid-template-columns: repeat(4, minmax(0,1fr)); }
.ham-stack  { display: flex; flex-direction: column; gap: var(--ham-s-4); }
.ham-row    { display: flex; align-items: center; gap: var(--ham-s-3); flex-wrap: wrap; }

@media (max-width: 1024px) {
  .ham-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ham-cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .ham-cols-2, .ham-cols-3, .ham-cols-4 { grid-template-columns: 1fr; }
}

/* ---------- Bề mặt kính ---------- */
.ham-glass {
  position: relative;
  background: var(--ham-glass-fill);
  background-image: var(--ham-grad-surface);
  border: 1px solid var(--ham-glass-stroke);
  border-radius: var(--ham-r-lg);
  box-shadow: var(--ham-sh-glass);
  backdrop-filter: blur(var(--ham-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ham-blur)) saturate(150%);
  transition: border-color var(--ham-t-base) var(--ham-ease),
              transform var(--ham-t-base) var(--ham-ease-out),
              box-shadow var(--ham-t-base) var(--ham-ease);
}
/* Viền sáng mép trên — chi tiết ký hiệu của hệ thống */
.ham-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: var(--ham-grad-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55;
}
.ham-glass--pad { padding: var(--ham-s-6); }
.ham-glass--flat { box-shadow: none; backdrop-filter: blur(var(--ham-blur-sm)); }

.ham-glass--hover:hover {
  border-color: var(--ham-glass-stroke-2);
  background-color: var(--ham-glass-fill-2);
  transform: translateY(-3px);
  box-shadow: var(--ham-sh-lift);
}

/* Fallback khi trình duyệt không hỗ trợ backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ham-glass { background-color: var(--ham-bg-raised); }
}

/* ---------- Buttons ---------- */
.ham-btn {
  --_bg: transparent; --_fg: var(--ham-text); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ham-s-2);
  font-family: var(--ham-font-body);
  font-size: var(--ham-fs-sm); font-weight: var(--ham-fw-semi);
  line-height: 1; letter-spacing: -.005em;
  padding: 14px var(--ham-s-6);
  border-radius: var(--ham-r-pill);
  border: 1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: transform var(--ham-t-fast) var(--ham-ease),
              box-shadow var(--ham-t-base) var(--ham-ease),
              background-color var(--ham-t-base) var(--ham-ease),
              border-color var(--ham-t-base) var(--ham-ease),
              filter var(--ham-t-base) var(--ham-ease);
}
.ham-btn:active { transform: translateY(1px) scale(.99); }
.ham-btn[disabled], .ham-btn.is-disabled { opacity: .45; pointer-events: none; }

.ham-btn--primary {
  background: var(--ham-grad-brand); color: var(--ham-text-on-brand);
  font-weight: var(--ham-fw-bold);
  box-shadow: 0 10px 30px -12px rgba(47,128,255,.75);
}
.ham-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 16px 40px -14px rgba(51,214,255,.8); }

.ham-btn--secondary {
  background: var(--ham-glass-fill); color: var(--ham-text);
  border-color: var(--ham-glass-stroke-2);
  backdrop-filter: blur(var(--ham-blur-sm));
}
.ham-btn--secondary:hover { background: var(--ham-glass-fill-2); border-color: rgba(255,255,255,.28); }

.ham-btn--ghost { color: var(--ham-text-2); }
.ham-btn--ghost:hover { color: var(--ham-text); background: var(--ham-glass-fill); }

.ham-btn--danger { background: var(--ham-down); color: #12040A; font-weight: var(--ham-fw-bold); }
.ham-btn--danger:hover { filter: brightness(1.08); }

.ham-btn--sm { padding: 9px var(--ham-s-4); font-size: var(--ham-fs-xs); }
.ham-btn--lg { padding: 18px var(--ham-s-8); font-size: var(--ham-fs-body); }
.ham-btn--block { width: 100%; }

/* Nút đang tải */
.ham-btn.is-loading { pointer-events: none; color: transparent !important; position: relative; }
.ham-btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--ham-text-on-brand);
  animation: ham-spin .7s linear infinite;
}
@keyframes ham-spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
.ham-field { display: flex; flex-direction: column; gap: var(--ham-s-2); margin-bottom: var(--ham-s-5); }
.ham-label {
  font-size: var(--ham-fs-xs); font-weight: var(--ham-fw-med);
  color: var(--ham-text-2); letter-spacing: .01em;
}
.ham-label .ham-req { color: var(--ham-down); margin-left: 2px; }

.ham-input, .ham-select, .ham-textarea {
  width: 100%;
  font-family: inherit; font-size: var(--ham-fs-sm); color: var(--ham-text);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--ham-glass-stroke);
  border-radius: var(--ham-r-sm);
  padding: 13px var(--ham-s-4);
  transition: border-color var(--ham-t-base) var(--ham-ease),
              background-color var(--ham-t-base) var(--ham-ease),
              box-shadow var(--ham-t-base) var(--ham-ease);
}
.ham-textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.ham-select {
  appearance: none; padding-right: var(--ham-s-9); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23A9B8CE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--ham-s-4) center;
}
.ham-input::placeholder, .ham-textarea::placeholder { color: var(--ham-text-3); }

.ham-input:hover, .ham-select:hover, .ham-textarea:hover { border-color: var(--ham-glass-stroke-2); }
.ham-input:focus, .ham-select:focus, .ham-textarea:focus {
  outline: none;
  border-color: var(--ham-blue);
  background: rgba(47,128,255,.06);
  box-shadow: 0 0 0 3px rgba(47,128,255,.18);
}
.ham-input[aria-invalid="true"], .ham-textarea[aria-invalid="true"] {
  border-color: var(--ham-down); background: var(--ham-down-soft);
}
.ham-input:disabled, .ham-select:disabled, .ham-textarea:disabled { opacity: .5; cursor: not-allowed; }

.ham-help  { font-size: var(--ham-fs-xs); color: var(--ham-text-3); }
.ham-error { font-size: var(--ham-fs-xs); color: var(--ham-down); display: flex; align-items: center; gap: 6px; }

/* Checkbox & radio */
.ham-check { display: flex; align-items: flex-start; gap: var(--ham-s-3); cursor: pointer; font-size: var(--ham-fs-sm); }
.ham-check input { appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0;
  border: 1px solid var(--ham-glass-stroke-2); border-radius: var(--ham-r-xs);
  background: rgba(255,255,255,.04); cursor: pointer; position: relative;
  transition: all var(--ham-t-fast) var(--ham-ease); }
.ham-check input[type="radio"] { border-radius: 50%; }
.ham-check input:checked { background: var(--ham-grad-brand); border-color: transparent; }
.ham-check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--ham-text-on-brand); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.ham-check input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ham-text-on-brand);
}

/* Toggle */
.ham-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.ham-switch input { opacity: 0; width: 0; height: 0; }
.ham-switch span {
  position: absolute; inset: 0; cursor: pointer; border-radius: var(--ham-r-pill);
  background: rgba(255,255,255,.1); border: 1px solid var(--ham-glass-stroke);
  transition: background var(--ham-t-base) var(--ham-ease);
}
.ham-switch span::before {
  content: ""; position: absolute; left: 3px; top: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ham-text-2);
  transition: transform var(--ham-t-base) var(--ham-ease-out), background var(--ham-t-base) var(--ham-ease);
}
.ham-switch input:checked + span { background: var(--ham-grad-brand); border-color: transparent; }
.ham-switch input:checked + span::before { transform: translateX(20px); background: #fff; }

/* ---------- Badges ---------- */
.ham-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--ham-r-pill);
  font-size: var(--ham-fs-label); font-weight: var(--ham-fw-semi);
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}
.ham-badge--brand { background: var(--ham-info-soft); color: var(--ham-blue-300); border-color: rgba(47,128,255,.3); }
.ham-badge--ai    { background: rgba(130,87,255,.16); color: #B49AFF; border-color: rgba(130,87,255,.34); }
.ham-badge--up    { background: var(--ham-up-soft); color: var(--ham-up); border-color: rgba(23,201,126,.32); }
.ham-badge--down  { background: var(--ham-down-soft); color: var(--ham-down); border-color: rgba(255,77,106,.32); }
.ham-badge--warn  { background: var(--ham-warn-soft); color: var(--ham-warn); border-color: rgba(255,176,32,.32); }
.ham-badge--neutral { background: rgba(255,255,255,.06); color: var(--ham-text-2); border-color: var(--ham-glass-stroke); }

/* Chấm trạng thái sống */
.ham-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ham-dot--live { position: relative; }
.ham-dot--live::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .5;
  animation: ham-pulse 2s var(--ham-ease) infinite;
}
@keyframes ham-pulse { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Alerts ---------- */
.ham-alert {
  display: flex; gap: var(--ham-s-3); align-items: flex-start;
  padding: var(--ham-s-4) var(--ham-s-5);
  border-radius: var(--ham-r-md);
  border: 1px solid var(--ham-glass-stroke);
  background: var(--ham-glass-fill);
  font-size: var(--ham-fs-sm);
  border-left-width: 3px;
}
.ham-alert__title { font-weight: var(--ham-fw-semi); color: var(--ham-text); margin-bottom: 2px; }
.ham-alert--info    { border-left-color: var(--ham-blue);  background: var(--ham-info-soft); }
.ham-alert--success { border-left-color: var(--ham-up);    background: var(--ham-up-soft); }
.ham-alert--warn    { border-left-color: var(--ham-warn);  background: var(--ham-warn-soft); }
.ham-alert--danger  { border-left-color: var(--ham-down);  background: var(--ham-down-soft); }

/* ---------- Market data card ---------- */
.ham-market {
  padding: var(--ham-s-5);
  border-radius: var(--ham-r-md);
  display: flex; flex-direction: column; gap: var(--ham-s-3);
}
.ham-market__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ham-s-3); }
.ham-market__sym {
  font-family: var(--ham-font-display); font-weight: var(--ham-fw-bold);
  font-size: var(--ham-fs-sm); color: var(--ham-text); letter-spacing: .02em;
}
.ham-market__name { font-size: var(--ham-fs-xs); color: var(--ham-text-3); }
.ham-market__price {
  font-size: 1.75rem; font-weight: var(--ham-fw-bold); color: var(--ham-text);
  line-height: 1.1;
}
.ham-market__delta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ham-fs-sm); font-weight: var(--ham-fw-semi); }
.ham-market__spark { height: 42px; width: 100%; overflow: hidden; }
.ham-market__spark svg { width: 100%; height: 100%; }

/* Ticker chạy ngang */
.ham-ticker { overflow: hidden; border-block: var(--ham-hairline); padding-block: var(--ham-s-3); }
.ham-ticker__track { display: flex; gap: var(--ham-s-8); width: max-content; animation: ham-marquee 42s linear infinite; }
.ham-ticker:hover .ham-ticker__track { animation-play-state: paused; }
.ham-ticker__item { display: flex; align-items: baseline; gap: var(--ham-s-2); font-size: var(--ham-fs-sm); white-space: nowrap; }
.ham-ticker__item b { color: var(--ham-text); font-weight: var(--ham-fw-semi); }
@keyframes ham-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Chart container ---------- */
.ham-chart { padding: var(--ham-s-5) var(--ham-s-5) var(--ham-s-4); border-radius: var(--ham-r-lg); }
.ham-chart__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ham-s-4); flex-wrap: wrap; margin-bottom: var(--ham-s-5);
}
.ham-chart__title { font-family: var(--ham-font-display); font-weight: var(--ham-fw-semi); color: var(--ham-text); font-size: var(--ham-fs-h4); margin: 0; }
.ham-chart__body { min-height: 240px; position: relative; }
/* Nhóm nút khoảng thời gian */
.ham-range { display: inline-flex; padding: 3px; gap: 2px; background: rgba(255,255,255,.05); border: 1px solid var(--ham-glass-stroke); border-radius: var(--ham-r-pill); }
.ham-range button {
  border: 0; background: transparent; cursor: pointer; color: var(--ham-text-3);
  font: inherit; font-size: var(--ham-fs-xs); font-weight: var(--ham-fw-med);
  padding: 6px 12px; border-radius: var(--ham-r-pill);
  transition: all var(--ham-t-fast) var(--ham-ease);
}
.ham-range button:hover { color: var(--ham-text); }
.ham-range button[aria-pressed="true"] { background: var(--ham-glass-fill-2); color: var(--ham-text); box-shadow: var(--ham-sh-sm); }

/* ---------- Product card ---------- */
.ham-product { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ham-r-lg); }
.ham-product__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(150deg, #12233A 0%, #0B1626 100%);
}
.ham-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ham-t-slow) var(--ham-ease-out); }
.ham-product:hover .ham-product__media img { transform: scale(1.045); }
.ham-product__flags { position: absolute; top: var(--ham-s-3); left: var(--ham-s-3); display: flex; gap: 6px; z-index: 2; }
.ham-product__body { padding: var(--ham-s-5); display: flex; flex-direction: column; gap: var(--ham-s-3); flex: 1; }
.ham-product__cat { font-size: var(--ham-fs-label); text-transform: uppercase; letter-spacing: var(--ham-ls-label); color: var(--ham-text-3); }
.ham-product__title { font-family: var(--ham-font-display); font-size: var(--ham-fs-h4); font-weight: var(--ham-fw-semi); color: var(--ham-text); margin: 0; }
.ham-product__meta { display: flex; flex-wrap: wrap; gap: var(--ham-s-2); font-size: var(--ham-fs-xs); color: var(--ham-text-3); }
.ham-product__foot { margin-top: auto; padding-top: var(--ham-s-3); display: flex; align-items: center; justify-content: space-between; gap: var(--ham-s-3); border-top: var(--ham-hairline); }
.ham-price { display: flex; align-items: baseline; gap: var(--ham-s-2); }
.ham-price__now { font-size: 1.25rem; font-weight: var(--ham-fw-bold); color: var(--ham-text); }
.ham-price__was { font-size: var(--ham-fs-sm); color: var(--ham-text-3); text-decoration: line-through; }
.ham-price__cur { font-size: var(--ham-fs-xs); color: var(--ham-text-3); }

/* ---------- Pricing card ---------- */
.ham-plan { padding: var(--ham-s-7) var(--ham-s-6); display: flex; flex-direction: column; gap: var(--ham-s-5); border-radius: var(--ham-r-xl); }
.ham-plan__name { font-family: var(--ham-font-display); font-size: var(--ham-fs-h4); font-weight: var(--ham-fw-semi); color: var(--ham-text); margin: 0; }
.ham-plan__price { display: flex; align-items: baseline; gap: var(--ham-s-2); }
.ham-plan__price b { font-family: var(--ham-font-display); font-size: 2.75rem; font-weight: var(--ham-fw-black); color: var(--ham-text); letter-spacing: var(--ham-ls-display); line-height: 1; }
.ham-plan__price span { font-size: var(--ham-fs-sm); color: var(--ham-text-3); }
.ham-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ham-s-3); font-size: var(--ham-fs-sm); }
.ham-plan__list li { display: flex; gap: var(--ham-s-3); align-items: flex-start; }
.ham-plan__list li::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--ham-up-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' fill='none'%3E%3Cpath d='M1 4.6 4 7.5 10 1.3' stroke='%2317C97E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}
.ham-plan__list li.is-off { color: var(--ham-text-3); }
.ham-plan__list li.is-off::before { background: rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='none'%3E%3Cpath d='M1.5 1.5 7.5 7.5M7.5 1.5 1.5 7.5' stroke='%236B7F99' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat; }
.ham-plan--featured { border-color: rgba(47,128,255,.42); box-shadow: var(--ham-glow-blue), var(--ham-sh-lg); }
.ham-plan__tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); }

/* ---------- News card ---------- */
.ham-news { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ham-r-lg); }
.ham-news__media { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(150deg, #12233A, #0B1626); }
.ham-news__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ham-t-slow) var(--ham-ease-out); }
.ham-news:hover .ham-news__media img { transform: scale(1.04); }
.ham-news__body { padding: var(--ham-s-5); display: flex; flex-direction: column; gap: var(--ham-s-3); flex: 1; }
.ham-news__title { font-family: var(--ham-font-display); font-size: 1.0625rem; font-weight: var(--ham-fw-semi); color: var(--ham-text); line-height: 1.4; margin: 0; }
.ham-news:hover .ham-news__title { color: var(--ham-cyan); }
/* flex-wrap bắt buộc: ::before dưới đây chiếm flex-basis 100% để vẽ đường kẻ.
   Thiếu wrap thì đường kẻ và các mục meta bị dồn cùng một dòng, đẩy ngày
   tháng tràn ra ngoài thẻ. */
.ham-news__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ham-s-3); font-size: var(--ham-fs-xs); color: var(--ham-text-3); }
.ham-news__meta::before { content: ""; display: block; width: 100%; height: 1px; background: var(--ham-hairline); order: -1; flex: 1 0 100%; margin-bottom: var(--ham-s-3); }

/* ---------- Table ---------- */
.ham-table-wrap { overflow-x: auto; border-radius: var(--ham-r-lg); border: 1px solid var(--ham-glass-stroke); background: var(--ham-glass-fill); backdrop-filter: blur(var(--ham-blur-sm)); }
.ham-table { width: 100%; border-collapse: collapse; font-size: var(--ham-fs-sm); min-width: 640px; }
.ham-table thead th {
  text-align: left; padding: var(--ham-s-4) var(--ham-s-5);
  font-size: var(--ham-fs-label); font-weight: var(--ham-fw-semi);
  letter-spacing: var(--ham-ls-label); text-transform: uppercase; color: var(--ham-text-3);
  border-bottom: 1px solid var(--ham-hairline-2); white-space: nowrap;
  background: rgba(255,255,255,.02); position: sticky; top: 0; backdrop-filter: blur(8px);
}
.ham-table tbody td { padding: var(--ham-s-4) var(--ham-s-5); border-bottom: var(--ham-hairline); color: var(--ham-text-2); }
.ham-table tbody tr:last-child td { border-bottom: 0; }
.ham-table tbody tr { transition: background var(--ham-t-fast) var(--ham-ease); }
.ham-table tbody tr:hover { background: rgba(255,255,255,.03); }
.ham-table .is-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ham-text); }
.ham-table__sym { color: var(--ham-text); font-weight: var(--ham-fw-semi); }

/* ---------- Tabs ---------- */
.ham-tabs { display: flex; gap: var(--ham-s-1); border-bottom: var(--ham-hairline); overflow-x: auto; }
.ham-tab {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--ham-fs-sm); font-weight: var(--ham-fw-med); color: var(--ham-text-3);
  padding: var(--ham-s-3) var(--ham-s-4); position: relative; white-space: nowrap;
  transition: color var(--ham-t-fast) var(--ham-ease);
}
.ham-tab:hover { color: var(--ham-text-2); }
.ham-tab[aria-selected="true"] { color: var(--ham-text); }
.ham-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--ham-s-3); right: var(--ham-s-3); bottom: -1px; height: 2px;
  background: var(--ham-grad-brand); border-radius: var(--ham-r-pill);
}
.ham-tabpanel { padding-top: var(--ham-s-5); }
.ham-tabpanel[hidden] { display: none; }

/* ---------- Accordion ---------- */
.ham-acc { border: 1px solid var(--ham-glass-stroke); border-radius: var(--ham-r-md); background: var(--ham-glass-fill); overflow: hidden; }
.ham-acc + .ham-acc { margin-top: var(--ham-s-3); }
.ham-acc summary {
  list-style: none; cursor: pointer; padding: var(--ham-s-4) var(--ham-s-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ham-s-4);
  font-weight: var(--ham-fw-med); color: var(--ham-text); font-size: var(--ham-fs-sm);
  transition: background var(--ham-t-fast) var(--ham-ease);
}
.ham-acc summary::-webkit-details-marker { display: none; }
.ham-acc summary:hover { background: rgba(255,255,255,.03); }
.ham-acc summary::after {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 1.8px solid var(--ham-text-3); border-bottom: 1.8px solid var(--ham-text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--ham-t-base) var(--ham-ease);
}
.ham-acc[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ham-acc__body { padding: 0 var(--ham-s-5) var(--ham-s-5); font-size: var(--ham-fs-sm); color: var(--ham-text-2); }

/* ---------- Tooltip ---------- */
.ham-tip { position: relative; display: inline-flex; border-bottom: 1px dashed var(--ham-text-3); cursor: help; }
.ham-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  min-width: 160px; max-width: 260px; width: max-content;
  background: var(--ham-bg-overlay); color: var(--ham-text);
  border: 1px solid var(--ham-glass-stroke-2); border-radius: var(--ham-r-sm);
  padding: var(--ham-s-3) var(--ham-s-4); font-size: var(--ham-fs-xs); line-height: 1.5;
  box-shadow: var(--ham-sh-lg); z-index: var(--ham-z-tooltip);
  opacity: 0; pointer-events: none;
  transition: opacity var(--ham-t-base) var(--ham-ease), transform var(--ham-t-base) var(--ham-ease-out);
}
.ham-tip:hover::after, .ham-tip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Modal ---------- */
.ham-modal { border: 0; padding: 0; background: transparent; max-width: min(560px, calc(100vw - 32px)); width: 100%; color: inherit; }
.ham-modal::backdrop { background: rgba(3, 9, 18, .72); backdrop-filter: blur(6px); }
.ham-modal__inner {
  background: var(--ham-bg-overlay); background-image: var(--ham-grad-surface);
  border: 1px solid var(--ham-glass-stroke-2); border-radius: var(--ham-r-xl);
  box-shadow: var(--ham-sh-lg); padding: var(--ham-s-7); position: relative;
}
.ham-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ham-s-4); margin-bottom: var(--ham-s-4); }
.ham-modal__title { margin: 0; font-size: var(--ham-fs-h3); }
.ham-modal__close {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ham-glass-stroke); background: var(--ham-glass-fill); color: var(--ham-text-2);
  display: grid; place-items: center; font-size: 18px; line-height: 1;
  transition: all var(--ham-t-fast) var(--ham-ease);
}
.ham-modal__close:hover { color: var(--ham-text); border-color: var(--ham-glass-stroke-2); }
.ham-modal__foot { display: flex; gap: var(--ham-s-3); justify-content: flex-end; margin-top: var(--ham-s-6); flex-wrap: wrap; }

/* ---------- Header ---------- */
.ham-header {
  position: sticky; top: 0; z-index: var(--ham-z-header);
  border-bottom: 1px solid transparent;
  transition: background var(--ham-t-base) var(--ham-ease), border-color var(--ham-t-base) var(--ham-ease);
}
.ham-header.is-stuck {
  background: rgba(6, 16, 29, .72);
  border-bottom-color: var(--ham-hairline);
  backdrop-filter: blur(var(--ham-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--ham-blur)) saturate(160%);
}
.ham-header__bar { display: flex; align-items: center; gap: var(--ham-s-6); height: 72px; }
.ham-header__logo { display: flex; align-items: center; flex: 0 0 auto; }
.ham-header__logo img, .ham-header__logo svg { height: 34px; width: auto; }
.ham-nav { display: flex; align-items: center; gap: var(--ham-s-1); margin-inline: auto; }
.ham-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px var(--ham-s-4); border-radius: var(--ham-r-pill);
  font-size: var(--ham-fs-sm); font-weight: var(--ham-fw-med); color: var(--ham-text-2);
  transition: all var(--ham-t-fast) var(--ham-ease);
}
.ham-nav__link:hover, .ham-nav__link[aria-expanded="true"] { color: var(--ham-text); background: var(--ham-glass-fill); }
.ham-nav__link[aria-current="page"] { color: var(--ham-text); }
.ham-header__actions { display: flex; align-items: center; gap: var(--ham-s-3); flex: 0 0 auto; }

/* Chuyển ngữ */
.ham-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ham-r-pill); background: rgba(255,255,255,.05); border: 1px solid var(--ham-glass-stroke); }
.ham-lang a { padding: 5px 11px; border-radius: var(--ham-r-pill); font-size: var(--ham-fs-xs); font-weight: var(--ham-fw-semi); color: var(--ham-text-3); }
.ham-lang a[aria-current="true"] { background: var(--ham-glass-fill-2); color: var(--ham-text); }

/* Mega menu */
.ham-mega {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-8px);
  top: calc(100% + 8px); width: min(940px, calc(100vw - 48px));
  background: rgba(15, 32, 54, .9); background-image: var(--ham-grad-surface);
  border: 1px solid var(--ham-glass-stroke-2); border-radius: var(--ham-r-xl);
  box-shadow: var(--ham-sh-lg); padding: var(--ham-s-7);
  backdrop-filter: blur(var(--ham-blur-lg)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--ham-blur-lg)) saturate(160%);
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--ham-s-7);
  opacity: 0; visibility: hidden; z-index: var(--ham-z-header);
  transition: opacity var(--ham-t-base) var(--ham-ease), transform var(--ham-t-base) var(--ham-ease-out), visibility var(--ham-t-base);
}
.ham-mega.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.ham-mega__col h5 {
  font-size: var(--ham-fs-label); text-transform: uppercase; letter-spacing: var(--ham-ls-label);
  color: var(--ham-text-3); margin: 0 0 var(--ham-s-4); font-family: var(--ham-font-body); font-weight: var(--ham-fw-semi);
}
.ham-mega__item { display: flex; gap: var(--ham-s-3); padding: var(--ham-s-3); border-radius: var(--ham-r-sm); transition: background var(--ham-t-fast) var(--ham-ease); }
.ham-mega__item:hover { background: rgba(255,255,255,.05); }
.ham-mega__item strong { display: block; color: var(--ham-text); font-size: var(--ham-fs-sm); font-weight: var(--ham-fw-semi); }
.ham-mega__item span { display: block; color: var(--ham-text-3); font-size: var(--ham-fs-xs); line-height: 1.5; }
.ham-mega__icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--ham-r-sm);
  display: grid; place-items: center;
  background: var(--ham-info-soft); border: 1px solid rgba(47,128,255,.28);
}

/* Nút hamburger */
.ham-burger { display: none; width: 42px; height: 42px; border-radius: var(--ham-r-sm); cursor: pointer;
  background: var(--ham-glass-fill); border: 1px solid var(--ham-glass-stroke); place-items: center; }
.ham-burger i { display: block; width: 18px; height: 1.6px; background: var(--ham-text); border-radius: 2px; position: relative; transition: all var(--ham-t-base) var(--ham-ease); }
.ham-burger i::before, .ham-burger i::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.6px; background: var(--ham-text); border-radius: 2px; transition: transform var(--ham-t-base) var(--ham-ease); }
.ham-burger i::before { top: -6px; } .ham-burger i::after { top: 6px; }
.ham-burger[aria-expanded="true"] i { background: transparent; }
.ham-burger[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.ham-burger[aria-expanded="true"] i::after  { transform: translateY(-6px) rotate(-45deg); }

/* Menu mobile — drawer */
.ham-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); z-index: var(--ham-z-drawer);
  background: rgba(10, 23, 40, .96); border-left: 1px solid var(--ham-glass-stroke);
  backdrop-filter: blur(var(--ham-blur-lg)); box-shadow: var(--ham-sh-lg);
  transform: translateX(100%); transition: transform var(--ham-t-slow) var(--ham-ease-out);
  display: flex; flex-direction: column; padding: var(--ham-s-6); overflow-y: auto;
}
.ham-drawer.is-open { transform: translateX(0); }
.ham-drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ham-s-4) 0; border-bottom: var(--ham-hairline);
  font-size: 1.0625rem; font-weight: var(--ham-fw-med); color: var(--ham-text); font-family: var(--ham-font-display);
}
.ham-scrim { position: fixed; inset: 0; background: rgba(3,9,18,.6); backdrop-filter: blur(3px); z-index: calc(var(--ham-z-drawer) - 1); opacity: 0; visibility: hidden; transition: all var(--ham-t-base) var(--ham-ease); }
.ham-scrim.is-open { opacity: 1; visibility: visible; }

/* 1023 chứ không phải 1024: máy 1024px là laptop nhỏ, hiện hamburger ở đó
   trông như lỗi. Tablet dọc 768 và dưới mới dùng drawer. */
@media (max-width: 1023px) {
  .ham-nav { display: none; }
  .ham-burger { display: grid; }
  .ham-header__bar { height: 64px; }
}

/* ---------- Footer ---------- */
.ham-footer { border-top: var(--ham-hairline); background: rgba(6,16,29,.55); backdrop-filter: blur(var(--ham-blur-sm)); margin-top: var(--ham-s-12); }
.ham-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--ham-s-8); padding-block: var(--ham-s-11) var(--ham-s-8); }
.ham-footer h5 { font-size: var(--ham-fs-label); text-transform: uppercase; letter-spacing: var(--ham-ls-label); color: var(--ham-text-3); margin: 0 0 var(--ham-s-4); font-family: var(--ham-font-body); font-weight: var(--ham-fw-semi); }
.ham-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ham-s-3); font-size: var(--ham-fs-sm); }
.ham-footer ul a { color: var(--ham-text-2); }
.ham-footer ul a:hover { color: var(--ham-cyan); }
.ham-footer__bottom { border-top: var(--ham-hairline); padding-block: var(--ham-s-5); display: flex; flex-wrap: wrap; gap: var(--ham-s-4); align-items: center; justify-content: space-between; font-size: var(--ham-fs-xs); color: var(--ham-text-3); }
.ham-risk { font-size: var(--ham-fs-xs); color: var(--ham-text-3); line-height: 1.7; border: var(--ham-hairline); border-radius: var(--ham-r-md); padding: var(--ham-s-4); background: rgba(255,255,255,.02); }
@media (max-width: 900px) { .ham-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--ham-s-7); } }
@media (max-width: 560px) { .ham-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Trạng thái: rỗng / tải / lỗi ---------- */
.ham-state { text-align: center; padding: var(--ham-s-11) var(--ham-s-6); display: flex; flex-direction: column; align-items: center; gap: var(--ham-s-4); }
.ham-state svg { width: 104px; height: 104px; opacity: .95; }
.ham-state h3 { margin: 0; font-size: var(--ham-fs-h3); }
.ham-state p { margin: 0; max-width: 46ch; color: var(--ham-text-3); font-size: var(--ham-fs-sm); }

/* Skeleton */
.ham-skel { background: linear-gradient(100deg, rgba(255,255,255,.045) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.045) 70%);
  background-size: 220% 100%; animation: ham-shimmer 1.5s linear infinite; border-radius: var(--ham-r-xs); }
.ham-skel--line { height: 12px; }
.ham-skel--title { height: 20px; width: 55%; }
.ham-skel--box { height: 150px; border-radius: var(--ham-r-md); }
@keyframes ham-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* Spinner độc lập */
.ham-spinner { width: 30px; height: 30px; border: 2.5px solid rgba(255,255,255,.14); border-top-color: var(--ham-cyan); border-radius: 50%; animation: ham-spin .8s linear infinite; }

/* ---------- Tiện ích ---------- */
.ham-divider { height: 1px; background: var(--ham-hairline); border: 0; margin-block: var(--ham-s-7); }
.ham-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ham-skip { position: absolute; left: -9999px; }
.ham-skip:focus { left: var(--ham-s-4); top: var(--ham-s-4); z-index: var(--ham-z-toast); background: var(--ham-bg-overlay); padding: var(--ham-s-3) var(--ham-s-5); border-radius: var(--ham-r-sm); color: var(--ham-text); }


/* ==========================================================================
   HAM AI — V.NEXT LAYER · "Blueprint / Scientific Instrument"
   Lớp thiết kế mới cho toàn bộ nội dung trang (thay cho CSS nhúng từng trang).
   Phụ thuộc: ham-tokens.css (V.NEXT). Không dùng ảnh chụp — chỉ SVG.
   ========================================================================== */

/* ---------- Nền blueprint & khung chữ ---------- */
body{
  background-color:var(--ham-bg-base);
  background-image:
    linear-gradient(rgba(120,150,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,150,200,.05) 1px,transparent 1px);
  background-size:44px 44px;
}
h1,h2,h3,h4{font-family:var(--ham-font-display);letter-spacing:var(--ham-ls-head)}
.hammock{display:block}
/* Rail chung: .container dung DUNG rail cua header/footer (.ham-container--wide) */
.hammock .container{width:100%;max-width:var(--ham-container-w);margin-inline:auto;padding-inline:var(--ham-gutter);box-sizing:border-box}
.hammock .container .ham-container{padding-inline:0}
.section{padding:var(--ham-section-y) 0;position:relative}
.compact-section{padding:56px 0}
.page-content{padding:64px 0}
.centered,.center-heading{text-align:center}
.right{text-align:right}

/* ---------- Eyebrow kiểu toạ độ ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ham-font-num);font-size:var(--ham-fs-label);letter-spacing:var(--ham-ls-label);text-transform:uppercase;color:var(--ham-text-3)}
.eyebrow::before{content:'// ';color:var(--ham-cyan);letter-spacing:0}
.eyebrow-line{display:inline-block;width:26px;height:1px;background:var(--ham-grad-ai)}
.section-heading{max-width:680px;margin-bottom:44px}
.section-heading h2,.split-heading h2{font-size:var(--ham-fs-h2);line-height:var(--ham-lh-snug);margin:14px 0 14px}
.section-heading p{color:var(--ham-text-2);line-height:var(--ham-lh-body)}
.split-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:44px}
.split-heading p{color:var(--ham-text-2);line-height:var(--ham-lh-body)}

/* ---------- Nút trong nội dung ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--ham-r-pill);padding:13px 22px;font-weight:var(--ham-fw-bold);font-size:var(--ham-fs-sm);font-family:var(--ham-font-body);cursor:pointer;border:1px solid transparent;transition:transform var(--ham-t-base) var(--ham-ease),box-shadow var(--ham-t-base)}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--ham-grad-ai);color:var(--ham-text-on-brand)}
.button-primary:hover{box-shadow:var(--ham-glow-cyan)}
.button-ghost{background:var(--ham-glass-fill);color:var(--ham-text);border-color:var(--ham-glass-stroke)}
.button-light{background:var(--ham-text);color:#0a0f1c}
.text-link{color:var(--ham-cyan);text-decoration:none;border-bottom:1px dashed rgba(87,242,200,.4)}
.text-link:hover{border-bottom-style:solid}

/* ---------- HERO trang chủ ---------- */
.hero{position:relative;overflow:hidden;border-bottom:var(--ham-hairline)}
.hero-image,.hero-shade{display:none}
.hero-inner{position:relative}
.hero .hero-inner .container,.hero-inner{padding-top:64px;padding-bottom:44px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero-copy h1{font-size:var(--ham-fs-display);line-height:var(--ham-lh-tight);letter-spacing:var(--ham-ls-display);margin:18px 0 0}
.hero-copy h1 span{display:block}
.hero-copy .grad,.grad-text{background:var(--ham-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{max-width:520px;color:var(--ham-text-2);font-size:var(--ham-fs-lead);line-height:var(--ham-lh-body);margin:22px 0 26px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.hero-trust{display:flex;gap:34px;margin-top:36px}
.hero-trust b{font-family:var(--ham-font-display);font-size:26px;display:block}
.hero-trust span{display:block;font-family:var(--ham-font-num);font-size:10.5px;letter-spacing:.12em;color:var(--ham-text-3);margin-top:4px;text-transform:uppercase}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 80px rgba(20,40,80,.4))}
.spin-slow{animation:hamspin 60s linear infinite;transform-origin:center}
@keyframes hamspin{to{transform:rotate(360deg)}}
.breathe{animation:hambreathe 4s ease-in-out infinite;transform-origin:center}
@keyframes hambreathe{50%{opacity:.28;transform:scale(1.08)}}
.dashflow{stroke-dasharray:6 6;animation:hamflow 3s linear infinite}
@keyframes hamflow{to{stroke-dashoffset:-24}}

/* ---------- Dải giá / logo strip ---------- */
.logo-strip{border-block:var(--ham-hairline);background:linear-gradient(180deg,var(--ham-bg-raised),var(--ham-bg-base))}
.logo-strip-inner{width:min(calc(100% - 40px),var(--ham-container));margin:auto;display:flex;align-items:center;gap:0;min-height:70px;overflow-x:auto;scrollbar-width:none}
.logo-strip-inner::-webkit-scrollbar{display:none}
.logo-strip-inner>*{display:flex;align-items:center;gap:10px;padding:12px 26px;border-right:var(--ham-hairline-2);font-family:var(--ham-font-num);font-size:12.5px;white-space:nowrap;color:var(--ham-text-2)}
.logo-strip [data-ham-field="name"]{font-weight:700;color:var(--ham-text)}
.logo-strip [data-ham-field="price"]{color:var(--ham-text-2)}
.logo-strip [data-ham-field="delta"].ham-up,[data-ham-field="delta"].up{color:var(--ham-up)}
.logo-strip [data-ham-field="delta"].ham-down,[data-ham-field="delta"].dn{color:var(--ham-down)}
.market-note{font-family:var(--ham-font-num);font-size:10px;color:var(--ham-text-3);letter-spacing:.08em;padding:10px 0;text-align:center;text-transform:uppercase}
.market-section .market-embed{border:var(--ham-hairline);border-radius:var(--ham-r-xl);overflow:hidden;background:var(--ham-bg-raised)}

/* ---------- Hero trang con (băng chuẩn + motif SVG) ---------- */
.inner-hero,.copy-page-hero,.bot-hero{position:relative;overflow:hidden;border-bottom:var(--ham-hairline);padding:88px 0 64px;background:
  radial-gradient(circle at 82% 30%,rgba(87,242,200,.08),transparent 45%),
  radial-gradient(circle at 90% 80%,rgba(143,124,255,.09),transparent 40%)}
.inner-hero.compact{padding:70px 0 54px}
.inner-hero h1,.copy-page-hero h1{font-size:var(--ham-fs-h1);line-height:var(--ham-lh-tight);letter-spacing:var(--ham-ls-display);margin:16px 0 14px;max-width:720px}
.inner-hero h1 span,.copy-page-hero h1 span{display:block}
.inner-hero p,.copy-page-hero p{max-width:600px;color:var(--ham-text-2);font-size:var(--ham-fs-lead);line-height:var(--ham-lh-body)}
.inner-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.inner-hero-stat{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.inner-hero-stat>*{font-family:var(--ham-font-num);font-size:11px;letter-spacing:.1em;color:var(--ham-text-2);border:var(--ham-hairline);border-radius:var(--ham-r-pill);padding:8px 14px;background:var(--ham-glass-fill-2);text-transform:uppercase}
.hero-motif{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:min(36vw,430px);max-height:86%;pointer-events:none;opacity:.95}
@media(max-width:900px){.hero-motif{opacity:.14;right:-10%}}
.copy-page-hero .hero-inner{padding:0}
.bot-hero-row{display:flex;align-items:center;gap:16px;margin:6px 0 14px}
.bot-badge{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;border:1px solid var(--acc,var(--ham-cyan));color:var(--acc,var(--ham-cyan));font-family:var(--ham-font-num);font-weight:700;background:var(--ham-glass-fill-2)}
.bot-market{font-family:var(--ham-font-num);font-size:11px;letter-spacing:.16em;color:var(--acc,var(--ham-cyan));text-transform:uppercase}
.bot-desc{max-width:640px}

/* ---------- Màu nhấn từng bot ---------- */
.gold{--acc:#ffcf7a}.blue{--acc:#37b9ff}.violet{--acc:#8f7cff}.green{--acc:#57f2c8}.orange{--acc:#ffa94d}

/* ---------- Lưới 5 bot (trang chủ) ---------- */
.bot-snapshot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.bot-snapshot{position:relative;display:block;padding:22px;border:var(--ham-hairline);border-radius:var(--ham-r-lg);background:var(--ham-grad-surface);min-height:225px;transition:transform var(--ham-t-base) var(--ham-ease),border-color var(--ham-t-base)}
.bot-snapshot:hover{transform:translateY(-6px);border-color:var(--acc,var(--ham-cyan))}
.bot-code{font-family:var(--ham-font-num);font-size:10px;letter-spacing:.14em;color:var(--acc,var(--ham-cyan));text-transform:uppercase}
.bot-snapshot h3{font-size:19px;margin:12px 0 6px}
.bot-snapshot p{font-size:13px;color:var(--ham-text-2);line-height:1.6;margin:0}
.bot-snapshot .go{position:absolute;right:18px;bottom:14px;color:var(--acc,var(--ham-cyan));font-family:var(--ham-font-num)}
.bot-snapshot svg{width:44px;height:44px}

/* ---------- Danh sách bot chi tiết ---------- */
.bot-detail-list{display:grid;gap:14px}

.bot-number{font-family:var(--ham-font-num);font-size:30px;color:transparent;-webkit-text-stroke:1px var(--acc,var(--ham-cyan))}
.bot-symbol{font-family:var(--ham-font-num);font-size:11px;letter-spacing:.14em;color:var(--acc,var(--ham-cyan));text-transform:uppercase}
.bot-detail-copy h3{margin:4px 0 6px}
.bot-detail-copy p{color:var(--ham-text-2);font-size:14px;line-height:1.65;margin:0}
.bot-specs{display:flex;flex-direction:column;gap:6px;font-family:var(--ham-font-num);font-size:11px;color:var(--ham-text-3);text-align:right}

/* ---------- Spec & cầu chì an toàn ---------- */
.spec-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.spec{font-family:var(--ham-font-num);font-size:11px;letter-spacing:.08em;color:var(--ham-text-2);border:var(--ham-hairline);border-radius:var(--ham-r-pill);padding:8px 14px;background:var(--ham-glass-fill-2)}
.fuses{display:grid;gap:10px;margin:18px 0}
.fuse{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid rgba(255,207,122,.28);border-radius:var(--ham-r-md);background:var(--ham-warn-soft);color:#e8d9b8;font-size:13.5px;line-height:1.6}
.risk-banner,.disclaimer-card,.cal-risk{border:1px solid rgba(255,207,122,.3);background:var(--ham-warn-soft);border-radius:var(--ham-r-md);padding:16px 18px;color:#e4d3ae;font-size:13.5px;line-height:1.65}
.safe{color:var(--ham-cyan)}

/* ---------- Bảng điều khiển minh hoạ ---------- */
.dashboard-frame{border:var(--ham-hairline);border-radius:var(--ham-r-xl);background:linear-gradient(160deg,var(--ham-bg-overlay),#080c17);overflow:hidden;box-shadow:var(--ham-sh-glass)}
.dashboard-topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 20px;border-bottom:var(--ham-hairline);font-family:var(--ham-font-num);font-size:11px;letter-spacing:.1em;color:var(--ham-text-2);text-transform:uppercase}
.status-live{display:inline-flex;align-items:center;gap:8px;color:var(--ham-cyan)}
.status-live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ham-cyan);box-shadow:0 0 12px var(--ham-cyan);animation:hampulse 1.8s infinite}
@keyframes hampulse{50%{opacity:.35}}
.demo-chip{font-family:var(--ham-font-num);font-size:10px;letter-spacing:.12em;color:var(--ham-warn);border:1px solid rgba(255,207,122,.3);background:var(--ham-warn-soft);padding:5px 10px;border-radius:var(--ham-r-pill);text-transform:uppercase}
.dashboard-body{padding:18px 20px;display:grid;gap:16px}
.dashboard-metric,.mini-stats>*{padding:14px 16px;border:var(--ham-hairline-2);border-radius:var(--ham-r-md);background:var(--ham-glass-fill-2)}
.dashboard-metric small,.mini-stats small{display:block;font-family:var(--ham-font-num);font-size:9.5px;letter-spacing:.1em;color:var(--ham-text-3);text-transform:uppercase}
.dashboard-metric b,.mini-stats b{display:block;font-family:var(--ham-font-num);font-size:20px;margin-top:6px}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dashboard-chart{display:block;width:100%}
.dashboard-chart .chart-grid,.chart-grid{stroke:#1a2338}
.dashboard-chart .line,.line{fill:none;stroke:url(#hamln) var(--ham-cyan);stroke:var(--ham-cyan);stroke-width:2.6}
.dashboard-chart .area,.area{fill:rgba(87,242,200,.16)}
.dashboard-footer{padding:12px 20px;border-top:var(--ham-hairline);font-family:var(--ham-font-num);font-size:10px;color:var(--ham-text-3);letter-spacing:.08em}
.live-dash-wrap{padding:0 0 24px}

/* ---------- Khu xác minh (không còn ảnh) ---------- */
.verify-section{padding:var(--ham-section-y) 0}
.verify-card{display:grid;grid-template-columns:1fr 1fr;gap:0;border:var(--ham-hairline);border-radius:var(--ham-r-xl);overflow:hidden;background:linear-gradient(160deg,var(--ham-bg-overlay),#080c17)}
.verify-main{padding:34px}
.verify-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;border:1px solid var(--ham-cyan);color:var(--ham-cyan);font-family:var(--ham-font-num);font-weight:700}
.verify-brand{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.verify-name{font-family:var(--ham-font-display);font-size:20px}
.verify-sub,.verify-text{color:var(--ham-text-2);font-size:14px;line-height:1.7}
.verify-badges{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.verify-badges>*{font-family:var(--ham-font-num);font-size:10.5px;letter-spacing:.1em;color:var(--ham-text-2);border:var(--ham-hairline);border-radius:var(--ham-r-pill);padding:7px 12px;text-transform:uppercase}
.verify-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.vb{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:var(--ham-hairline-2);font-size:13.5px}
.vb-k{font-family:var(--ham-font-num);font-size:11px;letter-spacing:.1em;color:var(--ham-text-3);text-transform:uppercase}
.vb-v{font-family:var(--ham-font-num);color:var(--ham-text)}

/* ---------- Thẻ "ảnh" → thẻ sơ đồ (không dùng ảnh chụp) ---------- */
.feature-image-card,.infrastructure-photo,.photo-split-card{position:relative;border:var(--ham-hairline);border-radius:var(--ham-r-xl);overflow:hidden;background:
  radial-gradient(circle at 20% 20%,rgba(87,242,200,.1),transparent 45%),
  radial-gradient(circle at 80% 80%,rgba(143,124,255,.12),transparent 45%),
  linear-gradient(rgba(120,150,200,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(120,150,200,.06) 1px,transparent 1px),
  var(--ham-bg-raised);
  background-size:auto,auto,34px 34px,34px 34px,auto;min-height:230px}
.feature-image-card img,.infrastructure-photo img,.photo-split-card img{display:none}
.photo-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,6,12,.8),transparent 60%)}
.photo-copy{position:absolute;left:24px;bottom:20px;right:24px}
.image-caption{position:absolute;left:20px;bottom:14px;font-family:var(--ham-font-num);font-size:10px;letter-spacing:.12em;color:var(--ham-text-3);text-transform:uppercase}

/* ---------- FAQ ---------- */
.faq-layout{display:grid;grid-template-columns:250px 1fr;gap:46px;align-items:start}
.faq-nav{position:sticky;top:96px;display:grid;gap:4px}
.faq-nav-title{font-family:var(--ham-font-num);font-size:10px;letter-spacing:.16em;color:var(--ham-text-3);text-transform:uppercase;margin-bottom:8px}
.faq-nav a{font-size:13.5px;color:var(--ham-text-2);padding:7px 10px;border-left:1px solid var(--ham-glass-stroke)}
.faq-nav a:hover{color:var(--ham-cyan);border-left-color:var(--ham-cyan)}
.faq-list{display:block}
.faq-item,.faq-list details{border-bottom:var(--ham-hairline);padding:20px 0}
.faq-item summary,.faq-list summary{font-family:var(--ham-font-display);font-size:17.5px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq-item summary::after,.faq-list summary::after{content:'+';font-family:var(--ham-font-num);color:var(--ham-cyan)}
.faq-item[open] summary::after,.faq-list details[open] summary::after{content:'−'}
.faq-a,.faq-item p{color:var(--ham-text-2);line-height:1.75;font-size:14.5px}
.faq-intro{max-width:640px;margin-bottom:34px;color:var(--ham-text-2)}
.faq-cta{margin-top:36px;padding:24px;border:var(--ham-hairline);border-radius:var(--ham-r-lg);background:var(--ham-grad-surface);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}

/* ---------- Liên hệ ---------- */
.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.contact-info h2{font-size:var(--ham-fs-h2)}
.contact-lines{display:grid;gap:10px;margin:22px 0;padding:0;list-style:none}
.contact-lines li,.contact-lines>*{font-family:var(--ham-font-num);font-size:13px;color:var(--ham-text-2);display:flex;gap:10px;align-items:center}
.contact-note{color:var(--ham-text-3);font-size:13px;line-height:1.7}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:28px;border:var(--ham-hairline);border-radius:var(--ham-r-xl);background:var(--ham-grad-surface)}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--ham-text-2)}
.contact-form input,.contact-form select,.contact-form textarea{border:var(--ham-hairline);border-radius:var(--ham-r-sm);background:#080c14;color:var(--ham-text);padding:13px;font-family:var(--ham-font-body);font-size:14px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;box-shadow:var(--ham-focus)}
.contact-form .full{grid-column:1/-1}
.check-label{flex-direction:row!important;align-items:center;gap:10px!important}
.check-label input{width:auto}
.contact-form .button{grid-column:1/-1;border:0}
.form-status{grid-column:1/-1;font-family:var(--ham-font-num);font-size:12px;color:var(--ham-text-3)}

/* ---------- Copy trade ---------- */
.copy-principles,.copy-facts,.values-grid,.safety-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.copy-principles>*,.copy-facts>*,.values-grid>*,.safety-card{padding:24px;border:var(--ham-hairline);border-radius:var(--ham-r-lg);background:var(--ham-grad-surface)}
.safety-section{padding:var(--ham-section-y) 0}
.safety-copy{color:var(--ham-text-2);line-height:1.7}
.safety-stack{display:grid;gap:12px}
.pricing-section{padding:var(--ham-section-y) 0}
.pricing-card{padding:28px;border:var(--ham-hairline);border-radius:var(--ham-r-xl);background:var(--ham-grad-surface)}
.pricing-copy{color:var(--ham-text-2)}

/* ---------- Timeline & kiến trúc ---------- */




.architecture-map{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.arch-node{padding:18px;border:1px dashed var(--ham-glass-stroke);border-radius:var(--ham-r-md);background:var(--ham-glass-fill-2);font-family:var(--ham-font-num);font-size:12.5px;color:var(--ham-text-2)}

/* ---------- Lịch kinh tế ---------- */
.cal-embed{border:var(--ham-hairline);border-radius:var(--ham-r-xl);overflow:hidden;background:var(--ham-bg-raised)}
.tvc,.tvh{background:var(--ham-bg-raised)}
.cal-info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.cal-info>*{padding:20px;border:var(--ham-hairline);border-radius:var(--ham-r-lg);background:var(--ham-grad-surface)}
.tag,.tag-high,.tag-med{font-family:var(--ham-font-num);font-size:10px;letter-spacing:.1em;padding:4px 9px;border-radius:var(--ham-r-pill);text-transform:uppercase}
.tag-high{color:var(--ham-down);border:1px solid rgba(255,143,163,.35);background:var(--ham-down-soft)}
.tag-med{color:var(--ham-warn);border:1px solid rgba(255,207,122,.35);background:var(--ham-warn-soft)}

/* ---------- Prose (trang pháp lý / tin) ---------- */
/* .prose chay het rail chung 1280 de thang hang voi header/footer */
.prose{max-width:none}
.prose h2{font-size:26px;margin:44px 0 14px}
.prose h3{font-size:19px;margin:30px 0 10px}
.prose p,.prose li{color:var(--ham-text-2);line-height:1.8;font-size:15px}
.prose strong{color:var(--ham-text)}
.prose a{color:var(--ham-cyan)}

/* ---------- CTA cuối ---------- */
.final-cta{padding:var(--ham-section-y) 0}
.final-cta-inner{position:relative;text-align:center;border:var(--ham-hairline);border-radius:var(--ham-r-2xl);padding:64px 24px;overflow:hidden;background:
  radial-gradient(circle at 50% 120%,rgba(143,124,255,.18),transparent 55%),
  radial-gradient(circle at 50% -20%,rgba(87,242,200,.14),transparent 50%)}
.final-cta-inner h2{font-size:var(--ham-fs-h2);max-width:700px;margin:14px auto 16px}
.final-cta-inner p{color:var(--ham-text-2);max-width:540px;margin:0 auto 28px;line-height:1.7}

/* ---------- Linh tinh ---------- */
.reveal{opacity:1;transform:none}
.imp{color:var(--ham-text);font-weight:600}
.privacy-panel{padding:22px;border:var(--ham-hairline);border-radius:var(--ham-r-lg);background:var(--ham-grad-surface)}
.live-teaser-section{padding:var(--ham-section-y) 0}
.hero-motif text,.hero-art text{font-family:var(--ham-font-num)}

/* ---------- Topbar mono trên header ---------- */
.ham-header::before{content:'HAM AI · HỆ SINH THÁI GIAO DỊCH ĐA THỊ TRƯỜNG · DỮ LIỆU THỜI GIAN THỰC';display:block;font-family:var(--ham-font-num);font-size:9.5px;letter-spacing:.18em;color:var(--ham-text-3);text-align:center;padding:8px 16px;border-bottom:var(--ham-hairline-2);text-transform:uppercase}

/* ---------- Responsive ---------- */
@media(max-width:1020px){
  .bot-snapshot-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.inner-hero-grid,.verify-card,.contact-layout{grid-template-columns:1fr}
  .copy-principles,.copy-facts,.values-grid,.safety-grid,.cal-info,.architecture-map,.mini-stats{grid-template-columns:1fr 1fr}
  .faq-layout{grid-template-columns:1fr}
  .faq-nav{position:static;display:flex;flex-wrap:wrap;gap:8px}
  .split-heading{grid-template-columns:1fr}
}
@media(max-width:640px){
  .bot-snapshot-grid,.copy-principles,.copy-facts,.values-grid,.safety-grid,.cal-info,.architecture-map,.contact-form,.mini-stats{grid-template-columns:1fr}
  .bot-detail{grid-template-columns:1fr;gap:10px}
  .bot-specs{text-align:left;flex-direction:row;flex-wrap:wrap;gap:10px}
  .hero-trust{gap:20px;flex-wrap:wrap}
}

/* strip-flex-fix */
.logo-strip .logo-strip-inner{display:flex!important;grid-template-columns:none!important}
.logo-strip [data-ham-symbol]{display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo-strip [data-ham-symbol] b{font-weight:700;color:var(--ham-text)}
.logo-strip [data-ham-field="name"]{display:none}

/* vnext-fixups */
.hammock h1,.hammock h2,.hammock h3{text-transform:none}
.bot-snapshot svg,.hero-art svg{display:block}
.bot-snapshot br{display:none}

/* botcode-tidy */
.bot-snapshot .bot-code{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9.5px;letter-spacing:.1em;background:none;padding:0;margin:14px 0 0}
.bot-snapshot h3{margin:8px 0 6px}

/* pricing-v2 */
.pricing-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.pricing-copy p{color:var(--ham-text-2);line-height:1.7}
.pricing-card{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;padding:30px;border:var(--ham-hairline);border-radius:var(--ham-r-xl);background:linear-gradient(160deg,var(--ham-bg-overlay),#080c17);box-shadow:var(--ham-sh-glass)}
.pricing-card>div small{display:block;font-family:var(--ham-font-num);font-size:9.5px;letter-spacing:.14em;color:var(--ham-text-3);text-transform:uppercase;margin-bottom:8px}
.pricing-card>div strong{font-family:var(--ham-font-display);font-size:44px;font-weight:700;line-height:1;background:var(--ham-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.pricing-card>div strong span{font-size:18px;-webkit-text-fill-color:var(--ham-purple)}
.pricing-card>div p{color:var(--ham-text-3);font-size:12px;margin:8px 0 0}
.pricing-card>i{width:1px;height:76px;background:var(--ham-glass-stroke)}
.pricing-card .button{grid-column:1/-1;justify-self:stretch;text-align:center}
.disclaimer-card{display:flex;gap:14px;align-items:flex-start;margin-top:16px}
.disclaimer-card>span{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--ham-warn);color:var(--ham-warn);display:grid;place-items:center;font-family:var(--ham-font-num);font-size:13px}
.disclaimer-card h3{font-size:14.5px;margin:2px 0 6px;color:var(--ham-warn)}
.disclaimer-card p{margin:0;font-size:12.5px}
@media(max-width:900px){.pricing-section{grid-template-columns:1fr;gap:30px}.pricing-card{grid-template-columns:1fr;text-align:center}.pricing-card>i{width:76px;height:1px;justify-self:center}}

/* timeline v2 — stepper "khí cụ" */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.timeline>*{position:relative;padding:86px 20px 26px;text-align:center;border:var(--ham-hairline);border-radius:var(--ham-r-lg);background:var(--ham-grad-surface);transition:transform var(--ham-t-base) var(--ham-ease),border-color var(--ham-t-base)}
.timeline>*:hover{transform:translateY(-4px);border-color:rgba(87,242,200,.4)}
.timeline>* span:first-child{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:52px;height:52px;display:grid;place-items:center;border-radius:50%;font-family:var(--ham-font-num);font-size:13px;color:var(--ham-cyan);background:linear-gradient(var(--ham-bg-raised),var(--ham-bg-raised)) padding-box,var(--ham-grad-ai) border-box;border:1px solid transparent;box-shadow:0 0 22px rgba(87,242,200,.18);z-index:2}
.timeline>* span:first-child::before{content:'';position:absolute;inset:-7px;border:1px dashed rgba(87,242,200,.28);border-radius:50%}
.timeline>*::after{content:'';position:absolute;top:47px;left:calc(50% + 44px);width:calc(100% - 70px);height:1px;background:var(--ham-grad-ai);opacity:.4;z-index:1}
.timeline>*:last-child::after{display:none}
.timeline small{display:block;font-family:var(--ham-font-num);font-size:10px;letter-spacing:.16em;color:var(--ham-purple);text-transform:uppercase;margin-bottom:8px}
.timeline h3{margin:0 0 8px;font-size:19px}
.timeline p{color:var(--ham-text-2);font-size:13.5px;line-height:1.65;margin:0 auto;max-width:300px}
@media(max-width:860px){.timeline{grid-template-columns:1fr}.timeline>*::after{display:none}}
/* copy hero — thu gọn & cân */
.copy-page-hero{padding:62px 0 54px}
.copy-page-hero .hero-copy{margin:0!important;max-width:640px}
.copy-page-hero h1{font-size:clamp(30px,3.4vw,46px);margin:14px 0 12px}
.copy-page-hero p{font-size:16px;max-width:560px;margin-bottom:22px}

.copy-page-hero h1 em{display:block}

/* copy-hero-tight */
.copy-page-hero{min-height:0!important}
.copy-page-hero .hero-inner{padding:0!important;min-height:0!important}
.copy-page-hero + .section, .copy-page-hero ~ section:first-of-type{padding-top:70px}

/* botdetail v2 */
.bot-detail{display:grid;grid-template-columns:70px 70px 1fr 210px;gap:22px;align-items:center;padding:26px 28px;border:var(--ham-hairline);border-radius:var(--ham-r-lg);background:var(--ham-grad-surface);transition:border-color var(--ham-t-base)}
.bot-detail:hover{border-color:var(--acc,var(--ham-cyan))}
.bot-detail .bot-symbol{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;border:1px solid var(--acc,var(--ham-cyan));color:var(--acc,var(--ham-cyan));font-family:var(--ham-font-num);font-size:13px;background:var(--ham-glass-fill-2)}
.bot-detail-copy small{display:block;font-family:var(--ham-font-num);font-size:10px;letter-spacing:.14em;color:var(--acc,var(--ham-cyan));text-transform:uppercase;margin-bottom:6px}
.bot-detail-copy h2{font-size:22px;margin:0 0 8px;line-height:1.25}
.bot-specs{display:grid;gap:10px;text-align:left;border-left:var(--ham-hairline-2);padding-left:22px}
.bot-specs span{display:grid;gap:2px}
.bot-specs small{font-family:var(--ham-font-num);font-size:9px;letter-spacing:.12em;color:var(--ham-text-3);text-transform:uppercase}
.bot-specs b{font-family:var(--ham-font-num);font-size:12.5px;color:var(--ham-text);font-weight:700}
@media(max-width:900px){.bot-detail{grid-template-columns:56px 1fr}.bot-detail .bot-number{grid-row:1}.bot-detail .bot-symbol{grid-row:2}.bot-detail-copy{grid-column:1/-1}.bot-specs{grid-column:1/-1;border-left:0;padding-left:0;grid-template-columns:repeat(3,1fr)}}
/* hero grid: chips xuống dưới chữ, không thả nổi cột phải */
.inner-hero-grid{display:block}
.inner-hero-grid>div:first-child{max-width:720px}
.inner-hero-grid .inner-hero-stat{margin-top:26px}
/* diagram card thay ảnh: radar rings */
.feature-image-card::before,.infrastructure-photo::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 50% 46%,rgba(87,242,200,.16),transparent 10%),
  repeating-radial-gradient(circle at 50% 46%,transparent 0 44px,rgba(120,160,220,.08) 44px 45px),
  linear-gradient(90deg,transparent calc(50% - .5px),rgba(87,242,200,.1) 50%,transparent calc(50% + .5px)),
  linear-gradient(0deg,transparent calc(46% - .5px),rgba(87,242,200,.1) 46%,transparent calc(46% + .5px))}
.feature-image-card::after,.infrastructure-photo::after{content:'';position:absolute;left:50%;top:46%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:var(--ham-cyan);box-shadow:0 0 26px var(--ham-cyan)}
.feature-image-card{max-height:430px}
.image-caption{display:flex;gap:10px;align-items:center;z-index:2}

/* font-unify: mọi control kế thừa font hệ thống mới */
button,input,select,textarea{font-family:inherit}

/* ==== rhythm v1: khoang cach khoi dong nhat ==== */
:root{--rhy:clamp(56px,7vw,84px);--rhy-sm:clamp(40px,5vw,56px)}
.section,.live-teaser-section,.verify-section,.safety-section,.final-cta{padding:var(--rhy) 0}
.compact-section,.page-content{padding:var(--rhy-sm) 0}
.inner-hero,.copy-page-hero,.bot-hero{padding:var(--rhy) 0 var(--rhy-sm)}
.inner-hero.compact{padding:var(--rhy-sm) 0}
.section-heading,.split-heading{margin-bottom:38px}
.hammock+.hammock .compact-section:first-child,.hammock+.hammock .final-cta:first-child{padding-top:0}
/* ==== Lich Kinh Te ==== */
.cal-legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.cal-legend .lg{display:inline-flex;align-items:center;gap:8px;font-family:var(--ham-font-num);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ham-text-2);border:var(--ham-hairline);border-radius:var(--ham-r-pill);padding:7px 13px;background:var(--ham-glass-fill-2)}
.cal-legend .lg i{width:8px;height:8px;border-radius:50%}
.cal-legend .lg.hi i{background:var(--ham-down);box-shadow:0 0 8px var(--ham-down)}
.cal-legend .lg.md i{background:var(--ham-warn);box-shadow:0 0 8px var(--ham-warn)}
.cal-legend .lg.lo i{background:var(--ham-flat)}
.cal-legend .upd{margin-left:auto;font-family:var(--ham-font-num);font-size:10px;color:var(--ham-text-3);letter-spacing:.08em;text-transform:uppercase}
.calwrap{border:var(--ham-hairline);border-radius:var(--ham-r-xl);overflow:hidden;background:linear-gradient(160deg,var(--ham-bg-overlay),#080c17);box-shadow:var(--ham-sh-glass)}
.calwrap .ham-table-wrap{max-height:640px;overflow:auto;scrollbar-width:thin}
.calwrap table{width:100%}
.calwrap thead th{position:sticky;top:0;background:var(--ham-bg-raised);z-index:2;font-family:var(--ham-font-num);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ham-text-3)}
.calwrap td,.calwrap th{padding:12px 16px;border-bottom:var(--ham-hairline-2);font-size:13.5px}
.calwrap td.is-num,.calwrap .ham-num{font-family:var(--ham-font-num);font-size:12.5px}
.calwrap tr:hover td{background:var(--ham-bg-hover)}

/* contact polish */
.contact-lines{display:grid;gap:0;margin:26px 0}
.contact-lines>a,.contact-lines>div{display:flex;align-items:center;gap:18px;padding:15px 4px;border-bottom:var(--ham-hairline-2)}
.contact-lines small{flex:none;width:76px;font-family:var(--ham-font-num);font-size:9.5px;letter-spacing:.16em;color:var(--ham-text-3);text-transform:uppercase}
.contact-lines b{font-family:var(--ham-font-num);font-size:14px;color:var(--ham-text);font-weight:700}
.contact-lines a:hover b{color:var(--ham-cyan)}
.contact-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px}
.contact-note>i,.contact-note>span:first-child{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--ham-glass-stroke);display:grid;place-items:center;font-family:var(--ham-font-num);font-size:11px;font-style:normal;color:var(--ham-cyan)}

/* hamlive dark polish — bảng HAM LIVE khớp style site */
.hamlive .hl-title{color:var(--ham-text)!important;font-family:var(--ham-font-display);font-weight:600}
.hamlive .hl-t,.hamlive .hl-panel-h{color:var(--ham-text)!important}
.hamlive .hl-mid{color:var(--ham-text)!important;font-family:var(--ham-font-num)}
.hamlive .hl-bot-k{color:var(--ham-text-2)!important;font-family:var(--ham-font-num);font-size:10px;letter-spacing:.12em}
.hamlive .hl-bot-v{font-family:var(--ham-font-num)}
.hamlive .hl-label{font-family:var(--ham-font-num);letter-spacing:.1em;text-transform:uppercase}
.hamlive .hl-big{font-family:var(--ham-font-display)}
.hamlive .hl-panel,.hamlive .hl-card{box-shadow:var(--ham-sh-glass)}
.hamlive .hl-postable th{font-family:var(--ham-font-num);font-size:10px;letter-spacing:.12em;color:var(--ham-text-3)}
.hamlive .hl-empty{color:var(--ham-text-3)}

/* news-hero style */
.news-hero{padding:26px 0 6px}
.news-hero .hero-motif{right:0;width:min(28vw,340px);max-height:100%;opacity:.85}
.news-hero h1{font-size:var(--ham-fs-h1)}

/* archmap v2 — sơ đồ kiến trúc */
.architecture-map{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;justify-content:center}
.architecture-map .arch-node{flex:1 1 150px;max-width:260px;display:flex;flex-direction:column;gap:6px;padding:20px;border:1px dashed rgba(87,242,200,.3);border-radius:var(--ham-r-md);background:var(--ham-glass-fill-2);font-family:var(--ham-font-num);transition:border-color var(--ham-t-base)}
.architecture-map .arch-node:hover{border-color:var(--ham-cyan)}
.architecture-map .arch-node>span{font-size:11px;color:var(--ham-purple);letter-spacing:.14em}
.architecture-map .arch-node>b{font-family:var(--ham-font-display);font-size:16px;color:var(--ham-text);font-weight:600}
.architecture-map .arch-node>small{font-size:9.5px;letter-spacing:.12em;color:var(--ham-text-3);text-transform:uppercase}
.architecture-map>i{align-self:center;font-style:normal;color:var(--ham-cyan);font-family:var(--ham-font-num);font-size:16px;opacity:.7}
@media(max-width:760px){.architecture-map{flex-direction:column;align-items:stretch}.architecture-map .arch-node{max-width:none}.architecture-map>i{transform:rotate(90deg)}}


/* ============ faq v2 — bookmark rail + grouped accordion ============ */
.faq-layout{display:grid;grid-template-columns:262px 1fr;gap:54px;align-items:start}
.faq-nav{position:sticky;top:104px;display:block}
.faq-nav-title{font-family:var(--ham-font-num);font-size:10px;letter-spacing:.18em;color:var(--ham-text-3);text-transform:uppercase;margin:0 0 14px;padding-left:16px}
.faq-nav a{position:relative;display:flex;align-items:center;gap:12px;font-family:var(--ham-font-display);font-size:14px;font-weight:500;line-height:1.35;color:var(--ham-text-2);padding:12px 14px;border-left:2px solid var(--ham-glass-stroke);border-radius:0 10px 10px 0;transition:color .22s,background .22s,border-color .22s;text-decoration:none}
.faq-nav a span{font-family:var(--ham-font-num);font-size:10.5px;letter-spacing:.08em;color:var(--ham-text-3);transition:color .22s}
.faq-nav a:hover{color:var(--ham-text);background:rgba(255,255,255,.035)}
.faq-nav a.on{color:var(--ham-text);border-left-color:var(--ham-cyan);background:linear-gradient(90deg,rgba(87,242,200,.11),transparent)}
.faq-nav a.on span{color:var(--ham-cyan)}
.faq-mini{margin-top:26px;padding:18px;border:var(--ham-hairline);border-radius:var(--ham-r-lg);background:linear-gradient(160deg,rgba(143,124,255,.12),rgba(87,242,200,.04))}
.faq-mini p{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--ham-text-2)}
.faq-mini .button{width:100%;justify-content:center;font-size:12.5px;padding:10px 14px}
.faq-group{margin-bottom:52px;scroll-margin-top:112px}
.faq-group:last-child{margin-bottom:0}
.faq-group-h{display:flex;align-items:center;gap:14px;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid rgba(87,242,200,.20)}
.faq-group-h span{font-family:var(--ham-font-num);font-size:11px;letter-spacing:.14em;color:var(--ham-cyan);padding:5px 9px;border:1px solid rgba(87,242,200,.32);border-radius:var(--ham-r-pill);background:rgba(87,242,200,.07);flex:0 0 auto}
.faq-group-h h2{margin:0;font-size:clamp(19px,2.1vw,23px);letter-spacing:-.01em;line-height:1.25}
.faq-list details{border-bottom:var(--ham-hairline);padding:0;scroll-margin-top:112px;transition:background .22s}
.faq-list details[open]{background:linear-gradient(160deg,rgba(255,255,255,.03),transparent)}
.faq-list summary{position:relative;display:flex;align-items:flex-start;justify-content:flex-start;gap:14px;padding:20px 48px 20px 16px;font-family:var(--ham-font-display);font-size:16.5px;font-weight:600;line-height:1.45;color:var(--ham-text);cursor:pointer;list-style:none;transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::marker{content:''}
.faq-list summary::after{content:'';position:absolute;right:18px;top:25px;width:10px;height:10px;border-right:2px solid var(--ham-cyan);border-bottom:2px solid var(--ham-cyan);transform:rotate(45deg);transition:transform .25s}
.faq-list details[open] summary::after{content:'';transform:rotate(-135deg);top:29px}
.faq-list summary:hover{color:var(--ham-cyan)}
.qlink{flex:0 0 auto;opacity:0;font-family:var(--ham-font-num);font-size:13px;color:var(--ham-text-3);text-decoration:none;transition:opacity .2s,color .2s}
.faq-list summary:hover .qlink,.faq-list details[open] .qlink{opacity:.75}
.qlink:hover{color:var(--ham-cyan);opacity:1}
.faq-a{padding:0 48px 22px 16px}
.faq-a p{margin:0 0 10px;font-size:14.6px;line-height:1.78;color:var(--ham-text-2)}
.faq-a p:last-child{margin-bottom:0}
@media(max-height:620px) and (orientation:landscape){.faq-nav{top:18px}}
@media(max-width:1020px){
  .faq-layout{grid-template-columns:1fr;gap:26px}
  .faq-nav{position:static;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .faq-nav-title{width:100%;margin:0;padding:0}
  .faq-nav a{border-left:0;border:var(--ham-hairline);border-radius:var(--ham-r-pill);padding:9px 14px;font-size:13px}
  .faq-nav a.on{border-color:rgba(87,242,200,.42);background:rgba(87,242,200,.10)}
  .faq-mini{width:100%;margin-top:6px;display:flex;align-items:center;gap:18px}
  .faq-mini p{margin:0;flex:1 1 auto}
  .faq-mini .button{width:auto;flex:0 0 auto}
  .faq-group{margin-bottom:42px}
}
@media(max-width:600px){
  .faq-list summary{font-size:15.2px;padding:17px 40px 17px 12px;gap:10px}
  .faq-list summary::after{right:14px;top:23px}
  .faq-list details[open] summary::after{top:27px}
  .faq-a{padding:0 12px 18px 12px}
  .faq-a p{font-size:14px}
  .faq-group-h h2{font-size:18px}
  .faq-group-h{gap:10px}
  .faq-mini{flex-direction:column;align-items:stretch;gap:12px}
  .faq-mini .button{width:100%}
  .qlink{display:none}
}


/* ============ footer accordion (mobile) ============ */
.ham-fcol__h{margin:0 0 var(--ham-s-4)}
.ham-fcol__btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:default}
.ham-fcol__ic{display:none}
.ham-fcol__body{display:block}
@media(max-width:760px){
  .ham-footer__grid{grid-template-columns:1fr;gap:0;padding-block:var(--ham-s-8) var(--ham-s-5)}
  .ham-footer__grid > div:first-child{padding-bottom:var(--ham-s-6)}
  .ham-fcol{border-top: var(--ham-hairline)}
  .ham-fcol__h{margin:0}
  .ham-fcol__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .ham-fcol__ic{display:block;flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--ham-text-3);border-bottom:2px solid var(--ham-text-3);transform:rotate(45deg) translateY(-3px);transition:transform .25s ease,border-color .25s ease}
  .ham-fcol.open .ham-fcol__ic{transform:rotate(-135deg) translateY(-1px);border-color:var(--ham-cyan)}
  .ham-fcol.open .ham-fcol__btn{color:var(--ham-text)}
  .ham-fcol__body{overflow:hidden;max-height:0;opacity:0;transition:max-height .32s ease,opacity .24s ease,padding .32s ease}
  .ham-fcol.open .ham-fcol__body{max-height:720px;opacity:1;padding-bottom:16px}
  .ham-footer ul{gap:var(--ham-s-3)}
  .ham-footer ul a{display:inline-block;padding:2px 0}
  .ham-footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--ham-s-3);text-align:left}
}


/* ============ legal documents ============ */
.legal-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.legal-meta span{font-family:var(--ham-font-num);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ham-text-3);padding:6px 11px;border:var(--ham-hairline);border-radius:var(--ham-r-pill);background:rgba(255,255,255,.02)}
.legal-lead{font-size:16.5px!important;line-height:1.75;color:var(--ham-text)!important;padding-left:16px;border-left:2px solid var(--ham-cyan);margin:0 0 30px}
.legal-toc{margin:0 0 38px;padding:20px 22px;border:var(--ham-hairline);border-radius:var(--ham-r-lg);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.legal-toc-t{font-family:var(--ham-font-num);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ham-text-3);margin-bottom:12px}
.legal-toc ol{list-style:none;counter-reset:lg;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 26px}
.legal-toc li{counter-increment:lg;margin:0}
.legal-toc li a{display:flex;gap:10px;align-items:baseline;padding:6px 0;font-size:13.6px;line-height:1.5;color:var(--ham-text-2);text-decoration:none;transition:color .2s}
.legal-toc li a::before{content:counter(lg,decimal-leading-zero);font-family:var(--ham-font-num);font-size:10.5px;color:var(--ham-text-3);flex:0 0 auto}
.legal-toc li a:hover{color:var(--ham-cyan)}
.legal-toc li a:hover::before{color:var(--ham-cyan)}
.prose h2[id^="s"]{scroll-margin-top:110px;margin-top:38px;margin-bottom:12px;font-size:clamp(19px,2.2vw,23px);line-height:1.3;padding-top:22px;border-top:var(--ham-hairline)}
.prose h2[id^="s"]:first-of-type{border-top:0;padding-top:0}
.prose p{font-size:14.9px;line-height:1.82;color:var(--ham-text-2)}
.prose p strong{color:var(--ham-text);font-weight:600}
.prose a{color:var(--ham-cyan);text-decoration:none;border-bottom:1px solid rgba(87,242,200,.32)}
.prose a:hover{border-bottom-color:var(--ham-cyan)}
@media(max-width:760px){
  .legal-toc ol{grid-template-columns:1fr}
  .legal-toc{padding:16px 16px}
  .legal-lead{font-size:15.5px!important;padding-left:13px}
}


/* ============ header responsive fix — landscape + portrait ============ */
@media(max-width:1023px){
  .ham-header__bar{gap:var(--ham-s-3)}
  .ham-header__logo{flex:0 0 auto}
  .ham-header__actions{margin-left:auto}
  .ham-nav{margin-inline:0}
}
@media(max-width:600px){
  .ham-header__bar{height:58px;gap:10px}
  .ham-header__logo img,.ham-header__logo svg{height:28px}
  .ham-header__actions{gap:8px}
}
@media(max-width:430px){
  .ham-header::before{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ham-header__bar{height:56px}
  .ham-header__logo img,.ham-header__logo svg{height:25px}
  .ham-header__actions .ham-btn{padding:8px 12px;font-size:11.5px}
}
@media(max-height:560px) and (orientation:landscape){
  .ham-header::before{display:none}
  .ham-header__bar{height:50px}
  .ham-header__logo img,.ham-header__logo svg{height:25px}
  .ham-header__actions{gap:8px}
  .ham-header__actions .ham-btn{padding:7px 13px;font-size:11.5px}
  .hero .hero-inner .container,.hero-inner{padding-top:32px;padding-bottom:26px}
  .hero-grid{gap:26px}
  .ham-drawer{width:min(360px,72vw);padding-top:18px;padding-bottom:24px}
  .ham-drawer__link,.ham-drawer a{padding-block:8px}
  .faq-nav{top:14px}
  .ham-section,section.ham-section{padding-block:clamp(38px,7vh,64px)}
  .section{padding:clamp(38px,7vh,64px) 0}
}
@media(max-height:460px) and (orientation:landscape){
  .ham-header__bar{height:46px}
  .hero .hero-inner .container,.hero-inner{padding-top:24px;padding-bottom:20px}
  .hero h1,.inner-hero h1{font-size:clamp(24px,5.4vw,34px)}
}
html[lang^="en"] .ham-header::before,
body.ham-en .ham-header::before{content:"HAM AI · MULTI-MARKET TRADING ECOSYSTEM · REAL-TIME DATA"}

/* faq nav — content wraps links in <p>; neutralise it so the flex/pill layout works */
.faq-nav p{display:contents}
.faq-nav > p > a{margin:0}


/* ============================================================
   FIX 26/07 — thẻ sơ đồ: nhãn bên trong & khoảng cách khối dưới
   ============================================================ */
.feature-image-card,.infrastructure-photo,.photo-split-card{display:flex;align-items:flex-end;padding:30px 32px}
.feature-image-card > div:not([class]),
.infrastructure-photo > div:not([class]),
.photo-split-card > div:not([class]){display:flex;flex-direction:column;gap:12px;max-width:660px}
.feature-image-card > div:not([class]) > span,
.infrastructure-photo > div:not([class]) > span,
.photo-split-card > div:not([class]) > span{font-family:var(--ham-font-num);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ham-text-3);line-height:1}
.feature-image-card > div:not([class]) > b,
.infrastructure-photo > div:not([class]) > b,
.photo-split-card > div:not([class]) > b{font-family:var(--ham-font-display);font-size:21px;font-weight:600;line-height:1.35;color:var(--ham-text);letter-spacing:-.01em}
:where(.feature-image-card,.infrastructure-photo,.photo-split-card) + :where(*){margin-top:46px}
@media(max-width:760px){
  .feature-image-card,.infrastructure-photo,.photo-split-card{padding:22px 20px;min-height:190px}
  .feature-image-card > div:not([class]) > b,
  .infrastructure-photo > div:not([class]) > b,
  .photo-split-card > div:not([class]) > b{font-size:17px}
  :where(.feature-image-card,.infrastructure-photo,.photo-split-card) + :where(*){margin-top:32px}
}

:where(.bot-detail-list,.faq-list,.cal-embed,.news-grid,.bot-grid) + :where(.risk-banner,.disclaimer-card,.cal-risk){margin-top:34px}
@media(max-width:760px){:where(.bot-detail-list,.faq-list,.cal-embed,.news-grid,.bot-grid) + :where(.risk-banner,.disclaimer-card,.cal-risk){margin-top:24px}}


/* ============================================================
   PRIVACY PANEL v2 — "Những gì Ham AI không bao giờ công khai"
   ============================================================ */
.privacy-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(280px,.92fr) 1.08fr;gap:30px 56px;align-items:center;
  padding:46px 48px;border:1px solid rgba(255,207,122,.16);border-radius:var(--ham-r-xl);
  background:
    radial-gradient(circle at 6% -10%,rgba(255,207,122,.10),transparent 52%),
    radial-gradient(circle at 104% 115%,rgba(143,124,255,.11),transparent 55%),
    var(--ham-grad-surface),
    var(--ham-bg-raised)}
.privacy-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(120,150,200,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,200,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(155deg,#000,transparent 66%);mask-image:linear-gradient(155deg,#000,transparent 66%)}
.privacy-panel::after{content:"";position:absolute;right:-38px;bottom:-46px;width:196px;height:196px;pointer-events:none;opacity:.3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ffcf7a' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M50 6 L88 20 V48 C88 72 70 88 50 94 C30 88 12 72 12 48 V20 Z' opacity='.55'/%3E%3Cpath d='M50 16 L79 27 V48 C79 66 66 79 50 84 C34 79 21 66 21 48 V27 Z' opacity='.25'/%3E%3Crect x='37' y='45' width='26' height='22' rx='5' opacity='.7'/%3E%3Cpath d='M43 45 V38 a7 7 0 0 1 14 0 v7' opacity='.7'/%3E%3C/svg%3E") center/contain no-repeat}
.privacy-panel > *{position:relative;z-index:1}
.privacy-panel > div{max-width:430px}
.privacy-panel small{display:inline-flex;align-items:center;gap:10px;font-family:var(--ham-font-num);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#ffcf7a;line-height:1}
.privacy-panel small::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6}
.privacy-panel h2{margin:18px 0 0;font-family:var(--ham-font-display);font-size:clamp(25px,2.4vw,33px);font-weight:600;line-height:1.22;letter-spacing:-.02em;color:var(--ham-text)}
.privacy-panel h2 em{font-style:normal;background:var(--ham-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.privacy-panel ul{list-style:none;margin:0;padding:0;counter-reset:pv}
.privacy-panel ul > li{counter-increment:pv;list-style:none;display:flex;align-items:center;gap:15px;padding:15px 2px;border-bottom:1px dashed rgba(255,255,255,.10);transition:color .2s}
.privacy-panel ul > li:first-child{border-top:1px dashed rgba(255,255,255,.10)}
.privacy-panel ul > li::before{content:counter(pv,decimal-leading-zero);flex:0 0 auto;font-family:var(--ham-font-num);font-size:10.5px;letter-spacing:.08em;color:var(--ham-text-3)}
.privacy-panel ul > li > span{flex:0 0 auto;width:25px;height:25px;display:grid;place-items:center;border-radius:8px;font-family:var(--ham-font-num);font-size:12px;line-height:1;color:#ffcf7a;background:rgba(255,207,122,.10);border:1px solid rgba(255,207,122,.30);transition:background .2s,transform .2s}
.privacy-panel ul > li > b{font-family:var(--ham-font-display);font-size:15px;font-weight:500;line-height:1.45;color:var(--ham-text-2);transition:color .2s}
.privacy-panel ul > li:hover > b{color:var(--ham-text)}
.privacy-panel ul > li:hover > span{background:rgba(255,207,122,.2);transform:scale(1.06)}
@media(max-width:1020px){.privacy-panel{grid-template-columns:1fr;gap:26px;padding:34px 28px}.privacy-panel > div{max-width:none}.privacy-panel::after{width:132px;height:132px;right:-24px;bottom:-30px;opacity:.22}}
@media(max-width:560px){.privacy-panel{padding:26px 18px;border-radius:var(--ham-r-lg)}.privacy-panel h2{font-size:22px;margin-top:14px}.privacy-panel ul > li{gap:11px;padding:13px 0}.privacy-panel ul > li > b{font-size:14px}.privacy-panel ul > li > span{width:22px;height:22px;font-size:11px}}

/* ================================================================
   FIX 26-07-2026  ·  HAM LIVE: chữ trong bảng bị mờ + header bị "trôi"
   1) Plugin HAM LIVE đặt  .hamlive{color:var(--ink)}  với --ink là màu
      mực ĐEN của giao diện sáng (#1a2233). Trên nền tối của site tỉ lệ
      tương phản chỉ 1,27:1 -> gần như không đọc được. Lúc re-skin lại
      dashboard đã đổi --mut / --line / --green nhưng QUÊN --ink.
      Sửa 1 biến là hết mọi chỗ kế thừa (td, tbody, text thường).
   2) Dưới 600px WordPress cho #wpadminbar về position:absolute nên
      thanh admin cuộn mất, nhưng .admin-bar .ham-header vẫn giữ
      top:46px -> hở một dải trong suốt 46px ở đỉnh màn hình, nội dung
      trang chạy xuyên qua đó -> nhìn như header bị trôi.
   3) Nền đặc dự phòng cho trình duyệt không hỗ trợ backdrop-filter,
      thêm tiền tố -webkit- cho Safari/iOS bản cũ.
   ================================================================ */

/* 1 - chữ trong bảng HAM LIVE */
.hamlive{ --ink: #eef2fb !important; }
.hamlive .hl-postable td{ color: var(--ham-text); }

/* 2 - hết dải trong suốt dưới thanh admin trên điện thoại */
@media screen and (max-width: 600px){
  /* dat len body.admin-bar de thang do uu tien voi ham-wordpress.css
     (file do nap SAU ham-components.css) */
  body.admin-bar .ham-header{ top: 0; }
}

/* 3 - dự phòng khi không có backdrop-filter */
.ham-header.is-stuck{ -webkit-backdrop-filter: blur(var(--ham-blur)) saturate(160%); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .ham-header.is-stuck{ background: #06101D; }
}

/* ================================================================
   HE MAU LAI / LO TOAN SITE  -  26/07/2026
   Van de truoc do:
     a) --ham-up TRUNG y het mau thuong hieu bac ha #57f2c8 (link, nut,
        vien) -> "lai" nhin khong khac gi chi tiet trang tri binh thuong.
     b) --ham-down la hong pastel #ff8fa3 -> khong doc ra "lo".
     c) 2 quy tac .hl-mid va .hl-postable td dat color:var(--ham-text)
        DE HON plugin nen an het do/xanh -> 3 o quan trong ra mau TRANG.
     d) Gia tri 0.00 van ra mau xanh -> hieu nham la dang co lai.
     e) BUY/SELL dung chung mau voi lai/lo -> huong lenh tranh mau voi tien.
   Cach sua: token o ham-tokens.css + khoi duoi day.
   Giai thich day du: HamAI_Website_HuongDan.md muc 13.
   ================================================================ */

/* 1 - dung o moi noi trong site */
.ham-flat { color: var(--ham-flat); }
.ham-badge--flat { background: var(--ham-flat-soft); color: var(--ham-flat); border-color: var(--ham-flat-line); }

/* 2 - chu so deu be ngang: so live cap nhat khong bi giat qua lai */
.ham-num, .ham-stat-v, .hamlive .hl-big, .hamlive .hl-mid,
.hamlive .hl-bot-v, .hamlive .hl-postable td {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 3 - noi bien rieng cua plugin HAM LIVE vao token cua theme.
   BAT BUOC !important: style plugin in trong <body>, nam sau <head>. */
.hamlive { --green: var(--ham-up) !important; --red: var(--ham-down) !important; }

/* 4 - TRA LAI MAU cho 3 o da bi to trang.
   Phai co .hl-mid / .hl-postable td trong selector + !important thi moi
   thang duoc 2 quy tac cu o tren. KHONG duoc rut gon.
   Thu tu 3 dong nay QUAN TRONG: mot o vua co .hl-pos vua co .hl-flat,
   cung do uu tien nen dong viet SAU thang -> flat phai nam cuoi. */
.hamlive .hl-pos,  .hamlive .hl-mid.hl-pos,  .hamlive .hl-postable td.hl-pos  { color: var(--ham-up)   !important; }
.hamlive .hl-neg,  .hamlive .hl-mid.hl-neg,  .hamlive .hl-postable td.hl-neg  { color: var(--ham-down) !important; }
.hamlive .hl-flat, .hamlive .hl-mid.hl-flat, .hamlive .hl-postable td.hl-flat { color: var(--ham-flat) !important; }

/* 5 - ky hieu tam giac len/xuong/gach ngang.
   De nguoi mu mau van phan biet duoc, khong chi dua vao mau. */
.hamlive .hl-pos::before, .hamlive .hl-neg::before, .hamlive .hl-flat::before {
  display: inline-block; margin-right: .36em; line-height: 1; opacity: .92;
  font-family: ui-sans-serif, system-ui, "Segoe UI Symbol", sans-serif;
}
.hamlive .hl-pos::before  { content: "\25B2"; font-size: .56em; vertical-align: .18em; }
.hamlive .hl-neg::before  { content: "\25BC"; font-size: .56em; vertical-align: .18em; }
.hamlive .hl-flat::before { content: "\2013"; font-size: .72em; vertical-align: .08em; opacity: .6; }

/* 6 - so lon nhat trong trang co quang nhe theo trang thai */
.hamlive .hl-big.hl-pos  { text-shadow: 0 0 28px rgba(23,201,126,.35); }
.hamlive .hl-big.hl-neg  { text-shadow: 0 0 28px rgba(255,77,106,.32); }
.hamlive .hl-big.hl-flat { text-shadow: none; }

/* 7 - bang lenh: cot so canh phai, o lai/lo in dam */
.hamlive .hl-postable td.hl-pos,
.hamlive .hl-postable td.hl-neg,
.hamlive .hl-postable td.hl-flat { font-weight: 700; }
.hamlive .hl-postable th:nth-child(n+4),
.hamlive .hl-postable td:nth-child(n+4) { text-align: right; }

/* 8 - BUY/SELL thanh the trung tinh co mui ten.
   Huong lenh KHONG duoc dung chung mau voi lai/lo. */
.hamlive .hl-side-buy, .hamlive .hl-side-sell {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--ham-font-num); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ham-text-2) !important;
  background: rgba(255,255,255,.05); border: var(--ham-hairline);
}
.hamlive .hl-side-buy::before  { content: "\2191"; opacity: .75; }
.hamlive .hl-side-sell::before { content: "\2193"; opacity: .75; }

/* 9 - the lon nhat vien + do bong theo trang thai lai/lo */
@supports selector(:has(*)) {
  .hamlive .hl-card.hl-hero:has(.hl-pos)  { box-shadow: var(--ham-sh-glass), inset 0 0 0 1px var(--ham-up-line),   0 20px 44px -30px rgba(23,201,126,.60); }
  .hamlive .hl-card.hl-hero:has(.hl-neg)  { box-shadow: var(--ham-sh-glass), inset 0 0 0 1px var(--ham-down-line), 0 20px 44px -30px rgba(255,77,106,.60); }
  .hamlive .hl-card.hl-hero:has(.hl-flat) { box-shadow: var(--ham-sh-glass), inset 0 0 0 1px var(--ham-flat-line); }
}
/* ================ het khoi lai/lo 26/07/2026 ================ */


/* ================================================================
   CAP NHAT 27/07/2026  -  4 khoi
     A. BANG GIA CHAY (marquee) tren trang chu
     B. KHOI SO LIEU THAT (HAM LIVE EMBED) thay bieu do minh hoa
     C. COT THONG SO 5 BOT chay data live
     D. 5 TRANG BOT: cac the con TRUOC DAY KHONG CO LUAT CSS NAO
   Giai thich day du: 06_WEBSITE/HamAI_Website_HuongDan.md muc 14
   Backup ban truoc khi sua: localStorage khoa
     ham_backup_ham-components.css_2026-07-27   (origin fxham.com)
   ================================================================ */

/* ---------- A. Bang gia chay ----------
   DUNG dat lai ten .logo-strip-inner cho track: phia tren da co luat
     .logo-strip .logo-strip-inner{display:flex !important}
   (khoi strip-flex-fix) - no se de len moi thu minh viet o day.
   Vi vay dung BO TEN MOI .ham-marquee*. Cac luat .logo-strip-inner cu
   van giu nguyen cho nhung cho khac con dung.
   Keyframe dat ten rieng ham-strip-run, KHONG dung lai ham-marquee
   cua .ham-ticker de hai khoi doc lap nhau.
   HTML: .logo-strip.ham-marquee > .ham-marquee-track > 2 x
         .ham-marquee-seq giong het nhau (cai thu 2 aria-hidden).
   Chay het seq 1 la vua dung -50% -> noi lien mach, khong giat.
   ham-market.js son MOI [data-ham-symbol] nen ban sao cung duoc son. */
.ham-marquee{position:relative;overflow:hidden;min-height:70px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ham-marquee-track{display:flex;align-items:center;width:max-content;animation:ham-strip-run 60s linear infinite;will-change:transform}
.ham-marquee:hover .ham-marquee-track{animation-play-state:paused}
.ham-marquee-seq{display:flex;align-items:center;flex:0 0 auto}
.ham-marquee-seq>span{display:inline-flex;align-items:center;gap:10px;min-height:70px;padding:0 26px;border-right:var(--ham-hairline-2);font-family:var(--ham-font-num);font-size:12.5px;white-space:nowrap;color:var(--ham-text-2)}
.ham-marquee-seq>span>b{font-weight:700;color:var(--ham-text);letter-spacing:.04em}
.ham-marquee-seq [data-ham-field=price]{color:var(--ham-text)}
.ham-marquee-seq [data-ham-field=delta]{font-weight:700}
.ham-marquee-seq [data-ham-field=delta].ham-up{color:var(--ham-up)}
.ham-marquee-seq [data-ham-field=delta].ham-down{color:var(--ham-down)}
.ham-marquee-seq [data-ham-field=delta].ham-flat{color:var(--ham-flat)}
@keyframes ham-strip-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Ton trong cai dat giam chuyen dong cua he dieu hanh. */
@media (prefers-reduced-motion:reduce){
  .ham-marquee-track{animation:none}
  .ham-marquee{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .ham-marquee::-webkit-scrollbar{display:none}
}
@media (max-width:700px){
  .ham-marquee,.ham-marquee-seq>span{min-height:58px}
  .ham-marquee-seq>span{padding:0 16px;font-size:11.5px;gap:8px}
}

/* ---------- B. Khoi so lieu THAT (HAM LIVE EMBED) ----------
   Do ham-ui.js do vao qua /wp-json/hamlive/v1/pull.
   Khong co du lieu -> JS gan data-hl-state=off, den bao tat mau xam,
   moi o in dau gach ngang. KHONG BAO GIO tu sinh so. */
.live-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--ham-font-num);font-size:10px;letter-spacing:.12em;color:var(--ham-cyan);border:1px solid rgba(87,242,200,.32);background:rgba(87,242,200,.08);padding:5px 10px;border-radius:var(--ham-r-pill);text-transform:uppercase;white-space:nowrap}
.live-chip b{font-weight:700;color:var(--ham-text)}
.hl-embed-chart{display:block;min-height:150px}
.hl-embed-chart .dashboard-chart{width:100%;height:auto}
.hl-embed-empty{margin:0;padding:52px 10px;text-align:center;font-family:var(--ham-font-num);font-size:12px;letter-spacing:.08em;color:var(--ham-text-3);text-transform:uppercase}
/* 4 o thay vi 3 o mac dinh cua .mini-stats */
[data-hl-embed] .mini-stats{grid-template-columns:repeat(4,1fr)}
[data-hl-embed] .mini-stats b{font-size:18px}
@media (max-width:760px){[data-hl-embed] .mini-stats{grid-template-columns:repeat(2,1fr)}}
[data-hl-embed][data-hl-state=off] .status-live{color:var(--ham-text-3)}
[data-hl-embed][data-hl-state=off] .status-live::before{background:var(--ham-text-3);box-shadow:none;animation:none}
[data-hl-embed][data-hl-state=off] .live-chip{color:var(--ham-text-3);border-color:var(--ham-hairline-2);background:transparent}
/* Mau lai/lo trong khoi nay - dat SAU .mini-stats b de thang do uu tien */
[data-hl-embed] .mini-stats b.ham-up{color:var(--ham-up)}
[data-hl-embed] .mini-stats b.ham-down{color:var(--ham-down)}
[data-hl-embed] .mini-stats b.ham-flat{color:var(--ham-flat)}

/* ---------- C. Cot thong so 5 bot chay data live ----------
   .bot-specs span/small/b da co luat o tren, day chi them phan mau
   va trang thai "khong co vi the mo". */
[data-hl-bot] b.ham-up{color:var(--ham-up)}
[data-hl-bot] b.ham-down{color:var(--ham-down)}
[data-hl-bot] b.ham-flat{color:var(--ham-flat)}
[data-hl-bot] b{font-variant-numeric:tabular-nums}
[data-hl-bot][data-hl-open="0"]{opacity:.9}

/* ---------- D. 5 trang bot (gold / fx / crypto / index / oil) ----------
   LOI DA SUA: cac the con duoi day TRUOC DAY khong co MOT luat CSS nao
   trong ca 3 file css cua theme, nen:
     .spec  = <div><small>Thi truong</small><strong>XAUUSD</strong></div>
              -> 2 chu dinh lien nhau "Thi truongXAUUSD"
     .fuse  = <div><span>01</span><div><h4>..</h4><p>..</p></div></div>
              -> so thu tu tut hang, h4 an theo co chu mac dinh
     .bot-cta -> 2 nut dinh sat nhau khong khoang cach
   Cung 1 khoi nay sua het ca 5 trang vi chung dung chung template. */
.spec{display:inline-flex;align-items:center;gap:9px}
.spec small{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ham-text-3);white-space:nowrap}
.spec strong{font-weight:700;color:var(--ham-text);letter-spacing:.03em;white-space:nowrap}
.fuse>span{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;border:1px solid rgba(255,207,122,.45);background:rgba(255,207,122,.14);color:var(--ham-warn);font-family:var(--ham-font-num);font-size:11px;font-weight:700;line-height:1}
.fuse>div{min-width:0}
.fuse h4{margin:0 0 4px;font-family:var(--ham-font-display);font-size:14.5px;font-weight:700;line-height:1.35;color:#ffe3b3;letter-spacing:.01em}
.fuse p{margin:0;font-size:13px;line-height:1.62;color:#e8d9b8}
.bot-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
@media (max-width:520px){
  .spec{gap:7px}
  .bot-cta .button{flex:1 1 100%;justify-content:center;text-align:center}
}
/* ================ het khoi 27/07/2026 ================ */

/* ================================================================
   CAP NHAT 28/07/2026  -  BANG GIA CHAY LEN DINH TRANG
     Yeu cau cua sep: "dua len tren top page di, thay cai nay".
     -> Bo dai chu tinh .ham-header::before
        ("HAM AI - HE SINH THAI GIAO DICH DA THI TRUONG - ...")
     -> Thay bang BANG GIA CHAY that, hien tren MOI trang.
   Markup nam trong header.php (ngay sau the <header>), viet 1 lan
   la ca site co. Script gia doi tu wp_register_script sang
   wp_enqueue_script trong inc/enqueue.php vi bay gio trang nao
   cung can no.
   Giai thich day du: 06_WEBSITE/HamAI_Website_HuongDan.md muc 15
   Backup ban truoc khi sua: localStorage khoa
     ham_backup_ham-components.css_2026-07-28   (origin fxham.com)
   ================================================================ */
/* 1 - tat dai chu cu. KHONG xoa luat goc phia tren (de con tra
   duoc lich su), chi vo hieu hoa bang content:none. */
.ham-header::before,
html[lang] .ham-header::before,
body.ham-en .ham-header::before{content:none!important;padding:0!important;border-bottom:0!important}
/* 2 - bang gia chay tren dinh.
   Dung lai .ham-marquee-track / .ham-marquee-seq cua khoi A ngay
   27/07 de khoi viet lai animation. O day chi ghi de kich thuoc
   cho gon, vi day la thanh dinh chu khong phai khoi noi dung. */
.ham-tickerbar{position:relative;overflow:hidden;height:34px;border-bottom:var(--ham-hairline-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ham-tickerbar .ham-marquee-track{animation-duration:72s}
.ham-tickerbar:hover .ham-marquee-track{animation-play-state:paused}
.ham-tickerbar .ham-marquee-seq>span{min-height:34px;padding:0 18px;font-size:10.5px;gap:7px}
.ham-tickerbar .ham-marquee-seq>span>b{font-size:10.5px;letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){
  .ham-tickerbar .ham-marquee-track{animation:none}
  .ham-tickerbar{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .ham-tickerbar::-webkit-scrollbar{display:none}
}
@media (max-width:700px){
  .ham-tickerbar{height:30px}
  .ham-tickerbar .ham-marquee-seq>span{min-height:30px;padding:0 13px;font-size:10px;gap:6px}
}
/* ================ het khoi 28/07/2026 ================ */

/* ================ KHOI 28/07/2026 - PHAN B ================
   SAP XEP LAI KHOI HIEU SUAT TREN TRANG CHU  (.live-teaser-section)
   Yeu cau chu: "chart chiem khong gian to qua, sap xep khoa hoc va
   dep hon". Truoc: chart rong het khung (1078x421) nam TREN, 4 o so
   nam DUOI -> section cao 1086px, cao hon MOI section khac cua trang
   chu. Sau: chart nam BEN TRAI, 4 o so xep doc thanh mot bang chi so
   BEN PHAI -> section con ~875px, chart con ~306px cao.
   Chart tu co lai vi svg dat width:100%/height:auto -> thu hep cot la
   no tu thu nho theo TY LE, KHONG bi keo gian, duong von van dung.
   ---
   MOI luat deu bat dau bang .live-teaser-section. Trang
   /hieu-suat-truc-tiep/ va /5-ai-bots/ dung chung class
   .mini-stats / .dashboard-body nhung KHONG nam trong
   .live-teaser-section nen KHONG bi anh huong. DUNG BO tien to nay.
   Duoi 1000px tu dong trai ve bo cuc cu (chart tren, 4 o duoi 2 cot).
   ================================================================ */
@media (min-width:1000px){
.live-teaser-section .dashboard-body{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:22px;align-items:stretch}
.live-teaser-section .hl-embed-chart{min-width:0;align-self:center}
.live-teaser-section [data-hl-embed] .mini-stats{grid-template-columns:1fr;grid-auto-rows:1fr;gap:0;align-content:stretch;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.022);border-radius:16px;padding:4px 18px}
.live-teaser-section .mini-stats>div{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px 0;background:transparent;border:0;border-radius:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.live-teaser-section .mini-stats>div:last-child{box-shadow:none}
.live-teaser-section [data-hl-embed] .mini-stats b{font-size:22px;line-height:1.1}
}
/* Man hinh 1000-1140px: thu bang chi so lai cho chart con tho */
@media (min-width:1000px) and (max-width:1140px){
.live-teaser-section .dashboard-body{grid-template-columns:minmax(0,1fr) 232px;gap:18px}
.live-teaser-section [data-hl-embed] .mini-stats{padding:4px 14px}
.live-teaser-section [data-hl-embed] .mini-stats b{font-size:20px}
}
/* ================ het khoi 28/07/2026 - phan B ================ */

/* Home FAQ: chia 2 cot tu 1000px tro len. Be rong da theo rail chung o .faq-list */
@media (min-width:1000px){
  body.home .faq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-items:start}
  body.home .faq-list details{border-radius:14px}
  body.home .faq-list .faq-a p{max-width:46ch}
}
/* ================ het khoi 28/07/2026 - yeu cau G ================ */

/* ================ khoi 28/07/2026 - fix bang "Lenh dang mo" tren mobile ======
   LOI: o cot cuoi (lai/lo) qua hep nen chuoi kieu "-0.32 USD" kem mui ten
   bi ngat thanh 2-3 dong, day chieu cao hang tu ~40px len ~86px.
   Luu y: class .hl-side-buy / .hl-side-sell nam NGAY TREN the <td> chu khong
   phai the con ben trong. No dat display:inline-flex nen trinh duyet phai boc
   the do bang mot o (cell) an danh; o an danh nay can theo baseline cua hang.
   Khi hang bi cao len 86px thi the BUY troi han len dinh -> "Buy bi lech".
   CACH SUA: cam ngat dong trong o (hang chi con 1 dong), giu baseline de chu
   trong the BUY thang hang voi chu cac cot khac, va thu nho font + padding
   tren man hinh nho de ca bang vua trong khung panel.
   (Da thu vertical-align:middle -> lam mat baseline cua hang, the BUY con lech
   hon. Do do o day co y dat lai baseline.) */

.hamlive .hl-postable th,
.hamlive .hl-postable td {
  vertical-align: baseline;
  white-space: nowrap;
}

/* chu trong the huong lenh thang hang voi chu cua cac cot con lai */
.hamlive .hl-side-buy,
.hamlive .hl-side-sell { vertical-align: baseline; }

/* luoi an toan: ten bot / ten cap neu qua dai thi cat bot bang dau ...
   chu khong duoc xuong dong lam vo hang */
.hamlive .hl-postable td:nth-child(1),
.hamlive .hl-postable td:nth-child(2) {
  max-width: 10ch; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .hamlive .hl-postable { font-size: 12px; }
  .hamlive .hl-postable th { font-size: 9px; letter-spacing: .06em; padding: 6px 5px; }
  .hamlive .hl-postable td { padding: 7px 5px; }
  .hamlive .hl-side-buy,
  .hamlive .hl-side-sell {
    padding: 2px 7px; font-size: 10px; letter-spacing: .04em; gap: .28em;
  }
}

@media (max-width: 380px) {
  .hamlive .hl-postable { font-size: 11px; }
  .hamlive .hl-postable th { font-size: 8px; padding: 5px 4px; }
  .hamlive .hl-postable td { padding: 6px 4px; }
  .hamlive .hl-side-buy,
  .hamlive .hl-side-sell { padding: 2px 6px; font-size: 9px; }
}

/* may may rat hep (SE doi cu) thi bop sat lai cho khoi tran */
@media (max-width: 340px) {
  .hamlive .hl-postable th { padding: 5px 2px; }
  .hamlive .hl-postable td { padding: 6px 2px; }
}

/* fix tiep 28/07/2026: duong ke duoi hang bi lech ~1px dung o cot BUY/SELL.
   Nguyen nhan: o do co padding rieng (nho hon cac o khac) de tao dang pill,
   nen khi trinh duyet lam tron kich thuoc o theo chieu cao hang (row height),
   canh duoi cua o nay bi lech tap so voi cac o con lai ~1px do sai so lam
   tron (phat hien ro khi zoom man hinh). Thay vi de tung o tu ve duong vien
   duoi rieng (de bi lech), chuyen sang ve MOT duong ke duy nhat cho ca hang
   bang ::after tren <tr> - dam bao luon thang, khong con phu thuoc vao viec
   lam tron kich thuoc tung o. */
.hamlive .hl-postable tbody tr { position: relative; }
.hamlive .hl-postable tbody tr td { border-bottom: none; }
.hamlive .hl-postable tbody tr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--line, rgba(255,255,255,.09));
  pointer-events: none;
}
/* ================ het khoi 28/07/2026 - bang "Lenh dang mo" ================ */

/* khoi 28/07/2026 - fix VI/EN va Copy Trade bi troi khoi man hinh trong menu
   mobile (drawer). Truoc day ca drawer la MOT khoi scroll duy nhat, nen tren
   man hinh thap (~600-650px, rat pho bien khi trinh duyet con thanh dia chi),
   nut Copy Trade va nut chuyen VI/EN bi day xuong duoi vung nhin thay duoc,
   nguoi dung khong biet phai cuon xuong moi thay. Sua: chi cho danh sach menu
   (.ham-drawer__list) tu cuon rieng, con nut Copy Trade va VI/EN GHIM CO DINH
   o day drawer - luon thay duoc, khong can cuon. */
.ham-drawer { overflow-y: hidden; }
.ham-drawer__list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.ham-drawer .ham-stack,
.ham-drawer__foot { flex: 0 0 auto; }


/* ================= TECHX — trang /cong-nghe/ ================= */
.techx-sec{padding-block:clamp(38px,5vw,66px)}
.techx-sec+.techx-sec{border-top:1px solid rgba(255,255,255,.06)}
.techx-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--ham-font-num);font-size:11px;letter-spacing:.22em;color:#57f2c8;text-transform:uppercase}
.techx-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.techx-eyebrow.is-red{color:#ff4d6a}
.techx-h2{font-family:var(--ham-font-display);font-size:clamp(26px,3.2vw,40px);line-height:1.14;letter-spacing:-.02em;margin:14px 0 0}
.techx-grad{background:var(--ham-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.techx-lead{max-width:72ch;color:var(--ham-text-2);margin:14px 0 0;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.65}
.techx-note{margin:16px 0 0;color:var(--ham-text-3);font-size:13.5px;line-height:1.6;max-width:82ch}
.techx-note strong{color:var(--ham-text-2)}
.techx-fig{margin:26px 0 0;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:radial-gradient(120% 140% at 12% 0,rgba(87,242,200,.07),transparent 55%),#070b14;overflow:hidden}
.techx-fig svg{display:block;width:100%;height:auto}
.techx-fig--sq{max-width:460px}
.techx-fig--tall{display:none}
@media (max-width:900px){.techx-fig--wide{display:none}.techx-fig--tall{display:block}}
.techx-steps{margin:26px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.techx-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.techx-steps{grid-template-columns:1fr}}
.techx-step{position:relative;padding:20px 18px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));transition:border-color .25s var(--ham-ease),transform .25s var(--ham-ease)}
.techx-step:hover{border-color:rgba(87,242,200,.4);transform:translateY(-3px)}
.techx-step-top{display:flex;align-items:center;justify-content:space-between}
.techx-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:#57f2c8;background:rgba(87,242,200,.08);border:1px solid rgba(87,242,200,.22)}
.techx-ico svg{width:26px;height:26px}
.techx-step-n{font-family:var(--ham-font-num);font-size:12px;letter-spacing:.18em;color:var(--ham-text-3)}
.techx-step h3{margin:14px 0 0;font-family:var(--ham-font-display);font-size:17px;line-height:1.28;color:var(--ham-text)}
.techx-step p{margin:8px 0 0;font-size:13.5px;line-height:1.62;color:var(--ham-text-2)}
.techx-step.is-ai .techx-ico{color:#8f7cff;background:rgba(143,124,255,.09);border-color:rgba(143,124,255,.28)}
.techx-step.is-ai:hover{border-color:rgba(143,124,255,.45)}
.techx-step.is-safe .techx-ico{color:#17c97e;background:rgba(23,201,126,.09);border-color:rgba(23,201,126,.3)}
.techx-step.is-safe:hover{border-color:rgba(23,201,126,.45)}
.techx-split{margin:26px 0 0;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:32px;align-items:center}
@media (max-width:900px){.techx-split{grid-template-columns:1fr;gap:22px}.techx-fig--sq{max-width:none}}
.techx-split .techx-fig{margin:0}
.techx-copy p{margin:0 0 12px;color:var(--ham-text-2);line-height:1.7;font-size:15px}
.techx-copy strong{color:var(--ham-text)}
.techx-ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.techx-ul li{position:relative;padding-left:22px;color:var(--ham-text-2);font-size:14px;line-height:1.55}
.techx-ul li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border:1px solid #57f2c8;border-radius:2px;transform:rotate(45deg)}
.techx-risk{padding:22px 22px 24px;border:1px solid rgba(255,77,106,.28);border-radius:18px;background:rgba(255,77,106,.05)}
.techx-risk p{margin:12px 0 0;color:var(--ham-text-2);line-height:1.7;max-width:92ch;font-size:14.5px}