/* ============================================================================
   COMPONENT STYLES — FIVE STAR
   ----------------------------------------------------------------------------
   Trich xuat tu cac component Astro cua ban tinh. Ten class da theo quy uoc
   BEM (.fs-*) va duy nhat toan site, nen dung lai duoc nguyen ven trong
   Django template ma khong can co che scope cua Astro.
   `:global(...)` da duoc go vi khong con y nghia ngoai Astro.
   ========================================================================== */

/* ===== components/brand/Logo.astro ===== */
.fs-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-3);
    text-decoration: none;
    line-height: 1;
  }

  .fs-logo__mark {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--fs-radius-md);
    box-shadow: var(--fs-shadow-xs);
  }

  .fs-logo--mark .fs-logo__mark { width: 40px; height: 40px; }

  .fs-logo__text { display: flex; flex-direction: column; gap: 3px; }

  .fs-logo__name {
    font-size: var(--fs-text-lg);
    font-weight: var(--fs-weight-bold);
    letter-spacing: var(--fs-tracking-wide);
    color: var(--fs-secondary-800);
    white-space: nowrap;
  }

  .fs-logo__tagline {
    font-size: var(--fs-text-xs);
    font-weight: var(--fs-weight-medium);
    letter-spacing: var(--fs-tracking-wide);
    color: var(--fs-color-text-muted);
    white-space: nowrap;
  }

  .fs-logo--inverse .fs-logo__name { color: var(--fs-white); }
  .fs-logo--inverse .fs-logo__tagline { color: var(--fs-accent-300); }

  @media (max-width: 420px) {
    .fs-logo__mark { width: 40px; height: 40px; }
    .fs-logo__name { font-size: var(--fs-text-base); }
    .fs-logo__tagline { font-size: 0.68rem; }
  }

/* ===== components/cards/ArticleCard.astro ===== */
.fs-article-card {
    display: flex;
    flex-direction: column;
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-lg);
    overflow: hidden;
    height: 100%;
    transition: box-shadow var(--fs-transition-base), transform var(--fs-transition-base),
                border-color var(--fs-transition-base);
  }
  .fs-article-card:hover {
    box-shadow: var(--fs-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--fs-primary-200);
  }

  .fs-article-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--fs-gray-100);
    overflow: hidden;
  }
  .fs-article-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--fs-transition-slow);
  }
  .fs-article-card:hover .fs-article-card__media img { transform: scale(1.04); }

  .fs-article-card__placeholder {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--fs-accent-100), var(--fs-accent-200));
    color: var(--fs-secondary-600);
    font-size: var(--fs-text-sm);
    letter-spacing: var(--fs-tracking-wide);
  }

  .fs-article-card__category {
    position: absolute;
    top: var(--fs-space-3);
    left: var(--fs-space-3);
    padding: 4px var(--fs-space-3);
    background: var(--fs-primary-500);
    color: var(--fs-white);
    font-size: var(--fs-text-xs);
    font-weight: var(--fs-weight-semibold);
    border-radius: var(--fs-radius-full);
  }

  .fs-article-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-3);
    padding: var(--fs-space-6) var(--fs-space-5);
    flex: 1;
  }

  .fs-article-card__meta {
    display: flex;
    align-items: center;
    gap: var(--fs-space-3);
    font-size: var(--fs-text-xs);
    color: var(--fs-color-text-subtle);
  }

  .fs-article-card__flag {
    padding: 2px var(--fs-space-2);
    background: var(--fs-gray-100);
    color: var(--fs-warning);
    border-radius: var(--fs-radius-xs);
    font-weight: var(--fs-weight-semibold);
  }

  .fs-article-card__title {
    font-size: var(--fs-text-lg);
    font-weight: var(--fs-weight-semibold);
    line-height: var(--fs-leading-snug);
  }
  .fs-article-card__title a { color: inherit; }
  .fs-article-card__title a:hover { color: var(--fs-primary-600); }

  .fs-article-card__excerpt {
    font-size: var(--fs-text-sm);
    color: var(--fs-color-text-muted);
    line-height: var(--fs-leading-relaxed);
    flex: 1;
  }

  .fs-article-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    font-size: var(--fs-text-sm);
    font-weight: var(--fs-weight-semibold);
    color: var(--fs-primary-600);
  }
  .fs-article-card__more svg { transition: transform var(--fs-transition-base); }
  .fs-article-card:hover .fs-article-card__more svg { transform: translateX(4px); }

  /* Bien the ngang — dung o sidebar/bai lien quan */
  @media (min-width: 720px) {
    .fs-article-card--horizontal { flex-direction: row; }
    .fs-article-card--horizontal .fs-article-card__media { width: 38%; aspect-ratio: auto; flex-shrink: 0; }
    .fs-article-card--horizontal .fs-article-card__body { width: 62%; }
  }

/* ===== components/cards/ServiceCard.astro ===== */
.fs-service-card {
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-lg);
    overflow: hidden;
    transition: border-color var(--fs-transition-base),
                box-shadow var(--fs-transition-base),
                transform var(--fs-transition-base);
    height: 100%;
  }

  .fs-service-card:hover {
    border-color: var(--fs-primary-200);
    box-shadow: var(--fs-shadow-lg);
    transform: translateY(-4px);
  }

  .fs-service-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-4);
    height: 100%;
    padding: var(--fs-space-8) var(--fs-space-6) var(--fs-space-6);
    color: inherit;
  }

  .fs-service-card__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: var(--fs-radius-md);
    background: var(--fs-primary-50);
    color: var(--fs-primary-500);
    transition: background-color var(--fs-transition-base), color var(--fs-transition-base);
  }
  .fs-service-card:hover .fs-service-card__icon {
    background: var(--fs-primary-500);
    color: var(--fs-white);
  }

  .fs-service-card__title {
    font-size: var(--fs-text-xl);
    font-weight: var(--fs-weight-semibold);
    line-height: var(--fs-leading-snug);
    transition: color var(--fs-transition-base);
  }
  .fs-service-card:hover .fs-service-card__title { color: var(--fs-primary-600); }

  .fs-service-card__summary {
    color: var(--fs-color-text-muted);
    line-height: var(--fs-leading-relaxed);
    font-size: var(--fs-text-base);
    flex: 1;
  }

  .fs-service-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    margin-top: var(--fs-space-2);
    font-size: var(--fs-text-sm);
    font-weight: var(--fs-weight-semibold);
    color: var(--fs-primary-600);
  }
  .fs-service-card__more svg { transition: transform var(--fs-transition-base); }
  .fs-service-card:hover .fs-service-card__more svg { transform: translateX(4px); }

  /* Bien the gon cho trang danh sach dich vu */
  .fs-service-card--compact .fs-service-card__link { padding: var(--fs-space-6) var(--fs-space-5); }
  .fs-service-card--compact .fs-service-card__icon { width: 48px; height: 48px; }
  .fs-service-card--compact .fs-service-card__title { font-size: var(--fs-text-lg); }

  @media (max-width: 640px) {
    .fs-service-card__link { padding: var(--fs-space-6) var(--fs-space-5); }
  }

