/* =========================================================================
   Lymphatic — theme.css

   Token lấy đúng theo bản gốc lymphoria.co. Bản gốc đặt zoom: .8 lên wrapper
   desktop, nên mọi con số khai báo bên đó (45px, 26px, 52px…) lên màn hình chỉ
   còn 0.8 lần. File này bỏ hẳn zoom và ghi thẳng giá trị ĐÃ NHÂN 0.8 — kết quả
   hiển thị y hệt, nhưng không phải gánh một thuộc tính zoom lồng cả trang.

   Thứ tự block trùng thứ tự section:
     1. Token + reset        7. Article
     2. Utility + nút        8. FAQ
     3. Announcement         9. Related + điều hướng bài
     4. Header + drawer     10. CTA
     5. Blog hero           11. Footer
     6. Blog list           12. Cookie
                            13. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Token + reset
   ------------------------------------------------------------------------- */
:root {
  /* Xanh lá — trục màu chính của thương hiệu */
  --green-900:  #123f2b;   /* tiêu đề card, tiêu đề hero */
  --green-850:  #114029;   /* tiêu đề trong bài */
  --green-800:  #075d39;   /* nút, pill, tab active */
  --green-700:  #064f32;   /* sao đánh giá */
  --green-bar:  #105531;   /* thanh announcement */
  --green-deep: #075230;   /* nền footer */

  --mint:       #ecfaf5;   /* nền hero + nền post card */
  --mint-line:  #cce8dd;   /* viền trên nền bạc hà */
  --teal:       #00a590;   /* link trong thân bài */

  --ink:        #111111;
  --ink-soft:   #1e1e1e;
  --ink-mute:   #5c6b62;
  --white:      #ffffff;

  /* Bề rộng khung — bản gốc mỗi section một giá trị, giữ nguyên như vậy */
  --w-hero:     944px;
  --w-list:     864px;
  --w-article:  800px;
  --w-footer:   1190px;

  /* Cỡ chữ thân bài. Bản gốc ra đúng 14.4px; nới lên 15px cho dễ đọc vì blog
     là trang để đọc dài. Muốn khớp tuyệt đối thì đổi dòng này về 14.4px. */
  --prose-size: 15px;

  --radius-card: 14px;
  --radius-lg:   21px;
  --ease:        cubic-bezier(.22, .61, .36, 1);

  /* Bản gốc dùng Helvetica Now Display + ABC Diatype (font thương mại, không
     kèm theo được). Tên thật đứng đầu stack: ai đã mua license chỉ cần nạp
     @font-face là trang tự dùng bản thật. Không có thì rơi về Inter Tight /
     Inter trên Google Fonts — cặp gần nhất còn lại. */
  --font-head: "Helvetica Now Display", "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "ABC Diatype", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

/* scrollbar-gutter giữ chỗ thanh cuộn ở mọi trang: modal cookie khoá cuộn nền,
   lúc bấm xong trả lại thanh cuộn mà không giữ chỗ thì cả trang nhảy ngang. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--green-900);
  margin: 0;
  letter-spacing: -0.01em;
}

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

a { color: inherit; }

button, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--green-800);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   2. Utility + nút
   ------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Link bỏ qua nav — ẩn cho tới khi được focus bằng bàn phím. */
.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 90;
  background: var(--green-800); color: var(--white);
  padding: 10px 18px; border-radius: 0 0 10px 10px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; }

.icon { width: 20px; height: 20px; flex: none; }

/* Nút */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 800; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--pill {
  min-height: 42px; padding: 11px 22px; font-size: 16px;
  background: var(--green-800); color: var(--white); border-color: var(--green-800);
}
.btn--pill:hover { background: var(--green-900); border-color: var(--green-900); }

.btn--light {
  background: var(--white); color: var(--green-800); border-color: var(--white);
}
.btn--light:hover { background: var(--mint); color: var(--green-900); border-color: var(--mint); }

.btn--ghost {
  background: transparent; color: var(--green-800); border-color: var(--green-800);
}
.btn--ghost:hover { background: var(--mint); }

/* Reveal khi cuộn — chỉ ẩn khi JS chạy, tắt JS là hiện sẵn. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* -------------------------------------------------------------------------
   3. Announcement
   ------------------------------------------------------------------------- */
