/* =========================================================
   YTVN – Tư vấn doanh nghiệp | CSS riêng (ngoài Tailwind)
   1. Biến màu   2. Cổng hiệu ứng   3. Header & menu
   4. Hero       5. Thành phần      6. Bài viết
   7. Nút nổi    8. Giảm chuyển động
   ========================================================= */

/* ==================== 1. BIẾN MÀU ==================== */
:root {
  --navy-950: #071233;
  --navy-900: #0b1b4d;
  --brand: #2f62ff;
  --gold: #f2a922;
  --ink: #0e1530;
  --muted: #5b6478;
  --line: #e4e7ef;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 80px;
}

/* ==================== 2. CỔNG HIỆU ỨNG ====================
   .motion-ready do script đầu trang gắn khi người dùng không bật
   "giảm chuyển động". Nếu GSAP không tải được, lớp này bị gỡ sau 3s
   nên nội dung không bao giờ bị ẩn vĩnh viễn. */
.motion-ready [data-reveal],
.motion-ready [data-reveal-group] > *,
.motion-ready [data-hero-item] { opacity: 0; }
.motion-ready [data-hero-arc] { opacity: 0; }

/* Tách chữ cho hiệu ứng trồi lên theo từng từ (chừa chỗ cho dấu tiếng Việt) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .3em 0 .14em; margin: -.3em 0 -.14em; }
.w > span { display: inline-block; will-change: transform; }
/* hiệu ứng xong thì bỏ khung cắt để không bao giờ mất dấu chồng (ể, ễ, ầ) */
.w.is-done { overflow: visible; }
.w.is-done > span { will-change: auto; }

/* Class cỡ chữ của Tailwind (text-4xl, text-5xl…) kèm line-height 1 – 1.1: quá sát cho dấu tiếng Việt
   chồng nhau (ầ, ễ, ộ) và gạch chân. Đặt lại khoảng cách dòng cho tiêu đề lớn. */
.h-section { line-height: 1.3; }
.hero h1 { line-height: 1.36; }

/* Gạch chân vẽ tay dưới chữ nhấn. .hl có line-height 1 nên vị trí gạch tính theo chân chữ,
   không phụ thuộc khoảng cách dòng của tiêu đề: nằm dưới chân g, p, y và trên dấu của dòng kế. */
.hl { position: relative; display: inline-block; white-space: nowrap; line-height: 1; }
.hl svg { position: absolute; left: -1%; top: calc(100% + .06em); width: 102%; height: .16em; overflow: visible; pointer-events: none; }
.hl path { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; }

/* ==================== 3. HEADER & MENU ==================== */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .75rem 1.25rem; border-radius: 999px; background: var(--gold); color: var(--navy-950); font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; color: #fff; transition: background-color .4s var(--ease-out), box-shadow .4s, color .4s; }
.site-header .topbar { max-height: 40px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .12); transition: max-height .4s var(--ease-out), opacity .3s; }
.site-header .navbar-inner { height: var(--header-h); transition: height .4s var(--ease-out); }
.site-header.is-scrolled { background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 10px 30px -18px rgba(11, 27, 77, .35); }
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); }
}
.site-header.is-scrolled .topbar { max-height: 0; opacity: 0; border-color: transparent; }
.site-header.is-scrolled .navbar-inner { height: 68px; }
/* Logo: bản vàng trên nền tối, bản xanh khi header chuyển nền trắng */
.logo-swap img { transition: opacity .4s var(--ease-out); }
.logo-swap .logo-on-light, .site-header.is-scrolled .logo-on-dark { opacity: 0; }
.site-header.is-scrolled .logo-on-light { opacity: 1; }
.site-header .logo-sub { color: rgba(255, 255, 255, .7); }
.site-header.is-scrolled .logo-sub { color: var(--muted); }

.nav-link {
  font-family: Lexend, "Be Vietnam Pro", sans-serif;
  position: relative; display: inline-flex; align-items: center; gap: .4rem;
  padding: .75rem .9rem; font-size: .9rem; font-weight: 600; border-radius: 999px; transition: color .3s;
}
.nav-link::after {
  content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .35rem; height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current='page']::after, .nav-item:focus-within > .nav-link::after { transform: scaleX(1); transform-origin: left; }
.site-header.is-scrolled .nav-link[aria-current='page'] { color: var(--brand); }

.nav-item { position: relative; }
.nav-sub {
  position: absolute; left: 50%; top: 100%; min-width: 560px; padding-top: .75rem;
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .3s, transform .4s var(--ease-out), visibility .3s;
}
.nav-item:hover > .nav-sub, .nav-item:focus-within > .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-sub-inner { border-radius: 20px; background: #fff; color: var(--ink); padding: .75rem; box-shadow: 0 30px 70px -20px rgba(11, 27, 77, .35); }

/* .icon-btn (kích thước, display) nằm trong src/tailwind.css để xl:hidden còn tác dụng */
.icon-btn { border: 1px solid rgba(255, 255, 255, .3); transition: background-color .3s, border-color .3s, color .3s; }
.icon-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-950); }
.site-header.is-scrolled .icon-btn { border-color: var(--line); }

/* Danh sách chọn trong form nền tối: chữ của option phải tối để đọc được */
.field-dark option { color: var(--ink); }

