/* ==========================================================================
   SnapTik – Component (giai đoạn 1). Thông số bám theo Figma.
   ========================================================================== */

/* ---------- Viền gradient dùng chung (background padding-box/border-box) ---------- */
.border-gradient {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--_fill, var(--bg-raised)), var(--_fill, var(--bg-raised))) padding-box,
    var(--_stroke, var(--grad-brand)) border-box;
}

/* ---------- Section heading ---------- */
.section { padding-block: var(--section-y); position: relative; }
/* Hai section liền nhau: bớt khoảng trên để mạch đọc liền hơn */
.section + .section { padding-top: calc(var(--section-y) * .55); }
.section-head { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head--left { justify-items: start; text-align: left; }
.section-head :is(h1, h2) { font-size: var(--fs-h2); letter-spacing: -0.005em; line-height: 1.12; max-width: 24ch; text-wrap: balance; }
.section-head--left :is(h1, h2) { max-width: none; }
.section-head p { color: var(--text-secondary); font-size: var(--fs-lead); line-height: 1.6; max-width: 640px; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
  background: rgb(168 85 247 / .16); color: var(--lilac);
}
.badge--brand { background: var(--grad-brand); color: #fff; }
.badge--cyan { background: rgb(34 211 238 / .16); color: var(--cyan-soft); }
.badge--success { background: rgb(34 211 238 / .12); color: var(--cyan-soft); border: 1px solid rgb(34 211 238 / .4); }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }

/* Nhãn "MỚI" trong viên thuốc (hero) */
.pill-note {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 500;
  --_fill: #1f1238; --_stroke: linear-gradient(90deg, rgb(255 79 216 / .6), rgb(34 211 238 / .6));
}

/* ---------- Chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12);
}
.chip img, .chip .icon { width: 22px; height: 22px; flex: none; }
.chip--plain { padding-inline: 16px; color: var(--text-secondary); font-weight: 500; }
button.chip { transition: background var(--dur-fast), color var(--dur-fast); }
button.chip:hover { color: var(--text-primary); background: rgb(255 255 255 / .09); }
.chip[aria-pressed="true"], .chip.is-active {
  color: #fff; font-weight: 700; border-color: transparent;
  background: var(--grad-cta); box-shadow: 0 6px 18px rgb(255 79 216 / .4), inset 0 1px 0 rgb(255 255 255 / .35);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip-row--scroll {
  flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
  padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1);
  scroll-snap-type: x proximity;
}
.chip-row--scroll::-webkit-scrollbar { display: none; }

/* ---------- Icon tile (ô icon gradient) ---------- */
.icon-tile {
  --_a: var(--pink); --_b: var(--purple-deep); --_size: 56px;
  display: grid; place-items: center; flex: none;
  width: var(--_size); height: var(--_size); border-radius: calc(var(--_size) * .3);
  color: #fff; background: linear-gradient(135deg, var(--_a), var(--_b));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--_a) 55%, transparent), inset 0 1px 1px rgb(255 255 255 / .4);
}
.icon-tile--sm { --_size: 44px; }
.icon-tile--lg { --_size: 72px; }
.icon-tile--cyan { --_a: var(--cyan); --_b: var(--indigo); }
.icon-tile--violet { --_a: var(--violet); --_b: #4F46E5; }
.icon-tile--rose { --_a: #F472B6; --_b: var(--violet); }
.icon-tile--muted { background: rgb(255 255 255 / .08); box-shadow: none; }

/* ---------- Card ---------- */
.card {
  position: relative; overflow: hidden;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--shadow-card);
}
.card h3 { font-size: var(--fs-h3); letter-spacing: -0.005em; }
.card p { color: var(--text-secondary); font-size: .9375rem; line-height: 1.6; }
/* Quầng sáng góc (radial-gradient tĩnh, không dùng filter blur) */
.card--glow::before {
  content: ""; position: absolute; width: 360px; height: 360px; right: -140px; top: -180px; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--_glow, var(--pink)) 45%, transparent), transparent);
  pointer-events: none;
}
.card > * { position: relative; }
.card--highlight {
  --_fill: #1d1034; --_stroke: linear-gradient(90deg, var(--pink), var(--cyan));
  border: 1.5px solid transparent;
  background:
    linear-gradient(135deg, rgb(255 79 216 / .16), rgb(124 58 237 / .1)) padding-box,
    linear-gradient(#150c2b, #150c2b) padding-box,
    var(--_stroke) border-box;
  box-shadow: 0 20px 60px rgb(255 79 216 / .3);
}
.card--interactive { transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast); }
.card--interactive:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / .22); }