.announcement {
  background: var(--green-bar);
  color: var(--white);
}
.announcement__inner {
  min-height: 30px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 16px;
}
.announcement__item {
  font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: .01em; text-align: center;
}

/* -------------------------------------------------------------------------
   4. Header + drawer
   ------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
}
body.is-scrolled .header {
  border-bottom-color: var(--mint-line);
  box-shadow: 0 6px 22px rgba(7, 82, 48, .07);
}

.header__inner {
  max-width: var(--w-footer); margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 26px;
}

.header__burger {
  display: none;
  background: none; border: 0; padding: 6px; margin-left: -6px;
  color: var(--green-900); cursor: pointer;
}

.header__brand { display: inline-flex; align-items: center; flex: none; }
.header__logo  { width: 168px; height: auto; }

.header__nav  { flex: 1 1 auto; }
.header__menu { display: flex; align-items: center; gap: 28px; list-style: none; }

.header__link {
  font-size: 13px; font-weight: 500; color: var(--green-900);
  text-decoration: none; padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.header__link:hover        { border-bottom-color: var(--green-800); }
.header__link.is-current   { border-bottom-color: var(--green-800); font-weight: 700; }

.header__actions { display: flex; align-items: center; gap: 14px; flex: none; }

.header__icon-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--green-900); text-decoration: none;
  transition: background .18s var(--ease);
}
.header__icon-link:hover { background: var(--mint); }

.header__count {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--green-800); color: var(--white);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* Drawer */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(7, 40, 25, .45);
  opacity: 0; transition: opacity .25s var(--ease);
}
.overlay.is-open { opacity: 1; }

.drawer {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: min(340px, 86vw); height: 100dvh;
  background: var(--white);
  transform: translateX(-101%);
  transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open { transform: none; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--mint-line);
}
.drawer__logo  { width: 150px; height: auto; }
.drawer__close {
  background: none; border: 0; padding: 6px; color: var(--green-900); cursor: pointer;
}

.drawer__menu { list-style: none; padding: 8px 0; }
.drawer__link {
  display: block; padding: 14px 20px;
  font-size: 16px; font-weight: 600; color: var(--green-900); text-decoration: none;
}
.drawer__link:hover, .drawer__link.is-current { background: var(--mint); }

/* -------------------------------------------------------------------------
   5. Blog hero + featured card
   ------------------------------------------------------------------------- */
.blog-hero {
  background: var(--mint);
  padding: 32px 16px 56px;
}
.blog-hero__inner {
  max-width: var(--w-hero); margin: 0 auto; text-align: center;
}

.blog-hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 22px; margin-bottom: 21px;
  border: 1px solid var(--mint-line); border-radius: 999px;
  background: var(--mint); color: var(--ink);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.blog-hero__stars {
  color: var(--green-700); font-size: 14px; line-height: 1; letter-spacing: 2.4px;
}

.blog-hero__title {
  color: var(--green-900);
  font-size: 42px; line-height: 1.05; font-weight: 800;
  margin: 0 0 19px;
}
.blog-hero__text {
  color: var(--ink-soft);
  font-size: 13px; line-height: 1.6;
  max-width: 536px; margin: 0 auto 38px;
}

/* Featured card */
.feature-card {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 42px;
  align-items: center; text-align: left;
  background: var(--white);
  border: 1px solid var(--mint-line); border-radius: var(--radius-lg);
  padding: 29px 27px 29px 35px;
}

.feature-card__tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 158px; padding: 6px 16px; margin-bottom: 22px;
  border: 1.5px solid var(--green-800); border-radius: 999px;
  background: var(--mint); color: var(--green-800);
  font-size: 14px; font-weight: 600; line-height: 1;
}

.feature-card__title {
  color: var(--green-900);
  font-size: 36px; line-height: 1.27; font-weight: 800;
  margin: 0 0 14px;
}
.feature-card__title a { text-decoration: none; }
.feature-card__title a:hover { color: var(--green-800); }

.feature-card__excerpt {
  color: var(--ink-soft);
  font-size: 13px; line-height: 1.55;
  max-width: 368px; margin: 0 0 30px;
}

.feature-card__button { min-width: 210px; }

.feature-card__media {
  border-radius: 16px; overflow: hidden; aspect-ratio: 13 / 10;
  background: #f4f4f4;
}
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   6. Blog list — tab chuyên mục + lưới bài
   ------------------------------------------------------------------------- */