/* Chuyển ngôn ngữ */
.lang-link { padding: .15rem .45rem; border-radius: 999px; font-weight: 700; transition: background-color .3s, color .3s; }
.lang-link:hover { color: var(--gold); }
.lang-link[aria-current='true'] { background: var(--gold); color: var(--navy-950); }
.lang-link-light { padding: .35rem .8rem; border: 1px solid var(--line); }
.lang-link-light:hover { color: var(--brand); }
.lang-link-light[aria-current='true'] { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
/* Tiếng Trung: Lexend/Be Vietnam Pro không có chữ Hán, dùng font hệ thống (không tải thêm) */
:lang(zh) body, :lang(zh) .font-display, :lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4, :lang(zh) dd, :lang(zh) .nav-link, :lang(zh) .big-num {
  font-family: Lexend, "Be Vietnam Pro", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
}
:lang(zh) .eyebrow { letter-spacing: .12em; }

/* Menu di động + ô tìm kiếm (lớp phủ) */
.overlay { position: fixed; inset: 0; z-index: 80; }
.overlay[hidden] { display: none; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(7, 18, 51, .6); backdrop-filter: blur(4px); animation: fadeIn .3s both; }
.mobile-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, 88vw); overflow-y: auto;
  background: #fff; color: var(--ink); animation: slideIn .45s var(--ease-out) both;
}
.mobile-panel details > summary { list-style: none; cursor: pointer; }
.mobile-panel details > summary::-webkit-details-marker { display: none; }
.mobile-panel details[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.search-panel { position: relative; margin: 14vh auto 0; width: min(720px, 92vw); animation: dropIn .45s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideIn { from { transform: translateX(100%); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-24px); } }

/* ==================== 4. HERO ==================== */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-950); color: #fff; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(7, 18, 51, .96) 0%, rgba(11, 27, 77, .86) 45%, rgba(11, 27, 77, .35) 100%);
}
/* Đường cong đáy hero giống mẫu corporation */
.hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; color: #fff; }
.hero-curve.to-cream { color: #f6f4ee; }
.hero-arc { position: absolute; right: -6%; top: 8%; width: 58%; max-width: 760px; z-index: -1; pointer-events: none; }
.hero-arc path { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: .55; }
.grid-lines {
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ==================== 5. THÀNH PHẦN ==================== */
.parallax { overflow: hidden; }
.parallax img { height: 115%; width: 100%; object-fit: cover; }

.big-num { font-family: Lexend, "Be Vietnam Pro", sans-serif; font-size: clamp(5rem, 12vw, 9.5rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; }
.num-outline { color: transparent; -webkit-text-stroke: 1.5px var(--gold); }

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.process-line { transform-origin: left center; }
.bar-fill { transform-origin: left center; }

.tab-btn[aria-selected='true'] { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-icon { transition: transform .4s var(--ease-out), background-color .3s; }
.faq details[open] summary .faq-icon { transform: rotate(45deg); background: var(--gold); color: var(--navy-950); }
.faq details[open] { border-color: var(--brand); }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 20px); opacity: 0;
  max-width: calc(100vw - 32px); padding: .9rem 1.4rem; border-radius: 14px; background: var(--navy-900); color: #fff;
  font-size: .9rem; font-weight: 600; box-shadow: 0 20px 50px -15px rgba(7, 18, 51, .5); transition: opacity .3s, transform .4s var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==================== 6. BÀI VIẾT ==================== */
.prose-article { color: #2a3247; font-size: 1.0625rem; line-height: 1.85; }
.prose-article > * + * { margin-top: 1.25em; }
.prose-article h2 { margin-top: 2.2em; font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.prose-article h3 { margin-top: 1.8em; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.prose-article ul, .prose-article ol { padding-left: 1.4em; }
.prose-article ul { list-style: disc; }
.prose-article ol { list-style: decimal; }
.prose-article li + li { margin-top: .5em; }
.prose-article li::marker { color: var(--brand); font-weight: 700; }
.prose-article a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose-article blockquote { border-left: 4px solid var(--gold); background: #f6f4ee; padding: 1.25rem 1.5rem; border-radius: 0 14px 14px 0; font-weight: 600; color: var(--ink); }
.prose-article figure img { border-radius: 18px; }
.prose-article figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); text-align: center; }
.prose-article table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose-article th, .prose-article td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; }
.prose-article th { background: #eef3ff; color: var(--ink); }
.reading-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left center; }
.toc a[aria-current='true'] { color: var(--brand); font-weight: 700; }

/* ==================== 7. NÚT NỔI ==================== */
.float-btn {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px;
  box-shadow: 0 12px 30px -8px rgba(7, 18, 51, .45); transition: transform .3s var(--ease-out);
}
.float-btn:hover { transform: translateY(-3px) scale(1.04); }
.float-btn.ring-pulse { position: relative; }
/* Nhãn số điện thoại hiện bên trái nút khi rê chuột / focus */
.float-btn[data-label] { position: relative; }
.float-btn[data-label]::after {
  content: attr(data-label); position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(8px, -50%);
  white-space: nowrap; padding: .5rem .9rem; border-radius: 999px; background: var(--navy-900); color: #fff;
  font-size: .8rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out);
}
.float-btn[data-label]:hover::after, .float-btn[data-label]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.float-btn.ring-pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--gold); animation: ringPulse 2s ease-out infinite;
}
@keyframes ringPulse { to { transform: scale(1.6); opacity: 0; } }
.to-top { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .4s var(--ease-out), visibility .3s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ==================== 8. GIẢM CHUYỂN ĐỘNG ==================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; }
}