/* ---------- Ô nhập liệu ---------- */
.field { display: grid; gap: 8px; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px; min-height: 54px; border-radius: 12px;
  background: rgb(10 7 24 / .55); border: 1px solid rgb(255 255 255 / .12);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input-wrap .icon { color: var(--text-secondary); flex: none; }
.input-wrap:focus-within { border-color: var(--pink); box-shadow: 0 0 0 4px rgb(255 79 216 / .15); }
.input, .select, .textarea {
  flex: 1; min-width: 0; width: 100%;
  padding: 15px 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: .9375rem;
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.select { appearance: none; cursor: pointer; }
.select option { background: var(--bg-raised); }
.textarea { resize: vertical; min-height: 140px; }
.input-wrap--area { align-items: flex-start; padding-block: 2px; }
.field--error .input-wrap { border-color: #FB7185; }
.field__error { font-size: var(--fs-xs); color: #FDA4AF; }

.checkbox { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; }
.checkbox input { appearance: none; width: 20px; height: 20px; border-radius: 6px; margin: 0; flex: none;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .2); display: grid; place-items: center; }
.checkbox input:checked { background: var(--grad-cta); border-color: transparent; }
.checkbox input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }

/* ---------- Thanh tải video (Download bar) ---------- */
.download-bar {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  width: min(100%, 780px); padding: 8px 8px 8px 24px; border-radius: var(--r-pill);
  --_fill: rgb(10 7 24 / .6);
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgb(10 7 24 / .72), rgb(10 7 24 / .72)) padding-box,
    linear-gradient(90deg, var(--pink), rgb(168 85 247 / .6) 50%, var(--cyan)) border-box;
}
/* Lớp phát sáng "thở" – chỉ đổi opacity */
.download-bar::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: 0 20px 60px rgb(168 85 247 / .55), 0 0 24px rgb(255 79 216 / .25);
  opacity: .7;
}
.download-bar > .icon-link { color: var(--violet-soft); flex: none; }
.download-bar__input {
  flex: 1; min-width: 0; padding: 18px 0; border: 0; outline: 0; background: transparent;
  color: var(--text-primary); font-size: 1.0625rem;
}
.download-bar__input::placeholder { color: #8E88B0; }
.download-bar__paste {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 10px 14px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .08); font-size: var(--fs-sm); font-weight: 600;
  transition: background var(--dur-fast);
}
.download-bar__paste:hover { background: rgb(255 255 255 / .14); }
.download-bar .btn--primary { --_pad-x: 30px; --_pad-y: 18px; font-size: 1.0625rem; flex: none; }
.download-bar:focus-within { outline: 2px solid rgb(255 79 216 / .5); outline-offset: 4px; }

@media (max-width: 639px) {
  .download-bar {
    flex-wrap: wrap; padding: 10px; border-radius: 15px; gap: 10px;
  }
  .download-bar > .icon-link { margin-left: 14px; }
  .download-bar__input { padding: 14px 0; font-size: 1rem; flex-basis: 0; }
  .download-bar__paste { border-radius: 12px; margin-right: 0; }
  .download-bar .btn--primary { flex-basis: 100%; border-radius: 12px; --_pad-y: 16px; }
}

/* ---------- Tabs (segmented) ---------- */
.tabs {
  display: inline-flex; gap: 6px; padding: 6px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 12px 22px; border-radius: var(--r-pill);
  color: var(--text-secondary); font-weight: 600; font-size: .9375rem;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"] {
  color: #fff; font-weight: 700; background: var(--grad-cta);
  box-shadow: 0 6px 20px rgb(255 79 216 / .45), inset 0 1px 0 rgb(255 255 255 / .35);
}
.tabs--block { display: flex; width: 100%; }
.tabs--block .tab { flex: 1; justify-content: center; }
[role="tabpanel"][hidden] { display: none; }