.blog-list {
  background: var(--white);
  padding: 42px 16px 56px;
}
.blog-list__inner { max-width: var(--w-list); margin: 0 auto; }

.blog-list__tabs {
  display: flex; align-items: center; gap: 19px;
  margin-bottom: 35px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.blog-list__tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto; min-width: 142px; text-align: center;
  padding: 11px 19px; border-radius: 999px;
  border: 1.5px solid var(--green-800);
  background: var(--white); color: var(--green-800);
  font-size: 13px; font-weight: 800; line-height: 1;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tab:hover     { background: var(--mint); }
.tab.is-active { background: var(--green-800); color: var(--white); }

.blog-list__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  transition: opacity .18s var(--ease);
}
.blog-list__grid.is-fading { opacity: 0; }

.blog-list__empty {
  color: var(--green-900); font-size: 15px; text-align: center; padding: 28px 0;
}

/* Post card */
.post-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--mint);
  border: 1px solid var(--mint-line); border-radius: var(--radius-card);
  padding: 16px;
}

.post-card__image {
  display: block; border-radius: 8px; overflow: hidden;
  aspect-ratio: 5 / 4; margin-bottom: 16px; background: #f4f4f4;
}
.post-card__image img { width: 100%; height: 100%; object-fit: cover; }

.post-card__meta {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-800); margin-bottom: 9px;
}
.post-card__dot { color: var(--mint-line); }

.post-card__title {
  color: var(--green-900);
  font-size: 18px; line-height: 1.28; font-weight: 800;
  margin: 0 0 19px;
}
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { color: var(--green-800); }

.post-card__button {
  margin-top: auto; width: 100%;
  min-height: 40px; padding: 11px 18px;
  font-size: 14px; text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   7. Article
   ------------------------------------------------------------------------- */
.article { background: var(--white); padding: 10px 0 8px; }
.article__inner { max-width: var(--w-article); margin: 0 auto; padding: 0 16px; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 11px; color: var(--ink-mute);
  padding: 14px 0 18px;
}
.breadcrumb a { color: var(--green-800); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__current {
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.article__tag {
  display: inline-flex; align-items: center;
  padding: 6px 16px; margin-bottom: 14px;
  border: 1.5px solid var(--green-800); border-radius: 999px;
  background: var(--mint); color: var(--green-800);
  font-size: 12px; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: .04em;
}

.article__title {
  color: var(--green-850);
  font-size: 48px; line-height: 1.2; font-weight: 800;
  margin: 0 0 14px;
}

.article__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-mute); margin-bottom: 24px;
}
.article__dot { color: var(--mint-line); }

.article__cover {
  border-radius: 16px; overflow: hidden; margin-bottom: 30px; background: var(--mint);
  aspect-ratio: 20 / 9;
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }

.article__back { margin-top: 26px; }

/* Thân bài */
.prose { font-size: var(--prose-size); line-height: 1.65; color: #000; }

.prose__p { margin: 0 0 16px; }

.prose__h2 {
  color: var(--green-850);
  font-size: 36px; line-height: 1.2; font-weight: 800;
  margin: 32px 0 16px;
}
.prose__h3 {
  color: var(--green-850);
  font-size: 22px; line-height: 1.3; font-weight: 800;
  margin: 26px 0 12px;
}

.prose__list { margin: 0 0 18px; padding-left: 20px; }
.prose__list li { margin-bottom: 8px; }
.prose__list li::marker { color: var(--green-800); }

.prose a { color: var(--teal); font-weight: 800; }

.prose__quote {
  margin: 24px 0; padding: 18px 22px;
  border-left: 3px solid var(--green-800);
  background: var(--mint); border-radius: 0 12px 12px 0;
  font-family: var(--font-head);
  font-size: 19px; line-height: 1.4; font-weight: 600; color: var(--green-850);
}

/* Khối lưu ý — icon + chữ, dùng cho cảnh báo y tế trong bài */
.prose__note {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 24px 0; padding: 16px 18px;
  border: 1px solid var(--mint-line); border-radius: 12px;
  background: var(--mint);
  font-size: 14px; line-height: 1.6; color: var(--green-850);
}
.prose__note-icon { width: 20px; height: 20px; flex: none; color: var(--green-800); margin-top: 2px; }

/* -------------------------------------------------------------------------
   8. FAQ
   ------------------------------------------------------------------------- */
.faq { background: var(--white); padding: 14px 0 8px; }
.faq__inner { max-width: var(--w-article); margin: 0 auto; padding: 0 16px; }

.faq__heading {
  color: var(--green-850);
  font-size: 36px; line-height: 1.2; font-weight: 800;
  margin: 0 0 20px;
}

.faq__item {
  border-bottom: 1px solid var(--mint-line);
}
.faq__item:first-child { border-top: 1px solid var(--mint-line); }

.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700; color: var(--green-850);
}
.faq__q::-webkit-details-marker { display: none; }

/* Dấu + vẽ bằng CSS, xoay thành × khi mở */
.faq__sign { position: relative; width: 14px; height: 14px; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--green-800);
}
.faq__sign::before { width: 14px; height: 1.5px; }
.faq__sign::after  { width: 1.5px; height: 14px; transition: transform .22s var(--ease); }
.faq__item[open] .faq__sign::after { transform: scaleY(0); }