/* ===== components/cards/TeamCard.astro ===== */
.fs-team-card {
    display: flex;
    flex-direction: column;
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-lg);
    overflow: hidden;
    height: 100%;
    transition: box-shadow var(--fs-transition-base), transform var(--fs-transition-base),
                border-color var(--fs-transition-base);
  }
  .fs-team-card:hover {
    box-shadow: var(--fs-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--fs-primary-200);
  }

  .fs-team-card__media { aspect-ratio: 1 / 1; background: var(--fs-gray-100); }
  .fs-team-card__media img { width: 100%; height: 100%; object-fit: cover; }

  .fs-team-card__placeholder {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--fs-space-2);
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, var(--fs-secondary-700), var(--fs-secondary-500));
    color: var(--fs-white);
  }
  .fs-team-card__placeholder span {
    font-size: var(--fs-text-4xl);
    font-weight: var(--fs-weight-bold);
    letter-spacing: var(--fs-tracking-wide);
    opacity: 0.92;
  }
  .fs-team-card__placeholder small {
    font-size: var(--fs-text-xs);
    letter-spacing: var(--fs-tracking-wide);
    color: var(--fs-accent-300);
  }

  .fs-team-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-2);
    padding: var(--fs-space-6) var(--fs-space-5);
    flex: 1;
  }

  .fs-team-card__name { font-size: var(--fs-text-lg); font-weight: var(--fs-weight-semibold); }

  .fs-team-card__role {
    font-size: var(--fs-text-sm);
    font-weight: var(--fs-weight-semibold);
    color: var(--fs-primary-600);
  }

  .fs-team-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-space-2);
    list-style: none;
    margin: var(--fs-space-2) 0 0;
    padding: 0;
  }
  .fs-team-card__tags li {
    font-size: var(--fs-text-xs);
    padding: 3px var(--fs-space-3);
    background: var(--fs-accent-100);
    color: var(--fs-secondary-700);
    border-radius: var(--fs-radius-full);
  }

  .fs-team-card__bio {
    font-size: var(--fs-text-sm);
    color: var(--fs-color-text-muted);
    line-height: var(--fs-leading-relaxed);
    margin-top: var(--fs-space-2);
    flex: 1;
  }

  .fs-team-card__actions {
    display: flex;
    gap: var(--fs-space-4);
    align-items: center;
    margin-top: var(--fs-space-4);
    padding-top: var(--fs-space-4);
    border-top: 1px solid var(--fs-color-border);
    font-size: var(--fs-text-sm);
    font-weight: var(--fs-weight-medium);
  }
  .fs-team-card__contact,
  .fs-team-card__more { display: inline-flex; align-items: center; gap: var(--fs-space-2); }

/* ===== components/layout/Footer.astro ===== */
.fs-footer {
    background: var(--fs-secondary-800);
    color: var(--fs-accent-200);
    padding-top: var(--fs-space-16);
    font-size: var(--fs-text-sm);
  }

  .fs-footer__main {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr;
    gap: var(--fs-space-10) var(--fs-space-8);
    padding-bottom: var(--fs-space-12);
  }

  .fs-footer__about {
    margin-top: var(--fs-space-5);
    line-height: var(--fs-leading-relaxed);
    color: var(--fs-accent-200);
    max-width: 42ch;
  }

  .fs-footer__social {
    display: flex;
    gap: var(--fs-space-3);
    list-style: none;
    margin: var(--fs-space-6) 0 0;
    padding: 0;
  }
  .fs-footer__social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--fs-radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--fs-accent-200);
    transition: background-color var(--fs-transition-fast), color var(--fs-transition-fast);
  }
  .fs-footer__social a:hover { background: var(--fs-primary-500); color: var(--fs-white); }

  .fs-footer__title {
    font-size: var(--fs-text-base);
    font-weight: var(--fs-weight-semibold);
    color: var(--fs-white);
    margin-bottom: var(--fs-space-5);
    letter-spacing: var(--fs-tracking-wide);
  }
  /* Gach chan nho duoi tieu de cot */
  .fs-footer__title::after {
    content: '';
    display: block;
    width: 26px;
    height: 2px;
    margin-top: var(--fs-space-3);
    background: var(--fs-primary-500);
  }

  .fs-footer__links,
  .fs-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-3);
  }

  .fs-footer__links a { color: var(--fs-accent-200); }
  .fs-footer__links a:hover { color: var(--fs-white); }

  .fs-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--fs-space-3);
    line-height: var(--fs-leading-snug);
  }
  .fs-footer__contact svg { color: var(--fs-primary-400); margin-top: 2px; }
  .fs-footer__contact a { color: var(--fs-accent-200); }
  .fs-footer__contact a:hover { color: var(--fs-white); }

  .fs-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-space-4);
    flex-wrap: wrap;
    padding-block: var(--fs-space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--fs-accent-300);
    font-size: var(--fs-text-xs);
  }
  .fs-footer__legal { display: flex; gap: var(--fs-space-4); align-items: center; flex-wrap: wrap; }
  .fs-footer__legal a { color: var(--fs-accent-300); }
  .fs-footer__legal a:hover { color: var(--fs-white); }

  /* ---------- Responsive ---------- */
  @media (max-width: 1100px) {
    .fs-footer__main { grid-template-columns: 1.4fr 1fr 1fr; }
    .fs-footer__col--contact { grid-column: 2 / -1; }
  }
  @media (max-width: 760px) {
    .fs-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fs-footer__brand { grid-column: 1 / -1; }
    .fs-footer__col--contact { grid-column: 1 / -1; }
  }
  @media (max-width: 480px) {
    .fs-footer__main { grid-template-columns: minmax(0, 1fr); gap: var(--fs-space-8); }
    .fs-footer__bottom { flex-direction: column; align-items: flex-start; }
  }