/* ---------- Accordion (FAQ) – dùng <details>, chạy cả khi chưa có JS ---------- */
.faq-list { display: grid; gap: 12px; }
.faq-item {
  border-radius: var(--r-md);
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1);
  transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; font-size: 1.125rem; font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__chev {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: rgb(255 255 255 / .06); transition: transform var(--dur) var(--ease-out), background var(--dur-fast);
}
.faq-item__body {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out);
}
.faq-item__body > div { overflow: hidden; }
.faq-item__body p { padding: 0 26px 22px; color: var(--text-secondary); line-height: 1.65; }
.faq-item[open] {
  border-color: transparent;
  background:
    linear-gradient(135deg, rgb(168 85 247 / .16), rgb(255 79 216 / .06)) padding-box,
    linear-gradient(#120a26, #120a26) padding-box,
    linear-gradient(90deg, rgb(255 79 216 / .7), rgb(168 85 247 / .3)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 16px 40px rgb(168 85 247 / .25);
}
.faq-item[open] .faq-item__chev { transform: rotate(180deg); background: var(--grad-cta); }
.faq-item[open] .faq-item__body { grid-template-rows: 1fr; }
@media (max-width: 639px) {
  .faq-item summary { padding: 18px 20px; font-size: 1rem; }
  .faq-item__body p { padding: 0 20px 18px; font-size: .9375rem; }
}

/* ---------- Thống kê ---------- */
.stat { display: grid; gap: 2px; }
.stat__value { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -0.005em; line-height: 1.1;
  background: linear-gradient(90deg, #fff, var(--violet-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { font-size: .8125rem; font-weight: 500; color: var(--text-tertiary); }

/* ---------- Thẻ đánh giá ---------- */
.review-card { display: grid; gap: 18px; margin: 0; }
.review-card__top { display: flex; align-items: center; justify-content: space-between; }
.stars { color: #FBBF24; letter-spacing: .12em; font-weight: 700; }
.review-card blockquote { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.6; color: var(--text-primary); }
.author { display: flex; align-items: center; gap: 12px; }
.avatar {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  font-weight: 800; font-size: .9375rem; color: #fff; border: 2px solid rgb(255 255 255 / .3);
  background: linear-gradient(135deg, var(--_a, var(--pink)), var(--_b, var(--purple-deep)));
}
.author__name { font-weight: 700; font-size: .9375rem; }
.author__role { color: var(--text-tertiary); font-size: .8125rem; }

/* ---------- Thẻ danh mục (ảnh dọc) ---------- */
.category-card {
  display: grid; gap: 16px; padding: 12px 12px 18px; border-radius: 15px; width: 282px; flex: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .02));
  border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 30px 60px rgb(0 0 0 / .45);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.category-card__media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 258 / 322; }
.category-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); }
.category-card__media .badge { position: absolute; left: 14px; top: 14px; background: rgb(10 7 24 / .6); color: #fff; border: 1px solid rgb(255 255 255 / .2); }
.category-card__meta { display: flex; align-items: center; gap: 12px; padding-inline: 8px 2px; }
.category-card__meta > div { flex: 1; }
.category-card__title { font-weight: 700; font-size: 1.1875rem; }
.category-card__sub { color: var(--text-tertiary); font-size: .8125rem; }
.round-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 8px 20px rgb(255 79 216 / .5), inset 0 1px 1px rgb(255 255 255 / .35);
  transition: transform var(--dur-fast) var(--ease-out);
}
.category-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  background:
    linear-gradient(180deg, rgb(255 79 216 / .16), rgb(124 58 237 / .08)) padding-box,
    linear-gradient(#140b28, #140b28) padding-box,
    linear-gradient(90deg, var(--pink), var(--cyan)) border-box;
  border: 2px solid transparent; box-shadow: 0 20px 60px rgb(255 79 216 / .5);
}
.category-card:hover .round-btn { transform: scale(1.08); background: linear-gradient(135deg, var(--pink), var(--cyan)); }

/* ---------- Thẻ blog ---------- */
.blog-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden;
  background: var(--grad-card); border: 1px solid var(--glass-border-soft); box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast); }