.faq__a {
  padding: 0 2px 18px;
  font-size: 14px; line-height: 1.65; color: var(--ink-soft);
  max-width: 92%;
}

/* -------------------------------------------------------------------------
   9. Related + điều hướng bài
   ------------------------------------------------------------------------- */
.related { background: var(--white); padding: 26px 0 44px; }
.related__inner { max-width: var(--w-article); margin: 0 auto; padding: 0 16px; }

.related__heading {
  color: var(--green-850);
  font-size: 36px; line-height: 1.2; font-weight: 800;
  margin: 0 0 20px;
}

.related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.post-card--sm .post-card__title { font-size: 17px; margin-bottom: 16px; }
.post-card--sm .post-card__button { min-height: 34px; font-size: 13px; }

.post-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 34px;
}
.post-nav__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 142px; min-height: 40px; padding: 10px 20px;
  border: 1px solid var(--green-800); border-radius: 999px;
  background: var(--green-800); color: var(--white);
  font-size: 13px; font-weight: 800; line-height: 1;
  text-transform: uppercase; text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.post-nav__btn:hover { background: var(--green-900); border-color: var(--green-900); }
.post-nav__btn .icon { width: 16px; height: 16px; }

.post-nav__btn.is-disabled {
  background: #e5e5e5; border-color: #d0d0d0; color: #999;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   10. CTA cuối bài
   ------------------------------------------------------------------------- */
.cta {
  background: var(--green-900);
  color: var(--white);
  padding: 56px 16px;
}
.cta__inner { max-width: 620px; margin: 0 auto; text-align: center; }

.cta__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); margin-bottom: 14px;
}
.cta__title {
  color: var(--white);
  font-size: 38px; line-height: 1.12; font-weight: 800;
  margin: 0 0 14px;
}
.cta__text {
  font-size: 14px; line-height: 1.65;
  color: rgba(255, 255, 255, .82); margin: 0 auto 26px; max-width: 500px;
}
.cta__actions { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.cta__link {
  font-size: 13px; font-weight: 700; color: var(--white);
  text-decoration: underline; text-underline-offset: 4px;
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.footer {
  background: var(--green-deep);
  color: var(--white);
}
.footer__inner {
  max-width: var(--w-footer); margin: 0 auto;
  padding: 55px 20px 32px;
}

.footer__top { display: flex; align-items: flex-start; gap: 60px; position: relative; }

.footer__brand-col { flex: 0 0 240px; min-width: 0; }
.footer__brand     { display: inline-flex; margin-bottom: 18px; }
.footer__brand img { width: 176px; height: auto; }

.footer__disclaimer p {
  font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, .68);
  margin-bottom: 10px;
}
.footer__disclaimer--mobile { display: none; }

/* Cột link — vạch dọc mảnh chỉ đặt ở cột đầu, đúng như bản gốc */
.footer__col { position: relative; flex: 0 0 150px; min-width: 0; }
.footer__col--first { flex: 0 0 176px; padding-left: 68px; }
.footer__col--first::before,
.footer__news-col::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: .5px; height: 216px;
  background: rgba(255, 255, 255, .6);
  pointer-events: none;
}

.footer__title {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 500; color: var(--white);
  margin: 0 0 14px;
}
.footer__title--plain { margin-bottom: 10px; }