/* ===== components/layout/Header.astro ===== */
.fs-header {
    position: sticky;
    top: 0;
    z-index: var(--fs-z-sticky);
    background: var(--fs-white);
    border-bottom: 1px solid var(--fs-color-border);
    transition: box-shadow var(--fs-transition-base), background-color var(--fs-transition-base);
  }
  .fs-header[data-scrolled] { box-shadow: var(--fs-shadow-md); }

  .fs-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-space-6);
    min-height: var(--fs-header-height);
    transition: min-height var(--fs-transition-base);
  }
  .fs-header[data-scrolled] .fs-header__inner { min-height: var(--fs-header-height-scrolled); }

  .fs-header__brand { flex-shrink: 0; }

  /* ---------- Nav desktop ---------- */
  .fs-nav__list {
    display: flex;
    align-items: center;
    gap: var(--fs-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .fs-nav__item { position: relative; }

  .fs-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-1);
    padding: var(--fs-space-3) var(--fs-space-3);
    font-size: var(--fs-text-base);
    font-weight: var(--fs-weight-medium);
    color: var(--fs-gray-800);
    border-radius: var(--fs-radius-sm);
    white-space: nowrap;
    transition: color var(--fs-transition-fast), background-color var(--fs-transition-fast);
  }
  .fs-nav__link:hover { color: var(--fs-primary-600); background: var(--fs-primary-50); }

  .fs-nav__link--active { color: var(--fs-primary-600); font-weight: var(--fs-weight-semibold); }

  .fs-nav__caret { transition: transform var(--fs-transition-fast); }
  .fs-nav__item--has-children:hover .fs-nav__caret,
  .fs-nav__item--has-children:focus-within .fs-nav__caret { transform: rotate(180deg); }

  /* ---------- Dropdown ---------- */
  .fs-nav__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 290px;
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-md);
    box-shadow: var(--fs-shadow-lg);
    padding: var(--fs-space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--fs-transition-base), transform var(--fs-transition-base),
                visibility var(--fs-transition-base);
  }
  /* Vung dem vo hinh: chuot di tu nav xuong dropdown khong bi mat */
  .fs-nav__dropdown::before {
    content: '';
    position: absolute;
    inset: -8px 0 100% 0;
  }

  .fs-nav__item--has-children:hover .fs-nav__dropdown,
  .fs-nav__item--has-children:focus-within .fs-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .fs-nav__dropdown ul { list-style: none; margin: 0; padding: 0; }

  .fs-nav__dropdown a {
    display: flex;
    align-items: center;
    gap: var(--fs-space-2);
    padding: var(--fs-space-3) var(--fs-space-3);
    font-size: var(--fs-text-sm);
    color: var(--fs-gray-700);
    border-radius: var(--fs-radius-sm);
    transition: background-color var(--fs-transition-fast), color var(--fs-transition-fast);
  }
  .fs-nav__dropdown a svg { color: var(--fs-accent-400); transition: transform var(--fs-transition-fast); }
  .fs-nav__dropdown a:hover,
  .fs-nav__dropdown a.is-active { background: var(--fs-primary-50); color: var(--fs-primary-600); }
  .fs-nav__dropdown a:hover svg { transform: translateX(3px); color: var(--fs-primary-500); }

  /* ---------- Actions ---------- */
  .fs-header__actions {
    display: flex;
    align-items: center;
    gap: var(--fs-space-4);
    flex-shrink: 0;
  }

  .fs-header__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    color: var(--fs-gray-800);
  }
  .fs-header__phone-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--fs-radius-full);
    background: var(--fs-primary-50);
    color: var(--fs-primary-500);
    transition: background-color var(--fs-transition-fast), color var(--fs-transition-fast);
  }
  .fs-header__phone:hover .fs-header__phone-icon {
    background: var(--fs-primary-500);
    color: var(--fs-white);
  }
  .fs-header__phone-text { display: flex; flex-direction: column; line-height: 1.25; }
  .fs-header__phone-text small { font-size: var(--fs-text-xs); color: var(--fs-color-text-muted); }
  .fs-header__phone-text strong { font-size: var(--fs-text-sm); font-weight: var(--fs-weight-bold); }

  .fs-header__cta { display: inline-flex; }

  .fs-header__toggle {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-sm);
    color: var(--fs-secondary-800);
  }
  /* Class dat tren component con (Icon) mang scope id rieng cua no,
     nen phai dung :global() thi selector moi khop. */
  .fs-header__toggle .fs-header__toggle-close { display: none; }
  .fs-header__toggle[aria-expanded='true'] .fs-header__toggle-open { display: none; }
  .fs-header__toggle[aria-expanded='true'] .fs-header__toggle-close { display: block; }

  /* ---------- Diem gay responsive ---------- */
  @media (max-width: 1240px) {
    .fs-nav__link { padding-inline: var(--fs-space-2); font-size: var(--fs-text-sm); }
    .fs-header__phone-text { display: none; }
  }
  @media (max-width: 1024px) {
    .fs-nav { display: none; }
    .fs-header__toggle { display: grid; }
    /* Button duoc boc trong <span class="fs-header__cta"> cua chinh Header.
       Khong dat class truc tiep len <Button>: phan tu goc cua component con
       mang scope id RIENG cua no, nen selector scoped cua Header khong khop. */
    .fs-header__cta { display: none; }
  }
  @media (max-width: 560px) {
    .fs-header__phone { display: none; }
  }

  /* ---------- Drawer ---------- */
  .fs-drawer { position: fixed; inset: 0; z-index: var(--fs-z-drawer); }
  .fs-drawer[hidden] { display: none; }

  .fs-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 27, 45, 0.5);
    animation: fs-fade-in var(--fs-transition-base) both;
  }

  .fs-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(380px, 88vw);
    height: 100%;
    background: var(--fs-white);
    box-shadow: var(--fs-shadow-xl);
    overflow-y: auto;
    padding: var(--fs-space-6) var(--fs-space-5) var(--fs-space-10);
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-6);
    animation: fs-slide-in var(--fs-transition-base) both;
  }

  @keyframes fs-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fs-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

  .fs-drawer__list { list-style: none; margin: 0; padding: 0; }
  .fs-drawer__list > li { border-bottom: 1px solid var(--fs-color-border); }

  .fs-drawer__list a,
  .fs-drawer__list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-space-3);
    padding: var(--fs-space-4) var(--fs-space-1);
    font-size: var(--fs-text-lg);
    font-weight: var(--fs-weight-medium);
    color: var(--fs-gray-800);
    cursor: pointer;
    list-style: none;
  }
  .fs-drawer__list summary::-webkit-details-marker { display: none; }
  .fs-drawer__list a:hover,
  .fs-drawer__list a.is-active { color: var(--fs-primary-600); }

  .fs-drawer__list details[open] summary svg { transform: rotate(180deg); }
  .fs-drawer__list summary svg { transition: transform var(--fs-transition-fast); color: var(--fs-gray-400); }

  .fs-drawer__sub { list-style: none; margin: 0 0 var(--fs-space-3); padding: 0 0 0 var(--fs-space-4); }
  .fs-drawer__sub li { border-left: 2px solid var(--fs-color-border); }
  .fs-drawer__sub a { font-size: var(--fs-text-base); font-weight: var(--fs-weight-normal); padding-block: var(--fs-space-3); }

  .fs-drawer__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-3);
    padding-top: var(--fs-space-6);
    border-top: 1px solid var(--fs-color-border);
  }
  .fs-drawer__phone,
  .fs-drawer__mail {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    font-size: var(--fs-text-sm);
    color: var(--fs-gray-700);
  }

  @media (min-width: 1025px) {
    .fs-drawer { display: none !important; }
  }

/* ===== components/layout/PageHero.astro ===== */
.fs-page-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--fs-secondary-800) 0%, var(--fs-secondary-700) 60%, var(--fs-secondary-600) 100%);
    color: var(--fs-white);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
  }

  .fs-page-hero__bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 92% 10%, rgba(201, 26, 66, 0.3), transparent 45%),
      radial-gradient(circle at 5% 95%, rgba(160, 191, 223, 0.18), transparent 50%);
    pointer-events: none;
  }

  /* KHONG dat max-width o day.
     Phan tu nay mang ca class .fs-container — ma .fs-container co
     `margin-inline: auto`. Dat max-width hep hon (860px) thi khoi do tu CAN
     GIUA man hinh thay vi bam mep trai cua container 1200px, nen toan bo chu
     trong banner bi day sang phai (1200-860)/2 = 170px so voi logo va cac
     the ben duoi. Do duoc tren man hinh 1600px: logo o 232, the dich vu dau
     tien o 232, nhung tieu de banner o 402.
     Muon gioi han do dai dong chu thi dat max-width len CHINH CAC DOAN CHU,
     khong dat len container. */
  .fs-page-hero__inner { position: relative; }

  .fs-page-hero__title {
    color: var(--fs-white);
    font-size: clamp(1.9rem, 4.2vw, var(--fs-text-4xl));
    /* Gioi han do dai dong chu — dat o day chu khong o container. */
    max-width: 860px;
  }

  .fs-page-hero__lead {
    margin-top: var(--fs-space-4);
    font-size: var(--fs-text-lg);
    line-height: var(--fs-leading-relaxed);
    color: var(--fs-accent-200);
    max-width: 66ch;
  }

  .fs-page-hero .fs-eyebrow { color: var(--fs-accent-300); margin-bottom: var(--fs-space-3); }
  .fs-page-hero .fs-eyebrow::before { background: var(--fs-accent-300); }

  /* ---------- Breadcrumbs ---------- */
  .fs-crumbs { margin-bottom: var(--fs-space-5); font-size: var(--fs-text-sm); }
  .fs-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fs-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .fs-crumbs li { display: inline-flex; align-items: center; gap: var(--fs-space-2); }
  .fs-crumbs a { color: var(--fs-accent-300); }
  .fs-crumbs a:hover { color: var(--fs-white); }
  .fs-crumbs span { color: var(--fs-white); }
  .fs-crumbs__sep { transform: rotate(-90deg); color: var(--fs-secondary-400); }

/* ===== components/layout/TopBar.astro ===== */
.fs-topbar {
    background: var(--fs-secondary-800);
    color: var(--fs-accent-200);
    font-size: var(--fs-text-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .fs-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-space-6);
    min-height: var(--fs-topbar-height);
    flex-wrap: wrap;
  }

  .fs-topbar__contact,
  .fs-topbar__social {
    display: flex;
    align-items: center;
    gap: var(--fs-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .fs-topbar__contact li {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    min-width: 0;
  }

  .fs-topbar__contact a,
  .fs-topbar__contact span { color: inherit; }
  .fs-topbar__contact a:hover { color: var(--fs-white); }

  .fs-topbar__item--address span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46ch;
  }

  .fs-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--fs-space-5);
  }

  .fs-topbar__hours {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    color: var(--fs-accent-300);
  }

  .fs-topbar__social { gap: var(--fs-space-3); }

  .fs-topbar__social a {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--fs-radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--fs-accent-200);
    transition: background-color var(--fs-transition-fast), color var(--fs-transition-fast);
  }
  .fs-topbar__social a:hover {
    background: var(--fs-primary-500);
    color: var(--fs-white);
  }

  /* Tablet: bo bot thong tin it quan trong.
     Luu y: cac selector duoi day phai co do uu tien >= `.fs-topbar__contact li`
     (0,1,1), neu khong `display: inline-flex` o block base se thang theo
     quy tac specificity va muc se khong bao gio bi an. */
  @media (max-width: 1100px) {
    .fs-topbar__contact li.fs-topbar__item--address { display: none; }
  }
  @media (max-width: 860px) {
    .fs-topbar__hours { display: none; }
  }
  /* Mobile: chi giu dien thoai + email, can giua */
  @media (max-width: 640px) {
    .fs-topbar { font-size: var(--fs-text-xs); }
    .fs-topbar__inner {
      justify-content: center;
      gap: var(--fs-space-4);
      padding-block: var(--fs-space-2);
    }
    .fs-topbar__contact { gap: var(--fs-space-4); justify-content: center; flex-wrap: wrap; }
    .fs-topbar__right { display: none; }
  }
  @media (max-width: 420px) {
    .fs-topbar__contact li.fs-topbar__item--email { display: none; }
  }

