/* YUME HOLDINGS — bảng màu lấy sắc đỏ chung của hai lá cờ Nhật & Việt,
   nền giấy washi, chữ xanh chàm (藍). */

:root {
  --ink:          #1a2234;
  --navy:         #1f3058;
  --navy-deep:    #152242;
  --accent:       #26457f;
  --accent-ink:   #1a3160;
  --gold:         #c8a24c;
  --gold-deep:    #a9843a;
  --logo-primary: #1f3058;
  --bg:           #ffffff;
  --bg-alt:       #f6f6f3;
  --surface:      #ffffff;
  --line:         #e3e2dc;
  --muted:        #5b6473;
  --on-navy:      #eef1f6;
  --radius:       3px;
  --wrap:         1140px;
  --narrow:       760px;
  --step:         clamp(3rem, 7vw, 5.5rem);
  /* Be Vietnam Pro lo phần Latin/tiếng Việt, Noto Sans JP đỡ phần chữ Nhật:
     trình duyệt tự rơi xuống font sau cho từng ký tự mà font trước không có. */
  --font: "Be Vietnam Pro", "Noto Sans JP", "Hiragino Sans",
          "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", serif;
  --pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:          #e8ecf3;
    --navy:         #1b2b4a;
    --navy-deep:    #0d1526;
    --accent:       #8fb0e0;
    --accent-ink:   #b4ccee;
    --gold:         #d4b062;
    --gold-deep:    #c8a24c;
    --logo-primary: #cdd8ea;
    --bg:           #0e1726;
    --bg-alt:       #131d2f;
    --surface:      #162135;
    --line:         #26344a;
    --muted:        #9aa6b8;
    --on-navy:      #e8ecf3;
  }
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.85;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.4; letter-spacing: .01em; margin: 0; font-weight: 700; }
p { margin: 0 0 1.2em; }
a { color: var(--accent); text-underline-offset: .22em; }
a:hover { color: var(--accent-ink); }
img { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; width: 100%; }

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

/* Mọi mục dùng CHUNG một khung, nên lề trái của cả trang luôn trùng nhau.
   .narrow không thu hẹp khung nữa — nó chỉ giới hạn bề ngang từng khối con
   để dòng chữ không dài quá sức đọc. Trước đây .narrow tự căn giữa màn hình
   nên lề trái nhảy 190px giữa các mục. */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow > * { max-width: var(--narrow); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .7rem 1.2rem;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; margin-right: auto; }
/* logo mới nằm ngang (tỉ lệ ~1,45:1) nên cần rộng hơn bản chữ Y cũ */
.logo { flex: none; width: 50px; height: auto; display: block; }

.logo-a { fill: var(--logo-primary); }
.logo-b { fill: var(--gold); }
.site-footer .logo { width: 46px; }
.site-footer .logo-a { fill: #ffffff; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: .06em; white-space: nowrap; }
.brand-sub { font-size: .66rem; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; background: none;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 500;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--gold); }
.site-nav .is-active a { border-bottom-color: var(--accent); color: var(--accent); }

.lang-switch { display: flex; gap: .1rem; align-items: center; }
.lang-switch .lang {
  font-size: .72rem; padding: .3rem .7rem; text-decoration: none;
  color: var(--muted); border-radius: var(--pill); white-space: nowrap;
}
.lang-switch .lang:hover { background: var(--bg-alt); color: var(--ink); }
.lang-switch .is-active { background: var(--navy); color: var(--on-navy); font-weight: 500; }