/* Nút gập chỉ hoạt động ở mobile; desktop hiện như tiêu đề thường. */
.footer__fold {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; cursor: default;
  font: inherit; color: inherit;
}
.footer__sign { display: none; }

.footer__list { list-style: none; }
.footer__list li { margin-bottom: 8px; }
.footer__link {
  font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .88);
  text-decoration: none;
}
.footer__link:hover { color: var(--white); text-decoration: underline; }

.footer__news-col {
  position: relative; flex: 0 0 344px; min-width: 0;
  margin-left: auto; padding-left: 52px;
}
.footer__text {
  font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .8); margin-bottom: 14px;
}

.footer__field {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; padding: 4px 4px 4px 16px;
}
.footer__input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--white); font-size: 12px; padding: 8px 0;
}
.footer__input::placeholder { color: rgba(255, 255, 255, .6); }

.footer__submit {
  flex: none; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--white); color: var(--green-deep);
  font-size: 12px; font-weight: 700; padding: 9px 18px;
  transition: background .18s var(--ease);
}
.footer__submit:hover { background: var(--mint); }

.footer__note {
  font-size: 11px; color: rgba(255, 255, 255, .8); margin-top: 8px; min-height: 14px;
}

.footer__address {
  font-style: normal; font-size: 11px; line-height: 1.7;
  color: rgba(255, 255, 255, .7); margin-top: 18px;
}

.footer__socials { list-style: none; display: flex; gap: 10px; margin-top: 16px; }
.footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); color: var(--white);
  transition: background .18s var(--ease);
}
.footer__social:hover { background: rgba(255, 255, 255, .14); }
.footer__social .icon { width: 16px; height: 16px; }