/* ===== components/sections/CtaBand.astro ===== */
.fs-cta {
    position: relative;
    overflow: hidden;
    background: var(--fs-primary-500);
    color: var(--fs-white);
    padding-block: var(--fs-section-y);
  }

  /* Hoa tiet nen goi lai dai ruy bang trong logo */
  .fs-cta__bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 88% 15%, rgba(255,255,255,0.14), transparent 46%),
      radial-gradient(circle at 8% 92%, rgba(22,58,95,0.4), transparent 52%);
    pointer-events: none;
  }

  .fs-cta__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-space-10);
    flex-wrap: wrap;
  }

  .fs-cta__content { max-width: 60ch; }

  .fs-cta__title {
    color: var(--fs-white);
    font-size: clamp(1.5rem, 3vw, var(--fs-text-3xl));
  }

  .fs-cta__text {
    margin-top: var(--fs-space-4);
    font-size: var(--fs-text-lg);
    line-height: var(--fs-leading-relaxed);
    color: rgba(255, 255, 255, 0.92);
  }

  .fs-cta__actions {
    display: flex;
    align-items: center;
    gap: var(--fs-space-6);
    flex-wrap: wrap;
  }

  .fs-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-3);
    color: var(--fs-white);
    padding: var(--fs-space-2) 0;
  }
  .fs-cta__phone:hover { color: var(--fs-white); }
  .fs-cta__phone span { display: flex; flex-direction: column; line-height: 1.3; }
  .fs-cta__phone strong { font-size: var(--fs-text-xl); font-weight: var(--fs-weight-bold); }
  .fs-cta__phone small { font-size: var(--fs-text-xs); color: rgba(255,255,255,0.8); }

  @media (max-width: 900px) {
    .fs-cta__inner { flex-direction: column; align-items: flex-start; gap: var(--fs-space-8); }
  }
  @media (max-width: 520px) {
    .fs-cta__actions { flex-direction: column; align-items: stretch; gap: var(--fs-space-4); width: 100%; }
  }

/* ===== components/sections/Hero.astro ===== */
.fs-hero {
    position: relative;
    background: linear-gradient(170deg, var(--fs-gray-50) 0%, var(--fs-accent-50) 55%, var(--fs-white) 100%);
    padding-block: clamp(3rem, 7vw, 5.5rem) 0;
  }

  /* Hieu ung nen mem — thuan tuy trang tri.
     overflow:hidden dat o day (khong dat o .fs-hero) de dai diem nhan
     duoc phep tran xuong section ke tiep ma khong bi cat. */
  .fs-hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .fs-hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.3; }
  .fs-hero__glow--1 {
    width: 460px; height: 460px; top: -160px; right: -90px;
    background: var(--fs-accent-300);
  }
  .fs-hero__glow--2 {
    width: 380px; height: 380px; bottom: -180px; left: -120px;
    background: var(--fs-primary-200);
  }

  .fs-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--fs-space-16);
    padding-bottom: var(--fs-section-y);
  }

  .fs-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    padding: var(--fs-space-2) var(--fs-space-4);
    background: var(--fs-white);
    border: 1px solid var(--fs-accent-200);
    border-radius: var(--fs-radius-full);
    font-size: var(--fs-text-sm);
    font-weight: var(--fs-weight-semibold);
    color: var(--fs-secondary-700);
    box-shadow: var(--fs-shadow-xs);
  }
  .fs-hero__eyebrow svg { color: var(--fs-primary-500); }

  .fs-hero__title {
    margin-top: var(--fs-space-6);
    max-width: 16ch;
    color: var(--fs-secondary-800);
  }

  .fs-hero__lead {
    margin-top: var(--fs-space-5);
    max-width: 54ch;
    font-size: var(--fs-text-lg);
    line-height: var(--fs-leading-relaxed);
    color: var(--fs-color-text-muted);
  }

  .fs-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-space-4);
    margin-top: var(--fs-space-8);
  }

  .fs-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-3);
    margin-top: var(--fs-space-8);
    color: var(--fs-gray-800);
  }
  .fs-hero__phone svg { color: var(--fs-primary-500); }
  .fs-hero__phone span { display: flex; flex-direction: column; line-height: 1.3; }
  .fs-hero__phone small { font-size: var(--fs-text-xs); color: var(--fs-color-text-muted); }
  .fs-hero__phone strong { font-size: var(--fs-text-lg); font-weight: var(--fs-weight-bold); }

  /* ---------- Khoi anh ---------- */
  .fs-hero__media { position: relative; }

  .fs-hero__image {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--fs-space-3);
    aspect-ratio: 4 / 3.2;
    border-radius: var(--fs-radius-xl);
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 0 12px, transparent 12px 24px),
      linear-gradient(140deg, var(--fs-secondary-600), var(--fs-secondary-800));
    color: var(--fs-white);
    text-align: center;
    padding: var(--fs-space-8);
    box-shadow: var(--fs-shadow-xl);
  }
  .fs-hero__image-label {
    font-size: var(--fs-text-2xl);
    font-weight: var(--fs-weight-bold);
    letter-spacing: var(--fs-tracking-wide);
    text-shadow: 0 2px 10px rgba(10, 27, 45, 0.7);
  }
  .fs-hero__image-hint {
    font-size: var(--fs-text-sm);
    color: var(--fs-white);
    line-height: var(--fs-leading-snug);
    /* Nen mo phia sau chu de doc duoc tren hoa tiet soc */
    background: rgba(10, 27, 45, 0.55);
    padding: var(--fs-space-2) var(--fs-space-4);
    border-radius: var(--fs-radius-sm);
  }
  .fs-hero__image-hint code {
    font-family: var(--fs-font-mono);
    font-size: 0.85em;
    background: rgba(255,255,255,0.12);
    padding: 2px 6px;
    border-radius: var(--fs-radius-xs);
  }

  .fs-hero__badge {
    position: absolute;
    left: calc(-1 * var(--fs-space-6));
    bottom: var(--fs-space-10);
    display: flex;
    align-items: center;
    gap: var(--fs-space-3);
    padding: var(--fs-space-4) var(--fs-space-5);
    background: var(--fs-white);
    border-radius: var(--fs-radius-lg);
    box-shadow: var(--fs-shadow-lg);
    max-width: 260px;
  }
  .fs-hero__badge-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: var(--fs-radius-full);
    background: var(--fs-primary-50);
    color: var(--fs-primary-500);
  }
  .fs-hero__badge span { display: flex; flex-direction: column; line-height: 1.35; }
  .fs-hero__badge strong { font-size: var(--fs-text-sm); color: var(--fs-secondary-800); }
  .fs-hero__badge small { font-size: var(--fs-text-xs); color: var(--fs-color-text-muted); }

  /* ---------- Dai diem nhan ---------- */
  .fs-hero__highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fs-space-4);
    list-style: none;
    margin: 0;
    padding: var(--fs-space-6);
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-lg);
    box-shadow: var(--fs-shadow-md);
    transform: translateY(50%);
    position: relative;
    z-index: 1;
  }
  .fs-hero__highlights li {
    display: flex;
    align-items: center;
    gap: var(--fs-space-3);
    font-size: var(--fs-text-sm);
    font-weight: var(--fs-weight-medium);
    color: var(--fs-gray-800);
  }
  .fs-hero__highlights svg { color: var(--fs-primary-500); }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .fs-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--fs-space-10); }
    .fs-hero__title { max-width: 20ch; }
    .fs-hero__media { max-width: 560px; }
    .fs-hero__badge { left: auto; right: var(--fs-space-5); }
    .fs-hero__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .fs-hero__inner { padding-bottom: var(--fs-space-10); }
    .fs-hero__actions { flex-direction: column; align-items: stretch; }
    .fs-hero__badge { position: static; margin-top: var(--fs-space-4); max-width: none; }
    .fs-hero__highlights { grid-template-columns: minmax(0, 1fr); transform: none; margin-bottom: var(--fs-space-8); }
    .fs-hero__image { aspect-ratio: 4 / 3; }
  }