/* ---------- hero ---------- */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(60rem 28rem at 88% -12%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-alt), var(--bg));
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  font-weight: 800; font-size: clamp(2rem, 5.4vw, 3.5rem); line-height: 1.22;
  letter-spacing: .005em; max-width: 22ch;
}
.hero h1::after {
  content: ""; display: block; width: 64px; height: 3px;
  background: var(--gold); margin-top: 1.6rem;
}
.hero-text { margin-top: 1.6rem; max-width: 52ch; color: var(--muted); font-size: 1.02rem; }
.eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .9rem;
}

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.btn {
  display: inline-block; padding: .85rem 1.9rem; border-radius: var(--pill);
  font-size: .88rem; font-weight: 500; text-decoration: none; border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- sections ---------- */

.section { padding: var(--step) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section-title { font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin-bottom: 2.2rem; }
.section-title::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--gold); margin-right: .7rem; vertical-align: .08em;
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head .section-title { margin-bottom: 2.2rem; }
.more { font-size: .82rem; text-decoration: none; white-space: nowrap; }
.more::after { content: " →"; }

.page-head { padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem); background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
.lead { margin-top: 1.1rem; max-width: 60ch; color: var(--muted); }

.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 2rem 1.7rem; position: relative;
}
.card-num { font-size: .72rem; letter-spacing: .16em; color: var(--gold); font-weight: 700; }
.card h3 { font-size: 1.08rem; margin: .7rem 0 .8rem; }
.card p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- about ---------- */