.blog-card:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / .22); }
.blog-card__cover { aspect-ratio: 384 / 220; overflow: hidden; background: var(--bg-raised); }
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
/* Ảnh minh họa có sẵn khung/nhãn trong file → phóng nhẹ để cắt bớt viền (ảnh blog thật không cần) */
.blog-card__cover--framed img { transform: scale(1.36); object-position: 50% 24%; }
.blog-card:hover .blog-card__cover img { transform: scale(1.05); }
.blog-card:hover .blog-card__cover--framed img { transform: scale(1.42); }
.blog-card__body { display: grid; gap: 12px; padding: 24px; }
.blog-card__title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; }
.blog-card__excerpt { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__meta { display: flex; justify-content: space-between; align-items: center; color: var(--text-tertiary); font-size: var(--fs-xs); font-weight: 500; padding-top: 6px; }
.blog-card__meta .icon { color: var(--lilac); }

/* Dòng bài viết dạng danh sách (mobile) */
.post-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--r-md);
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); }
.post-item__thumb { width: 96px; height: 96px; border-radius: 14px; overflow: hidden; flex: none; }
.post-item__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); object-position: 50% 30%; }
.post-item__title { font-weight: 700; font-size: .9375rem; line-height: 1.3; margin-top: 6px; }
.post-item__meta { color: var(--text-tertiary); font-size: .6875rem; font-weight: 500; margin-top: 6px; }

/* ---------- Phân trang ---------- */
.pagination { display: flex; gap: 8px; justify-content: center; align-items: center; }
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 14px;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); color: var(--text-secondary); font-weight: 700;
}
.pagination .current { background: var(--grad-cta); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgb(255 79 216 / .4); }

/* ---------- Dải chữ chạy ---------- */
.marquee { overflow: hidden; position: relative; padding-block: 13px;
  background: rgb(10 7 24 / .6); border-top: 1px solid rgb(168 85 247 / .5); }
.marquee--brand { background: var(--grad-brand); border: 0; }
.marquee__track { display: flex; width: max-content; gap: 26px; align-items: center; }
.marquee__item { display: inline-flex; align-items: center; gap: 26px; font-weight: 900; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(233 228 255 / .75); white-space: nowrap; }
.marquee--brand .marquee__item { color: #fff; }
.marquee__item .icon { width: 12px; height: 12px; }

/* ---------- Khung ghi chú / mẹo ---------- */
.callout { display: flex; gap: 14px; padding: 18px 22px; border-radius: var(--r-md);
  background: linear-gradient(90deg, rgb(34 211 238 / .1), rgb(99 102 241 / .06)); border: 1px solid rgb(34 211 238 / .35); }
.callout__title { font-weight: 700; color: #A5F3FC; }
.callout p { color: var(--text-body); font-size: .9375rem; }
.tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm);
  background: rgb(34 211 238 / .08); border: 1px solid rgb(34 211 238 / .25); color: #A5F3FC; font-size: .8125rem; line-height: 1.55; }
.tip .icon { color: var(--cyan-soft); flex: none; margin-top: 1px; }

/* Nút Dán ⇄ Xóa + hướng dẫn dán */
.download-bar__paste { color: var(--text-primary); white-space: nowrap; }
.download-bar__paste > span { display: inline-flex; align-items: center; gap: 6px; }
.download-bar__paste .download-bar__paste-clear, .download-bar__paste.is-clear .download-bar__paste-do { display: none; }
.download-bar__paste.is-clear .download-bar__paste-clear { display: inline-flex; }
.download-bar__paste.is-clear { background: transparent; color: var(--text-secondary); }
.download-bar__paste.is-clear:hover { background: rgb(255 255 255 / .08); color: var(--text-primary); }
.download-bar__paste:not(.is-clear) { background: rgb(168 85 247 / .18); box-shadow: inset 0 0 0 1px rgb(168 85 247 / .35); }
.download-bar__paste:not(.is-clear):hover { background: rgb(168 85 247 / .28); }
.download-bar__hint { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--cyan-soft); text-align: center; }

/* Dòng hướng dẫn / báo lỗi luôn nằm DƯỚI ô tải (kể cả khi khung chứa xếp hàng ngang) */
.download-bar__hint, .download-bar__error { flex-basis: 100%; width: 100%; max-width: 780px; margin: 10px auto 0; text-align: center; }
.download-bar__error { color: #FDA4AF; font-size: .875rem; font-weight: 500; }
.hero__form { flex-wrap: wrap; }
.page-cta > .download-bar__hint, .page-cta > .download-bar__error { grid-column: 2; margin-top: -12px; }
@media (max-width: 1024px) { .page-cta > .download-bar__hint, .page-cta > .download-bar__error { grid-column: 1; } }