/* ===== components/sections/IntroSection.astro ===== */
.fs-intro {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--fs-space-16);
  }

  .fs-intro__head { margin-bottom: var(--fs-space-8); }

  .fs-intro__points {
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .fs-intro__points li { display: flex; gap: var(--fs-space-4); align-items: flex-start; }

  .fs-intro__point-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: var(--fs-radius-md);
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    color: var(--fs-primary-500);
  }

  .fs-intro__points h3 {
    font-size: var(--fs-text-lg);
    font-weight: var(--fs-weight-semibold);
    margin-bottom: var(--fs-space-1);
  }
  .fs-intro__points p {
    color: var(--fs-color-text-muted);
    line-height: var(--fs-leading-relaxed);
    max-width: 56ch;
  }

  .fs-intro__cta { margin-top: var(--fs-space-8); }

  /* ---------- Anh ---------- */
  .fs-intro__media { position: relative; }

  .fs-intro__image {
    position: relative;
    z-index: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--fs-space-2);
    aspect-ratio: 4 / 4.4;
    border-radius: var(--fs-radius-xl);
    background:
      repeating-linear-gradient(-45deg, rgba(255,255,255,0.45) 0 12px, transparent 12px 24px),
      linear-gradient(150deg, var(--fs-accent-300), var(--fs-secondary-600));
    color: var(--fs-white);
    text-align: center;
    padding: var(--fs-space-8);
    box-shadow: var(--fs-shadow-lg);
  }
  .fs-intro__image span {
    font-size: var(--fs-text-xl);
    font-weight: var(--fs-weight-bold);
    letter-spacing: var(--fs-tracking-wide);
  }
  .fs-intro__image small { font-size: var(--fs-text-sm); color: rgba(255,255,255,0.85); }

  /* Khoi mau le phia sau anh */
  .fs-intro__accent {
    position: absolute;
    inset: var(--fs-space-8) calc(-1 * var(--fs-space-6)) calc(-1 * var(--fs-space-6)) var(--fs-space-8);
    border-radius: var(--fs-radius-xl);
    background: var(--fs-primary-500);
    opacity: 0.1;
  }

  @media (max-width: 1024px) {
    .fs-intro { grid-template-columns: minmax(0, 1fr); gap: var(--fs-space-12); }
    .fs-intro__media { max-width: 520px; margin-inline: auto; width: 100%; }
    .fs-intro__image { aspect-ratio: 4 / 3; }
  }
  @media (max-width: 640px) {
    .fs-intro__accent { display: none; }
  }

/* ===== components/ui/Accordion.astro ===== */
.fs-accordion { display: flex; flex-direction: column; }

  .fs-accordion__item { border-bottom: 1px solid var(--fs-color-border); }
  .fs-accordion__item:first-child { border-top: 1px solid var(--fs-color-border); }

  .fs-accordion--bordered .fs-accordion__item {
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-md);
    margin-bottom: var(--fs-space-3);
    background: var(--fs-white);
    overflow: hidden;
  }
  .fs-accordion--bordered .fs-accordion__item:first-child { border-top: 1px solid var(--fs-color-border); }

  .fs-accordion__heading { margin: 0; font-size: inherit; }

  .fs-accordion__trigger {
    display: flex;
    align-items: center;
    gap: var(--fs-space-4);
    width: 100%;
    padding: var(--fs-space-6) var(--fs-space-2);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: color var(--fs-transition-fast);
  }
  .fs-accordion--bordered .fs-accordion__trigger { padding-inline: var(--fs-space-5); }

  .fs-accordion__number {
    font-size: var(--fs-text-sm);
    font-weight: var(--fs-weight-bold);
    color: var(--fs-accent-400);
    letter-spacing: var(--fs-tracking-wide);
    flex-shrink: 0;
    transition: color var(--fs-transition-base);
  }

  .fs-accordion__title {
    flex: 1;
    font-size: clamp(1.05rem, 2vw, var(--fs-text-xl));
    font-weight: var(--fs-weight-semibold);
    color: var(--fs-color-heading);
    line-height: var(--fs-leading-snug);
    transition: color var(--fs-transition-base);
  }

  .fs-accordion__indicator {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--fs-radius-full);
    background: var(--fs-gray-100);
    color: var(--fs-secondary-700);
    transition: background-color var(--fs-transition-base),
                color var(--fs-transition-base),
                transform var(--fs-transition-base);
  }

  .fs-accordion__trigger:hover .fs-accordion__title,
  .fs-accordion__trigger:hover .fs-accordion__number { color: var(--fs-primary-500); }
  .fs-accordion__trigger:hover .fs-accordion__indicator {
    background: var(--fs-primary-50);
    color: var(--fs-primary-500);
  }

  .fs-accordion__trigger[aria-expanded='true'] .fs-accordion__title { color: var(--fs-primary-600); }
  .fs-accordion__trigger[aria-expanded='true'] .fs-accordion__number { color: var(--fs-primary-400); }
  .fs-accordion__trigger[aria-expanded='true'] .fs-accordion__indicator {
    background: var(--fs-primary-500);
    color: var(--fs-white);
    transform: rotate(180deg);
  }

  .fs-accordion__panel { overflow: hidden; }

  .fs-accordion__body {
    padding: 0 var(--fs-space-2) var(--fs-space-6) calc(var(--fs-space-4) + 24px);
    color: var(--fs-color-text-muted);
    font-size: var(--fs-text-lg);
    line-height: var(--fs-leading-relaxed);
    max-width: 68ch;
  }
  .fs-accordion--bordered .fs-accordion__body { padding-inline: var(--fs-space-5); }

  @media (max-width: 640px) {
    .fs-accordion__trigger { padding-block: var(--fs-space-5); gap: var(--fs-space-3); }
    .fs-accordion__number { display: none; }
    .fs-accordion__body {
      padding-left: var(--fs-space-2);
      font-size: var(--fs-text-base);
    }
  }

/* ===== components/ui/Button.astro ===== */
.fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fs-space-2);
    padding: var(--fs-button-padding-y) var(--fs-button-padding-x);
    font-size: var(--fs-button-font-size);
    font-weight: var(--fs-button-weight);
    line-height: 1.2;
    border: 2px solid transparent;
    border-radius: var(--fs-button-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fs-transition-base),
                border-color var(--fs-transition-base),
                color var(--fs-transition-base),
                transform var(--fs-transition-fast),
                box-shadow var(--fs-transition-base);
    white-space: nowrap;
  }

  .fs-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .fs-btn:not(:disabled):hover { transform: translateY(-1px); }
  .fs-btn:not(:disabled):active { transform: translateY(0); }

  .fs-btn__icon-right { transition: transform var(--fs-transition-base); }
  .fs-btn:not(:disabled):hover .fs-btn__icon-right { transform: translateX(3px); }

  /* --- Bien the --- */
  .fs-btn--primary {
    background: var(--fs-primary-500);
    color: var(--fs-white);
    border-color: var(--fs-primary-500);
  }
  .fs-btn--primary:not(:disabled):hover {
    background: var(--fs-primary-600);
    border-color: var(--fs-primary-600);
    color: var(--fs-white);
    box-shadow: var(--fs-shadow-brand);
  }

  .fs-btn--secondary {
    background: var(--fs-secondary-700);
    color: var(--fs-white);
    border-color: var(--fs-secondary-700);
  }
  .fs-btn--secondary:not(:disabled):hover {
    background: var(--fs-secondary-800);
    border-color: var(--fs-secondary-800);
    color: var(--fs-white);
    box-shadow: var(--fs-shadow-md);
  }

  .fs-btn--outline {
    background: transparent;
    color: var(--fs-primary-600);
    border-color: var(--fs-primary-500);
  }
  .fs-btn--outline:not(:disabled):hover {
    background: var(--fs-primary-500);
    color: var(--fs-white);
  }

  .fs-btn--ghost {
    background: transparent;
    color: var(--fs-secondary-700);
    border-color: transparent;
    padding-inline: var(--fs-space-2);
  }
  .fs-btn--ghost:not(:disabled):hover { color: var(--fs-primary-600); }

  .fs-btn--light {
    background: var(--fs-white);
    color: var(--fs-primary-600);
    border-color: var(--fs-white);
  }
  .fs-btn--light:not(:disabled):hover {
    background: var(--fs-primary-50);
    border-color: var(--fs-primary-50);
    color: var(--fs-primary-700);
    box-shadow: var(--fs-shadow-lg);
  }

  /* --- Kich thuoc --- */
  .fs-btn--sm { padding: 0.5rem 1rem; font-size: var(--fs-text-sm); }
  .fs-btn--lg { padding: 1rem 2.1rem; font-size: var(--fs-text-lg); }
  .fs-btn--block { width: 100%; }

  @media (max-width: 480px) {
    .fs-btn--lg { padding: 0.85rem 1.5rem; font-size: var(--fs-text-base); }
  }