.footer__bottom {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.footer__copyright { font-size: 11px; color: rgba(255, 255, 255, .72); }

/* -------------------------------------------------------------------------
   12. Cookie consent — modal giữa màn hình

   Hộp nằm chính giữa và nền phía sau bị làm mờ: consent là thứ phải trả lời
   xong mới đọc tiếp, nền mờ nói điều đó rõ hơn hẳn một thanh nằm dưới chân
   trang — thanh dưới quá giống banner quảng cáo nên hay bị lướt qua.

   PHP in modal ở trạng thái hiện sẵn nên nó có mặt ngay từ lần paint đầu,
   không chờ JS. Nhưng gate qua class `js`: tắt JS thì không nút nào đóng được
   modal, để nó che trang là khoá luôn người đọc.
   ------------------------------------------------------------------------- */
.cookie { display: none; }

.js .cookie {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(7, 40, 25, .45);
  animation: cookie-veil .18s var(--ease) both;
}

/* Bấm xong JS gắn `hidden`, mà display:flex ở trên đè mất display:none mặc
   định của trình duyệt — thiếu dòng này là bấm rồi modal vẫn nằm nguyên đó. */
.js .cookie[hidden] { display: none; }

/* Khoá cuộn nền khi modal mở. Class do PHP in sẵn trên <html>, JS gỡ lúc bấm.
   Khoá cả html lẫn body vì mỗi trình duyệt lấy một cái làm khung cuộn.

   Không cần bù bề rộng thanh cuộn: scrollbar-gutter: stable ở block 1 giữ chỗ
   sẵn kể cả khi overflow: hidden vừa gỡ mất thanh cuộn, nên đóng/mở modal trang
   vẫn đúng một bề rộng, không nhảy ngang. */
.js.consent-open, .js.consent-open body { overflow: hidden; }

/* Có blur thì nền mờ vừa phải đã đủ tách lớp; máy không hỗ trợ blur rơi về
   nền đặc hơn khai ở trên, chữ trong hộp vẫn đọc được. */
@supports ((backdrop-filter: blur(7px)) or (-webkit-backdrop-filter: blur(7px))) {
  .js .cookie {
    background: rgba(7, 40, 25, .3);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
}

.cookie__inner {
  width: min(430px, 100%);
  max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 18px; text-align: center;
  background: var(--white);
  border: 1px solid var(--mint-line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(7, 40, 25, .28);
  padding: 28px 26px 24px;
  animation: cookie-rise .22s var(--ease) both;
}

.cookie__title {
  font-size: 19px; font-weight: 800; color: var(--green-850); margin-bottom: 8px;
}
.cookie__text { font-size: 12.5px; line-height: 1.6; color: var(--ink-mute); }
.cookie__text a { color: var(--green-800); font-weight: 700; }

.cookie__actions { display: flex; gap: 10px; }
.cookie__actions .btn { flex: 1 1 0; min-height: 40px; padding: 10px 18px; font-size: 13px; }

/* Animation chạy ngay khi trang paint lần đầu, để nó ngắn thôi — kéo dài thành
   ra modal "hiện chậm", đúng thứ vừa bỏ đi. */
@keyframes cookie-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes cookie-rise {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   13. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer__top { gap: 40px; }
  .footer__col--first { padding-left: 40px; }
  .footer__news-col { padding-left: 36px; flex-basis: 300px; }
}

@media (max-width: 960px) {
  .header__nav { display: none; }
  .header__burger { display: inline-flex; }
  .header__inner { gap: 14px; }
  .header__brand { margin-right: auto; }

  .blog-hero__title  { font-size: 34px; }
  .feature-card      { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .feature-card__content { order: 2; }
  .feature-card__media   { order: 1; aspect-ratio: 16 / 9; }
  .feature-card__title   { font-size: 27px; }
  .feature-card__excerpt { max-width: none; }
  .feature-card__button  { width: 100%; }

  .blog-list__grid { grid-template-columns: repeat(2, 1fr); }

  .article__title, .prose__h2, .faq__heading, .related__heading { font-size: 30px; }
  .article__title { font-size: 34px; }
  .cta__title { font-size: 30px; }

  .footer__top { flex-wrap: wrap; gap: 32px; }
  .footer__brand-col { flex: 0 0 100%; }
  .footer__col--first { padding-left: 0; }
  .footer__col--first::before, .footer__news-col::before { display: none; }
  .footer__news-col { flex: 1 1 280px; margin-left: 0; padding-left: 0; }
}

@media (max-width: 640px) {
  .blog-hero { padding: 24px 14px 40px; }
  .blog-hero__title { font-size: 29px; }
  .blog-hero__text  { font-size: 13.5px; margin-bottom: 28px; }

  .blog-list { padding: 32px 14px 44px; }
  .blog-list__grid { grid-template-columns: 1fr; }
  .tab { min-width: 0; }

  .article__title { font-size: 28px; }
  .prose__h2 { font-size: 24px; margin-top: 26px; }
  .prose__h3 { font-size: 19px; }
  .prose { font-size: 15.5px; }
  .article__cover { aspect-ratio: 16 / 10; }
  .breadcrumb__current { max-width: 160px; }

  .faq__heading, .related__heading { font-size: 24px; }
  .related__grid { grid-template-columns: 1fr; }
  .post-nav { flex-direction: column; }
  .post-nav__btn { width: 100%; }

  .cta { padding: 42px 16px; }
  .cta__title { font-size: 26px; }

  /* Footer: hai cột link gập lại thành accordion */
  .footer__inner { padding: 36px 18px 24px; }
  .footer__disclaimer--desktop { display: none; }
  .footer__disclaimer--mobile  { display: block; margin-top: 26px; }

  .footer__col { flex: 0 0 100%; border-top: 1px solid rgba(255, 255, 255, .18); }
  .footer__title { margin: 0; }
  .footer__fold {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; cursor: pointer;
  }
  .footer__sign { display: block; position: relative; width: 12px; height: 12px; }
  .footer__sign::before, .footer__sign::after {
    content: ""; position: absolute; inset: 0; margin: auto; background: var(--white);
  }
  .footer__sign::before { width: 12px; height: 1.5px; }
  .footer__sign::after  { width: 1.5px; height: 12px; transition: transform .2s var(--ease); }
  .footer__col.is-open .footer__sign::after { transform: scaleY(0); }

  .js .footer__list { display: none; padding-bottom: 12px; }
  .js .footer__col.is-open .footer__list { display: block; }

  /* Màn nhỏ: hộp co sát mép, chữ gọn lại cho vừa một màn hình không phải cuộn.
     Phải viết .js .cookie cho khớp độ ưu tiên với khai báo ở block 12. */
  .js .cookie { padding: 16px; }
  .cookie__inner { gap: 16px; padding: 24px 20px 20px; }
  .cookie__title { font-size: 17px; }
}