.prose { color: var(--ink); }
.prose p { max-width: 68ch; }
.table-wrap { overflow-x: auto; }
.profile { font-size: .93rem; }
.profile th, .profile td { text-align: left; padding: 1rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.profile th { width: 11rem; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* ---------- services ---------- */

.service { display: flex; gap: 2rem; padding: 2.4rem 0; border-bottom: 1px solid var(--line); }
.service:last-child { border-bottom: none; }
.service-index { font-size: 1.5rem; font-weight: 700; color: var(--gold); flex: none; line-height: 1.3; }
.service h2 { font-size: 1.22rem; margin-bottom: .5rem; }
.service-summary { color: var(--accent); font-size: .9rem; margin-bottom: 1rem; }

/* ---------- news / holidays ---------- */

.upcoming {
  background: var(--navy); color: var(--on-navy); padding: 1.8rem;
  border-radius: var(--radius); margin-bottom: 3rem;
}
.upcoming-label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .75; margin: 0 0 .5rem; }
.upcoming-date { font-size: 1.4rem; font-weight: 700; margin: 0 0 .25rem; }
.upcoming-name { margin: 0 0 .5rem; }
.upcoming-left { margin: 0; font-size: .85rem; opacity: .8; }

.holidays { font-size: .93rem; margin-bottom: 3.5rem; }
.holidays th { text-align: left; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: .6rem .4rem; border-bottom: 2px solid var(--line); }
.holidays td { padding: .85rem .4rem; border-bottom: 1px solid var(--line); }
.hday-date { white-space: nowrap; width: 16rem; font-variant-numeric: tabular-nums; }
.holidays tr.is-past { opacity: .42; }
.holidays tr.is-next td { background: color-mix(in srgb, var(--gold) 14%, transparent); font-weight: 500; }

.holiday-preview { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.holiday-preview li { display: flex; gap: 1.5rem; padding: 1rem .2rem; border-bottom: 1px solid var(--line); font-size: .93rem; }
.holiday-preview time { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 14rem; }

/* ---------- blog ---------- */

.post-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .2s; }
.post-card:hover { border-color: var(--accent); }
.post-card a { display: block; padding: 1.8rem 1.6rem; text-decoration: none; color: inherit; height: 100%; }
.post-card time { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
.post-card h3 { font-size: 1.05rem; margin: .6rem 0 .7rem; }
.post-card p { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { font-size: .68rem; padding: .22rem .6rem; background: var(--bg-alt); color: var(--muted); border-radius: var(--pill); border: 1px solid var(--line); }

.article-head { padding: clamp(3rem, 7vw, 4.5rem) 0 2rem; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.article-head h1 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); margin-bottom: 1rem; }
.article-body { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.article-body h2 { font-size: 1.3rem; margin: 2.6rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.article-body h3 { font-size: 1.08rem; margin: 2rem 0 .7rem; }
.article-body ul, .article-body ol { padding-left: 1.3rem; margin: 0 0 1.3rem; }
.article-body li { margin-bottom: .45rem; }
.article-body blockquote { margin: 1.8rem 0; padding: .3rem 0 .3rem 1.4rem; border-left: 3px solid var(--accent); color: var(--muted); }
.article-body blockquote p { margin: 0; }
.article-body code { background: var(--bg-alt); padding: .12em .4em; border-radius: 2px; font-size: .88em; }
.article-body pre { background: var(--navy-deep); color: #dde5f2; padding: 1.2rem; border-radius: var(--radius); overflow-x: auto; }
.article-body pre code { background: none; padding: 0; color: inherit; }
.article-body hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.back { display: inline-block; padding-bottom: 3rem; font-size: .88rem; text-decoration: none; }

/* ---------- contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3.5rem; align-items: start; }
.field { margin-bottom: 1.4rem; }
.field label { display: block; font-size: .83rem; font-weight: 500; margin-bottom: .45rem; }
.req, .opt { font-size: .68rem; font-weight: 400; padding: .1rem .45rem; border-radius: 2px; margin-left: .35rem; }
.req { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); }
.opt { background: var(--bg-alt); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .85rem; font: inherit; font-size: .93rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.field textarea { resize: vertical; min-height: 9rem; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; font-size: .9rem; min-height: 1.4em; }
.form-status.is-ok { color: #1f7a4d; }
.form-status.is-err { color: var(--accent); }

.contact-aside { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
.contact-aside h2 { font-size: 1rem; margin-bottom: 1rem; }
.mail { font-size: 1.02rem; word-break: break-all; }
.notice { font-size: .85rem; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: .8rem; border-radius: var(--radius); margin-top: 1rem; }

/* ---------- cta ---------- */

.cta { background: var(--navy); color: var(--on-navy); padding: var(--step) 0; text-align: center; }
.cta h2 { font-size: clamp(1.25rem, 3vw, 1.8rem); margin-bottom: .8rem; }
.cta p { color: color-mix(in srgb, var(--on-navy) 75%, transparent); margin-bottom: 2rem; }

/* ---------- footer ---------- */

.site-footer { background: var(--navy-deep); color: var(--on-navy); padding: var(--step) 0 2rem; font-size: .88rem; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-brand { display: flex; gap: .9rem; align-items: flex-start; }
.footer-name { font-weight: 700; margin: 0 0 .3rem; }
.footer-tagline { color: color-mix(in srgb, var(--on-navy) 62%, transparent); font-size: .8rem; margin: 0; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-nav a, .footer-contact a { color: var(--on-navy); text-decoration: none; opacity: .82; }
.footer-nav a:hover, .footer-contact a:hover { opacity: 1; color: var(--on-navy); text-decoration: underline; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--on-navy) 16%, transparent);
  padding-top: 1.5rem; font-size: .76rem;
  color: color-mix(in srgb, var(--on-navy) 62%, transparent);
}
.footer-bottom p { margin: 0; }
.lang-switch--footer .lang { color: color-mix(in srgb, var(--on-navy) 70%, transparent); }
.lang-switch--footer .lang:hover { background: color-mix(in srgb, var(--on-navy) 12%, transparent); color: var(--on-navy); }
.lang-switch--footer .is-active { background: color-mix(in srgb, var(--on-navy) 18%, transparent); color: var(--on-navy); }

.plain-links { list-style: none; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---------- responsive ---------- */

/* Menu thu ve nut bam tu 900px chu khong phai 760px: nhan tieng Nhat
   (お問い合わせ, 会社概要) rong hon han, o 768px chung bi cat doi dong. */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem 1.5rem; display: none;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav a { display: block; padding: .95rem 0; border-bottom: none; font-size: .95rem; }
  .site-nav .is-active a { border-bottom: none; }
  .lang-switch { margin-top: 1.2rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .service { flex-direction: column; gap: .5rem; }
  .profile th { width: auto; display: block; border-bottom: none; padding-bottom: 0; }
  .profile td { display: block; padding-top: .2rem; }
  .hday-date { width: auto; }
  .holiday-preview li { flex-direction: column; gap: .15rem; }
  .holiday-preview time { min-width: 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- landing page ---------- */

/* header dính ở trên, nếu không chừa chỗ thì anchor sẽ nhảy vào dưới header */
section[id] { scroll-margin-top: 84px; }

.product-name {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700;
  color: var(--logo-primary); letter-spacing: .01em; margin: -1rem 0 .8rem;
}
.sub-title { font-size: 1rem; margin: 2.8rem 0 .9rem; color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase; font-size: .76rem; }
.sub-title:first-of-type { margin-top: 2.2rem; }


#services .service h3 { font-size: 1.15rem; margin-bottom: .5rem; }
#services .lead { margin-bottom: 1rem; }
#news .holidays { margin-bottom: 0; }
#news .upcoming { margin-top: 2rem; }

/* trang chỉ có một màn: footer không cần ba cột rộng */
@media (min-width: 901px) {
  .footer-inner { grid-template-columns: 1.6fr 1fr 1fr; }
}


/* ---------- hiệu ứng nền đổi theo mùa ---------- */
/* Xuân hoa anh đào · Hè pháo hoa · Thu lá đỏ · Đông bông tuyết.
   Phần tử do main.js dựng lúc chạy, nên sang mùa là tự đổi. */

.floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floats span {
  position: absolute; top: 0; left: 0;
  width: calc(var(--s, 20) * 1px); height: auto;
  opacity: 0; will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.floats span svg { display: block; width: 100%; height: auto; }

/* rơi xuống kèm đung đưa; delay âm đặt inline nên lúc tải trang đã rơi dở */
@keyframes seasonFall {
  0%   { transform: translate(0, -80px) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--op, .38); }
  25%  { transform: translate(var(--dx, 26px), 180px) rotate(90deg); }
  50%  { transform: translate(0, 380px) rotate(180deg); }
  75%  { transform: translate(calc(var(--dx, 26px) * -1), 570px) rotate(270deg); }
  90%  { opacity: var(--op, .38); }
  100% { transform: translate(0, 780px) rotate(360deg); opacity: 0; }
}

/* pháo hoa nở tại chỗ rồi tắt */
@keyframes seasonBurst {
  0%   { transform: scale(.15); opacity: 0; }
  20%  { opacity: var(--op, .5); }
  65%  { transform: scale(1.1);  opacity: var(--op, .5); }
  100% { transform: scale(1.55); opacity: 0; }
}

.floats .s-spring svg { fill: #e58aa8; }
.floats .s-autumn svg { fill: #c0462c; }
.floats .s-autumn:nth-child(3n) svg { fill: #d4802c; }
.floats .s-autumn:nth-child(4n) svg { fill: #b8912f; }
.floats .s-winter svg { fill: none; stroke: #7fa8cc; stroke-width: 1.5; stroke-linecap: round; }
.floats .s-summer svg { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; }
.floats .s-summer:nth-child(2n) svg { stroke: #26457f; }
.floats .s-summer:nth-child(3n) svg { stroke: #c0462c; }

/* ---------- hiện dần khi cuộn tới ---------- */

/* Chỉ ẩn khi JS đã chạy. Thiếu JS thì mọi thứ hiện bình thường,
   không bao giờ có chuyện nội dung kẹt ở opacity 0. */
.js .rv {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.215, .61, .355, 1),
              transform .5s cubic-bezier(.215, .61, .355, 1);
}
.js .rv.in { opacity: 1; transform: none; }

.js .grid .rv:nth-child(2),
.js .stats .rv:nth-child(2) { transition-delay: .07s; }
.js .grid .rv:nth-child(3),
.js .stats .rv:nth-child(3) { transition-delay: .14s; }
.js .grid .rv:nth-child(4),
.js .stats .rv:nth-child(4) { transition-delay: .21s; }
.js .hero .wrap > .rv:nth-child(2) { transition-delay: .08s; }
.js .hero .wrap > .rv:nth-child(3) { transition-delay: .16s; }
.js .service.rv:nth-of-type(2) { transition-delay: .07s; }
.js .service.rv:nth-of-type(3) { transition-delay: .14s; }
.js .service.rv:nth-of-type(4) { transition-delay: .21s; }

/* ---------- dãy số của YUME Plus ---------- */

.stats {
  display: flex; flex-wrap: wrap; gap: .7rem;
  list-style: none; padding: 0; margin: 2.8rem 0 0;
}
.stats li {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 1.3rem; min-width: 8.5rem;
  backdrop-filter: blur(4px);
}
.stat-value {
  display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.2;
  color: var(--logo-primary); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.stat-label { display: block; font-size: .74rem; color: var(--muted); margin-top: .2rem; }

@media (max-width: 560px) {
  .stats li { flex: 1 1 calc(50% - .35rem); min-width: 0; padding: .8rem 1rem; }
  .stat-value { font-size: 1.3rem; }
}

/* ---------- ai tắt hiệu ứng chuyển động thì bỏ hết ---------- */

@media (prefers-reduced-motion: reduce) {
  .floats { display: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
}


/* Màn hình hẹp: hiệu ứng nền thu nhỏ và bớt số lượng để không che nội dung.
   Tiêu đề cũng thu nhỏ để không rơi chữ lẻ xuống dòng. */
@media (max-width: 760px) {
  .floats span { width: calc(var(--s, 20) * .62px); }
  .floats span:nth-child(n + 11) { display: none; }
  .floats { opacity: .7; }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
}

/* ô kiểm tra Turnstile */
.cf-turnstile { margin: 0 0 1.2rem; min-height: 65px; }

/* bộ hình dùng chung cho hiệu ứng mùa, không chiếm chỗ trên trang */
.season-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


.hero .eyebrow { color: var(--gold-deep); font-weight: 600; }



/* ---------- vùng chạm trên thiết bị cảm ứng ---------- */
/* Dùng pointer: coarse thay cho bề rộng màn hình — tablet có bàn phím vẫn là
   màn cảm ứng, còn màn hình hẹp trên máy tính thì không cần vùng chạm to. */

@media (pointer: coarse) {
  .footer-nav a,
  .footer-contact a,
  .footer-legal,
  .contact-aside .mail,
  .policy-contact a,
  .profile a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer-nav ul { gap: 0; }
  .lang-switch .lang { min-height: 44px; display: inline-flex; align-items: center; padding: .4rem .85rem; }
  .brand { min-height: 44px; }
}

/* ---------- trang chính sách bảo mật ---------- */

.policy-date { font-size: .8rem; color: var(--muted); margin-top: 1rem; }

.policy-list { counter-reset: p; list-style: none; padding: 0; margin: 0 0 1rem; }
.policy-list li {
  position: relative; padding-left: 2.4rem; margin-bottom: 1.1rem;
  max-width: 68ch; color: var(--ink);
}
.policy-list li::before {
  counter-increment: p; content: counter(p, lower-alpha) ")";
  position: absolute; left: 0; top: 0;
  color: var(--gold-deep); font-weight: 700; font-variant-numeric: tabular-nums;
}

.policy-sec { margin-bottom: 2.6rem; }
.policy-sec:last-child { margin-bottom: 0; }
.policy-h { font-size: 1.05rem; margin: 0 0 .9rem; }
.policy-sec h4 {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 1.5rem 0 .4rem;
}
.policy-sec p { max-width: 68ch; }
.policy-sec ul { padding-left: 1.2rem; margin: 0 0 1.2rem; max-width: 68ch; }
.policy-sec li { margin-bottom: .4rem; }

.table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
.policy-table { font-size: .9rem; min-width: 30rem; }
.policy-table th, .policy-table td {
  text-align: left; padding: .75rem .9rem .75rem 0; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.policy-table thead th {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; border-bottom: 2px solid var(--line);
}

.policy-contact { font-style: normal; line-height: 2; }

.footer-legal { color: var(--on-navy); opacity: .8; text-decoration: none; font-size: .76rem; }
.footer-legal:hover { opacity: 1; color: var(--on-navy); text-decoration: underline; }

@media (max-width: 560px) {
  .policy-table { min-width: 22rem; }
  .footer-bottom { gap: .6rem; }
}