/* ===== components/ui/Icon.astro ===== */
.fs-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ===== components/ui/ReviewNotice.astro ===== */
.fs-review-notice {
    border-left: 4px solid var(--fs-warning);
    background: #FFF8EC;
    padding: var(--fs-space-4) var(--fs-space-5);
    border-radius: 0 var(--fs-radius-sm) var(--fs-radius-sm) 0;
    margin-bottom: var(--fs-space-8);
  }
  .fs-review-notice strong {
    display: block;
    font-size: var(--fs-text-sm);
    color: #7A4A00;
    margin-bottom: var(--fs-space-1);
  }
  .fs-review-notice p {
    font-size: var(--fs-text-sm);
    color: var(--fs-gray-700);
    line-height: var(--fs-leading-relaxed);
    margin: 0;
  }

/* ===== pages/404.astro ===== */
.fs-404 { text-align: center; padding-block: var(--fs-space-16); }
  .fs-404__code {
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: var(--fs-weight-bold);
    line-height: 1;
    color: var(--fs-primary-500);
    opacity: 0.18;
    letter-spacing: var(--fs-tracking-tight);
  }
  .fs-404 h1 { margin-top: calc(-1 * var(--fs-space-8)); }
  .fs-404__text {
    margin: var(--fs-space-5) auto 0;
    max-width: 52ch;
    color: var(--fs-color-text-muted);
    line-height: var(--fs-leading-relaxed);
  }
  .fs-404__actions {
    display: flex;
    gap: var(--fs-space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--fs-space-8);
  }

/* ===== pages/case-study.astro ===== */
.fs-cs-empty { text-align: center; padding-block: var(--fs-space-10); }
  .fs-cs-empty h2 { margin-bottom: var(--fs-space-4); }
  .fs-cs-empty p {
    color: var(--fs-color-text-muted);
    line-height: var(--fs-leading-relaxed);
    max-width: 62ch;
    margin-inline: auto;
    margin-bottom: var(--fs-space-5);
  }
  .fs-cs-empty__note {
    background: #FFF8EC;
    border-left: 4px solid var(--fs-warning);
    border-radius: 0 var(--fs-radius-sm) var(--fs-radius-sm) 0;
    padding: var(--fs-space-4) var(--fs-space-5);
    text-align: left;
    font-size: var(--fs-text-sm);
    margin-bottom: var(--fs-space-8);
  }

  .fs-cs-card {
    padding: var(--fs-space-6);
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-lg);
  }
  .fs-cs-card__industry {
    font-size: var(--fs-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--fs-tracking-wider);
    color: var(--fs-primary-500);
    font-weight: var(--fs-weight-semibold);
    margin-bottom: var(--fs-space-3);
  }
  .fs-cs-card h2 { font-size: var(--fs-text-xl); margin-bottom: var(--fs-space-3); }
  .fs-cs-card p { color: var(--fs-color-text-muted); line-height: var(--fs-leading-relaxed); }
  .fs-cs-card__results {
    display: flex;
    gap: var(--fs-space-6);
    list-style: none;
    margin: var(--fs-space-5) 0 0;
    padding-top: var(--fs-space-5);
    border-top: 1px solid var(--fs-color-border);
  }
  .fs-cs-card__results li { display: flex; flex-direction: column; }
  .fs-cs-card__results strong { font-size: var(--fs-text-2xl); color: var(--fs-primary-600); }
  .fs-cs-card__results span { font-size: var(--fs-text-xs); color: var(--fs-color-text-muted); }

/* ===== pages/dich-vu/[id].astro ===== */
.fs-service-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--fs-space-16);
    align-items: start;
  }

  .fs-service-block + .fs-service-block { margin-top: var(--fs-space-16); }
  .fs-service-block .fs-section-head { margin-bottom: var(--fs-space-6); }

  /* ---------- Danh sach van de ---------- */
  .fs-problem-list,
  .fs-scope-list,
  .fs-audience {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-3);
  }
  .fs-problem-list li,
  .fs-scope-list li,
  .fs-audience li {
    display: flex;
    align-items: flex-start;
    gap: var(--fs-space-3);
    line-height: var(--fs-leading-relaxed);
  }
  .fs-problem-list li svg { color: var(--fs-error); margin-top: 5px; flex-shrink: 0; }
  .fs-scope-list li svg { color: var(--fs-success); margin-top: 5px; flex-shrink: 0; }
  .fs-audience li svg { color: var(--fs-primary-500); margin-top: 4px; flex-shrink: 0; }

  .fs-problem-list li { color: var(--fs-gray-700); }
  .fs-scope-list li { color: var(--fs-gray-700); }

  /* ---------- Loi ich ---------- */
  .fs-benefit {
    padding: var(--fs-space-6);
    background: var(--fs-gray-50);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-md);
  }
  .fs-benefit__icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--fs-radius-full);
    background: var(--fs-primary-500);
    color: var(--fs-white);
    margin-bottom: var(--fs-space-4);
  }
  .fs-benefit h3 { font-size: var(--fs-text-lg); margin-bottom: var(--fs-space-2); }
  .fs-benefit p { color: var(--fs-color-text-muted); line-height: var(--fs-leading-relaxed); font-size: var(--fs-text-base); }

  /* ---------- Quy trinh ---------- */
  .fs-process { list-style: none; margin: 0; padding: 0; counter-reset: step; }
  .fs-process li {
    display: flex;
    gap: var(--fs-space-5);
    padding-bottom: var(--fs-space-8);
    position: relative;
  }
  /* Duong noi doc giua cac buoc */
  .fs-process li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 52px;
    bottom: 0;
    width: 2px;
    background: var(--fs-color-border);
  }
  .fs-process__num {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: var(--fs-radius-full);
    background: var(--fs-secondary-700);
    color: var(--fs-white);
    font-weight: var(--fs-weight-bold);
    font-size: var(--fs-text-sm);
    position: relative;
    z-index: 1;
  }
  .fs-process__body h3 { font-size: var(--fs-text-lg); margin-bottom: var(--fs-space-2); padding-top: var(--fs-space-3); }
  .fs-process__body p { color: var(--fs-color-text-muted); line-height: var(--fs-leading-relaxed); max-width: 62ch; }

  /* ---------- Sidebar ---------- */
  .fs-sticky-card {
    position: sticky;
    top: calc(var(--fs-header-height) + var(--fs-space-5));
    padding: var(--fs-space-6);
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-lg);
    box-shadow: var(--fs-shadow-md);
  }
  .fs-sticky-card__title { font-size: var(--fs-text-lg); margin-bottom: var(--fs-space-5); }
  .fs-sticky-card__cta { margin-top: var(--fs-space-6); }
  .fs-sticky-card__note {
    margin-top: var(--fs-space-3);
    font-size: var(--fs-text-xs);
    color: var(--fs-color-text-subtle);
    text-align: center;
  }
  .fs-sticky-card__contact {
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-3);
    margin-top: var(--fs-space-6);
    padding-top: var(--fs-space-5);
    border-top: 1px solid var(--fs-color-border);
    font-size: var(--fs-text-sm);
  }
  .fs-sticky-card__contact a { display: inline-flex; align-items: center; gap: var(--fs-space-2); color: var(--fs-gray-700); }
  .fs-sticky-card__contact a:hover { color: var(--fs-primary-600); }

  @media (max-width: 1024px) {
    .fs-service-detail { grid-template-columns: minmax(0, 1fr); gap: var(--fs-space-10); }
    .fs-sticky-card { position: static; }
  }
  @media (max-width: 640px) {
    .fs-process li { gap: var(--fs-space-4); }
    .fs-process li:not(:last-child)::before { left: 19px; top: 44px; }
    .fs-process__num { width: 40px; height: 40px; }
  }

/* ===== pages/doi-ngu.astro ===== */
.fs-team-note {
    margin-top: var(--fs-space-10);
    padding: var(--fs-space-5);
    background: #FFF8EC;
    border-left: 4px solid var(--fs-warning);
    border-radius: 0 var(--fs-radius-sm) var(--fs-radius-sm) 0;
    font-size: var(--fs-text-sm);
    color: var(--fs-gray-700);
    line-height: var(--fs-leading-relaxed);
  }
  .fs-team-note code {
    font-family: var(--fs-font-mono);
    background: var(--fs-gray-100);
    padding: 1px 5px;
    border-radius: var(--fs-radius-xs);
  }

/* ===== pages/faq.astro ===== */
.fs-faq-group--spaced { margin-top: var(--fs-space-16); }
  .fs-faq-group .fs-section-head { margin-bottom: var(--fs-space-5); }

/* ===== pages/index.astro ===== */
/* Chua cho dai diem nhan cua hero tran xuong (translateY(50%)) */
  .fs-home-services { padding-top: calc(var(--fs-section-y) + 60px); }

  @media (max-width: 640px) {
    .fs-home-services { padding-top: var(--fs-section-y); }
  }

  .fs-values {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--fs-space-16);
    align-items: start;
  }
  .fs-values__head .fs-section-head { margin-bottom: var(--fs-space-6); }

  .fs-articles__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--fs-space-8);
    flex-wrap: wrap;
  }
  .fs-articles__head .fs-section-head { margin-bottom: var(--fs-space-8); }

  @media (max-width: 1024px) {
    .fs-values { grid-template-columns: minmax(0, 1fr); gap: var(--fs-space-8); }
  }

/* ===== pages/kien-thuc/[id].astro ===== */
.fs-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--fs-space-12);
    align-items: start;
  }

  .fs-article__sidebar {
    display: grid;
    gap: var(--fs-space-6);
    position: sticky;
    top: var(--fs-space-6);
  }

  .fs-sidebar-card {
    padding: var(--fs-space-6);
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-lg);
    box-shadow: var(--fs-shadow-sm);
  }
  .fs-sidebar-card h2 {
    margin: var(--fs-space-2) 0 var(--fs-space-5);
    font-size: var(--fs-text-xl);
    line-height: var(--fs-leading-snug);
  }
  .fs-sidebar-card p:not(.fs-eyebrow) {
    margin-bottom: var(--fs-space-5);
    color: var(--fs-color-text-muted);
    line-height: var(--fs-leading-relaxed);
  }
  .fs-sidebar-card--accent {
    background: var(--fs-primary-50);
    border-color: var(--fs-primary-100);
  }
  .fs-sidebar-list {
    display: grid;
    gap: var(--fs-space-4);
    list-style: none;
    margin: 0 0 var(--fs-space-5);
    padding: 0;
  }
  .fs-sidebar-list li {
    display: grid;
    gap: var(--fs-space-1);
    padding-bottom: var(--fs-space-4);
    border-bottom: 1px solid var(--fs-color-border);
  }
  .fs-sidebar-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .fs-sidebar-list a {
    color: var(--fs-color-text);
    font-weight: var(--fs-weight-semibold);
    line-height: var(--fs-leading-snug);
  }
  .fs-sidebar-list a:hover { color: var(--fs-primary-600); }
  .fs-sidebar-list time {
    color: var(--fs-color-text-subtle);
    font-size: var(--fs-text-xs);
  }
  .fs-sidebar-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--fs-space-2);
    color: var(--fs-primary-600);
    font-size: var(--fs-text-sm);
    font-weight: var(--fs-weight-semibold);
  }

  @media (max-width: 900px) {
    .fs-article-layout { grid-template-columns: minmax(0, 1fr); }
    .fs-article__sidebar {
      position: static;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 560px) {
    .fs-article__sidebar { grid-template-columns: minmax(0, 1fr); }
  }

.fs-article__meta {
    display: flex;
    align-items: center;
    gap: var(--fs-space-4);
    flex-wrap: wrap;
    font-size: var(--fs-text-sm);
    color: var(--fs-color-text-muted);
    padding-bottom: var(--fs-space-6);
    margin-bottom: var(--fs-space-6);
    border-bottom: 1px solid var(--fs-color-border);
  }
  .fs-article__meta time { display: inline-flex; align-items: center; gap: var(--fs-space-2); }

  .fs-article__cat {
    padding: 3px var(--fs-space-3);
    background: var(--fs-primary-50);
    color: var(--fs-primary-600);
    border-radius: var(--fs-radius-full);
    font-weight: var(--fs-weight-semibold);
    font-size: var(--fs-text-xs);
  }

  .fs-article__ai {
    padding: 3px var(--fs-space-3);
    background: var(--fs-accent-100);
    color: var(--fs-secondary-700);
    border-radius: var(--fs-radius-full);
    font-size: var(--fs-text-xs);
  }

  .fs-article__featured {
    margin: 0 0 var(--fs-space-8);
    overflow: hidden;
    border-radius: var(--fs-radius-lg);
    background: var(--fs-gray-100);
    box-shadow: var(--fs-shadow-sm);
  }
  .fs-article__featured img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .fs-article__excerpt {
    font-size: var(--fs-text-xl);
    line-height: var(--fs-leading-relaxed);
    color: var(--fs-gray-800);
    font-weight: var(--fs-weight-medium);
    margin-bottom: var(--fs-space-8);
    padding-left: var(--fs-space-5);
    border-left: 4px solid var(--fs-primary-500);
  }

  .fs-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-space-2);
    list-style: none;
    margin: var(--fs-space-12) 0 0;
    padding-top: var(--fs-space-6);
    border-top: 1px solid var(--fs-color-border);
  }
  .fs-article__tags li {
    font-size: var(--fs-text-sm);
    color: var(--fs-color-text-muted);
    background: var(--fs-gray-100);
    padding: 3px var(--fs-space-3);
    border-radius: var(--fs-radius-sm);
  }

/* ===== pages/kien-thuc/index.astro ===== */
.fs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs-space-2);
    margin-bottom: var(--fs-space-10);
    padding-bottom: var(--fs-space-5);
    border-bottom: 1px solid var(--fs-color-border);
  }

  .fs-filter {
    padding: var(--fs-space-2) var(--fs-space-5);
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-full);
    font-size: var(--fs-text-sm);
    font-weight: var(--fs-weight-medium);
    color: var(--fs-gray-700);
    transition: background-color var(--fs-transition-fast),
                border-color var(--fs-transition-fast),
                color var(--fs-transition-fast);
  }
  .fs-filter:hover { border-color: var(--fs-primary-300); color: var(--fs-primary-600); }
  .fs-filter.is-active {
    background: var(--fs-primary-500);
    border-color: var(--fs-primary-500);
    color: var(--fs-white);
  }

  .fs-empty {
    text-align: center;
    padding-block: var(--fs-space-12);
    color: var(--fs-color-text-muted);
  }

/* ===== pages/lien-he.astro ===== */
.fs-contact {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: var(--fs-space-12);
    align-items: start;
  }

  /* ---------- Cot thong tin ---------- */
  .fs-contact__info h2,
  .fs-contact__form-wrap h2 { font-size: var(--fs-text-2xl); margin-bottom: var(--fs-space-6); }

  .fs-contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fs-space-5); }
  .fs-contact__list li { display: flex; gap: var(--fs-space-4); }
  .fs-contact__icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: var(--fs-radius-md);
    background: var(--fs-primary-50);
    color: var(--fs-primary-500);
  }
  .fs-contact__list strong { display: block; font-size: var(--fs-text-sm); margin-bottom: 2px; }
  .fs-contact__list p { color: var(--fs-color-text-muted); line-height: var(--fs-leading-snug); font-size: var(--fs-text-sm); }
  .fs-contact__list a { display: block; color: var(--fs-color-text-muted); }
  .fs-contact__list a:hover { color: var(--fs-primary-600); }

  .fs-contact__map {
    display: grid;
    place-items: center;
    gap: var(--fs-space-2);
    margin-top: var(--fs-space-8);
    aspect-ratio: 4 / 3;
    border-radius: var(--fs-radius-lg);
    background: var(--fs-gray-100);
    border: 1px dashed var(--fs-color-border-strong);
    color: var(--fs-gray-500);
    text-align: center;
    padding: var(--fs-space-5);
  }
  .fs-contact__map span { font-weight: var(--fs-weight-semibold); letter-spacing: var(--fs-tracking-wide); }
  .fs-contact__map small { font-size: var(--fs-text-xs); max-width: 34ch; line-height: var(--fs-leading-snug); }

  /* ---------- Bieu mau ---------- */
  .fs-contact__form-wrap {
    padding: var(--fs-space-8);
    background: var(--fs-white);
    border: 1px solid var(--fs-color-border);
    border-radius: var(--fs-radius-lg);
    box-shadow: var(--fs-shadow-md);
  }
  .fs-contact__form-lead { color: var(--fs-color-text-muted); font-size: var(--fs-text-sm); margin-bottom: var(--fs-space-6); }

  .fs-form { display: flex; flex-direction: column; gap: var(--fs-space-5); }
  .fs-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-space-5); }
  .fs-form__field { display: flex; flex-direction: column; gap: var(--fs-space-2); }

  .fs-form__field label { font-size: var(--fs-text-sm); font-weight: var(--fs-weight-medium); color: var(--fs-gray-800); }
  .fs-req { color: var(--fs-primary-500); }

  .fs-form input,
  .fs-form select,
  .fs-form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-size: var(--fs-text-base);
    border: 1px solid var(--fs-color-border-strong);
    border-radius: var(--fs-radius-sm);
    background: var(--fs-white);
    transition: border-color var(--fs-transition-fast), box-shadow var(--fs-transition-fast);
  }
  .fs-form input:focus,
  .fs-form select:focus,
  .fs-form textarea:focus {
    outline: none;
    border-color: var(--fs-primary-500);
    box-shadow: 0 0 0 3px var(--fs-primary-100);
  }
  .fs-form textarea { resize: vertical; min-height: 130px; font-family: inherit; }

  /* Bay bot — an hoan toan khoi nguoi dung va trinh doc man hinh */
  .fs-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
  }

  .fs-form__consent {
    display: flex;
    gap: var(--fs-space-3);
    align-items: flex-start;
    font-size: var(--fs-text-sm);
    color: var(--fs-color-text-muted);
    line-height: var(--fs-leading-relaxed);
  }
  .fs-form__consent input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--fs-primary-500); }

  .fs-form__turnstile-missing {
    padding: var(--fs-space-4);
    background: #FFF8EC;
    border-left: 4px solid var(--fs-warning);
    border-radius: 0 var(--fs-radius-sm) var(--fs-radius-sm) 0;
    font-size: var(--fs-text-sm);
    line-height: var(--fs-leading-relaxed);
  }
  .fs-form__turnstile-missing code {
    font-family: var(--fs-font-mono);
    font-size: 0.88em;
    background: var(--fs-gray-100);
    padding: 1px 5px;
    border-radius: var(--fs-radius-xs);
  }

  .fs-form__status {
    padding: var(--fs-space-4);
    border-radius: var(--fs-radius-sm);
    font-size: var(--fs-text-sm);
    line-height: var(--fs-leading-relaxed);
  }
  .fs-form__status[data-state='success'] { background: #ECFBF3; border-left: 4px solid var(--fs-success); color: #12543A; }
  .fs-form__status[data-state='error'] { background: #FDF0EF; border-left: 4px solid var(--fs-error); color: #7D1A15; }

  @media (max-width: 1024px) {
    .fs-contact { grid-template-columns: minmax(0, 1fr); gap: var(--fs-space-10); }
  }
  @media (max-width: 640px) {
    .fs-form__row { grid-template-columns: minmax(0, 1fr); }
    .fs-contact__form-wrap { padding: var(--fs-space-6) var(--fs-space-5); }
  }

/* ===== Nut chuyen ngon ngu (top bar) ===== */
.fs-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--fs-radius-full);
}

.fs-lang__item {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px var(--fs-space-3);
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: var(--fs-tracking-wide);
  color: var(--fs-accent-200);
  border-radius: var(--fs-radius-full);
  transition: background-color var(--fs-transition-fast), color var(--fs-transition-fast);
}

.fs-lang__item:hover {
  color: var(--fs-white);
  background: rgba(255, 255, 255, 0.12);
}

.fs-lang__item.is-current {
  background: var(--fs-primary-500);
  color: var(--fs-white);
}

/* Dau cham bao ngon ngu do chua co ban dich cho trang hien tai */
.fs-lang__dot {
  color: var(--fs-accent-400);
  font-size: 1.1em;
  line-height: 0;
}

@media (max-width: 640px) {
  /* Top bar thu gon tren mobile nhung VAN giu nut doi ngon ngu —
     day la chuc nang dieu huong, khong phai thong tin phu. */
  .fs-topbar__right { display: flex !important; }
  .fs-topbar__hours { display: none; }
  .fs-topbar__social { display: none; }
}

/* Nut doi ngon ngu nay la <button> trong <form> (de luu lua chon vao
   session/cookie), nen phai go bo style mac dinh cua button. */
.fs-lang__form { display: inline; margin: 0; padding: 0; }

button.fs-lang__item {
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

button.fs-lang__item.is-current { background: var(--fs-primary-500); }

/* Dong ghi cong don vi thuc hien o chan trang */
.fs-footer__credit { color: var(--fs-accent-300); }
.fs-footer__credit a {
  color: var(--fs-accent-200);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fs-footer__credit a:hover { color: var(--fs-white); }


/* ===== Logo that (anh PNG co alpha) =====
   Ghi de style cua ban SVG truoc day: anh da co san bo goc va nen trong
   suot, nen KHONG dat background hay box-shadow — se lo ra o goc. */
img.fs-logo__mark {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.fs-logo--mark img.fs-logo__mark { width: 40px; height: 40px; }

@media (max-width: 420px) {
  img.fs-logo__mark { width: 40px; height: 40px; }
}

/* ============================================================================
   XIN PHEP COOKIE
   ========================================================================== */
.fs-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--fs-z-toast);
  padding: var(--fs-space-4);
  display: flex;
  justify-content: center;
}

.fs-consent__panel {
  width: 100%;
  max-width: var(--fs-container);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-5);
  padding: var(--fs-space-5) var(--fs-space-6);
  background: var(--fs-color-bg);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-xl);
}

.fs-consent__body { flex: 1 1 24rem; }
.fs-consent__title {
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-color-heading);
  margin-bottom: var(--fs-space-2);
}
.fs-consent__text {
  font-size: var(--fs-text-sm);
  line-height: var(--fs-leading-relaxed);
  color: var(--fs-color-text-muted);
}
.fs-consent__text a { text-decoration: underline; text-underline-offset: 3px; }

/* Hai nut NGANG NHAU ve kich thuoc. GDPR yeu cau tu choi phai de dang ngang
   voi dong y — lam nut tu choi mo nhat la vi pham, khong phai mau de hoc. */
.fs-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-3);
}
.fs-consent__actions .fs-btn { flex: 1 1 auto; justify-content: center; }

@media (max-width: 640px) {
  .fs-consent { padding: var(--fs-space-3); }
  .fs-consent__panel { padding: var(--fs-space-4); gap: var(--fs-space-4); }
  .fs-consent__actions { width: 100%; }
}

/* ---------- Khung thay cho video khi chua dong y ---------- */
.fs-embed__gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  padding: var(--fs-space-5);
  text-align: center;
  color: var(--fs-white);
}
.fs-embed { position: relative; }
.fs-embed__gate-title {
  font-weight: var(--fs-weight-semibold);
  font-size: var(--fs-text-base);
}
.fs-embed__gate-text {
  font-size: var(--fs-text-sm);
  line-height: var(--fs-leading-snug);
  color: var(--fs-accent-200);
  max-width: 44ch;
}
.fs-embed__gate-note { font-size: var(--fs-text-xs); }
.fs-embed__gate-note a { color: var(--fs-accent-300); text-decoration: underline; }