/* ==========================================================================
   Thủy Lộc Corp — main.css
   Màu theo logo: xanh dương #0569B7 · navy #2E4895 · than chì #343434
   ========================================================================== */

:root {
	--blue: #0569b7;
	--blue-600: #04589a;
	--blue-700: #03467c;
	--sky: #3ea2ee;
	--sky-50: #eaf4fd;
	--navy: #2e4895;
	--deep: #06264d;
	--deep-2: #0a3a72;
	--ink: #2b2f36;
	--ink-2: #343434;
	--muted: #5d6b7c;
	--line: #e2e9f2;
	--soft: #f3f7fc;
	--white: #fff;
	--ok: #16a34a;
	--err: #dc2626;
	--radius: 14px;
	--radius-lg: 22px;
	--shadow-sm: 0 2px 8px rgba(6, 38, 77, .06);
	--shadow: 0 10px 30px rgba(6, 38, 77, .10);
	--shadow-lg: 0 24px 60px rgba(6, 38, 77, .18);
	--grad: linear-gradient(135deg, #0a7fd6 0%, #0569b7 45%, #2e4895 100%);
	--grad-deep: linear-gradient(135deg, #06264d 0%, #0a3a72 55%, #0569b7 100%);
	--font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--header-h: 84px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
.site-main, .site-footer { overflow-x: clip; }
img { height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--blue-700); }
h1, h2, h3, h4 { color: var(--ink-2); line-height: 1.25; margin: 0 0 .6em; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding-left: 1.2em; }
.screen-reader-text, .hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: #fff; padding: 8px 16px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid rgba(62, 162, 238, .55); outline-offset: 2px; }

.tl-ic { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.container { width: min(1240px, 100% - 40px); margin-inline: auto; }
.container--narrow { width: min(860px, 100% - 40px); }
.center { text-align: center; }
.mt-40 { margin-top: 40px; }
.pt-0 { padding-top: 0 !important; }

/* ---------- Buttons ---------- */
.btn { --b: var(--blue); display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: 13px 24px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s; position: relative; overflow: hidden; white-space: nowrap; }
.btn .tl-ic { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.btn:hover::after { transform: translateX(120%); }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(5, 105, 183, .28); }
.btn--primary:hover { color: #fff; box-shadow: 0 12px 28px rgba(5, 105, 183, .38); }
.btn--accent { background: linear-gradient(135deg, #5ab8ff, #1d8be0); color: #fff; box-shadow: 0 10px 26px rgba(62, 162, 238, .45); }
.btn--accent:hover { color: #fff; }
.btn--outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn--outline:hover { background: var(--blue); color: #fff; }
.btn--white { background: #fff; color: var(--blue); box-shadow: var(--shadow); }
.btn--white:hover { color: var(--blue-700); }
.btn--ghost-light { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(4px); }
.btn--ghost-light:hover { background: #fff; color: var(--blue); border-color: #fff; }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--pulse { animation: pulse-ring 2.2s infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* ---------- Eyebrow & section heads ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--light { color: #9fd3ff; }
.sec-head { max-width: 760px; margin: 0 auto 48px; }
.sec-head--center { text-align: center; }
.sec-head--center .eyebrow::after { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.sec-head--left { margin-left: 0; margin-bottom: 24px; }
.sec-title { font-size: clamp(26px, 3.2vw, 40px); }
.sec-title .hl, .hero__title .hl { background: linear-gradient(90deg, #5ab8ff, #9fd8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-title .hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.sec-desc { color: var(--muted); font-size: 17px; }
.sec-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; }
.sec-row .sec-head { margin-bottom: 0; }

.section { padding: 96px 0; position: relative; }
.section--soft { background: var(--soft); }
.section--dark { background: var(--grad-deep); color: #d6e6f7; overflow: hidden; }
.section--dark .sec-title, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: #9fd3ff; }
.section--dark .sec-desc { color: #b8cde4; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 32px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--sky-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230569b7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
.checklist--light li { color: #e3effb; }
.checklist--light li::before { background-color: rgba(255,255,255,.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E"); }
.checklist--grid { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.checklist--sm { font-size: 14.5px; gap: 8px; }
.checklist--sm li { padding-left: 28px; }
.checklist--sm li::before { width: 19px; height: 19px; background-size: 12px; }
.checklist--lg li { padding: 14px 18px 14px 54px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-weight: 500; transition: transform .25s, box-shadow .25s, border-color .25s; }
.checklist--lg li::before { left: 18px; top: 15px; }
.checklist--lg li:hover { transform: translateX(6px); border-color: #b9d8f3; box-shadow: var(--shadow-sm); }

/* ---------- Swoosh (họa tiết logo) ---------- */
.swoosh { position: absolute; pointer-events: none; color: #fff; }
.swoosh path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 3s var(--ease) .3s forwards; }
.swoosh .swoosh__p2 { animation-delay: .7s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--sky), var(--blue), var(--navy)); transform-origin: 0 50%; transform: scaleX(0); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 900; transition: transform .35s var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }
.topbar { background: var(--deep); color: #bcd3ea; font-size: 13.5px; transition: margin .3s; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 22px; }
.topbar span, .topbar a { display: inline-flex; align-items: center; gap: 7px; color: #bcd3ea; }
.topbar a:hover { color: #fff; }
.topbar .tl-ic { width: 15px; height: 15px; color: var(--sky); }
.topbar__soc .tl-ic { color: #bcd3ea; }
.navbar { background: rgba(255,255,255,.96); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid rgba(226,233,242,.8); transition: box-shadow .3s, background .3s; }
.site-header.is-scrolled .navbar { box-shadow: 0 8px 30px rgba(6,38,77,.10); }
.navbar__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); transition: height .3s; }
.site-header.is-scrolled .navbar__inner { height: 70px; }
.brand img { height: 58px; width: auto; transition: height .3s; }
.site-header.is-scrolled .brand img { height: 48px; }
.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav__head, .main-nav__foot { display: none; }
.main-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.main-nav .menu > li { position: relative; }
.main-nav .menu > li > a { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-weight: 600; font-size: 15.5px; color: var(--ink-2); border-radius: 10px; position: relative; }
.main-nav .menu > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.main-nav .menu > li:hover > a, .main-nav .menu > li.current-menu-item > a, .main-nav .menu > li.current-menu-ancestor > a, .main-nav .menu > li.current_page_parent > a { color: var(--blue); }
.main-nav .menu > li:hover > a::after, .main-nav .menu > li.current-menu-item > a::after, .main-nav .menu > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.main-nav .menu-item-has-children > a::before { content: ""; order: 2; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); opacity: .7; }
.main-nav .sub-menu { list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s var(--ease); }
.main-nav .sub-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-menu a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--ink); font-weight: 500; font-size: 15px; transition: background .2s, color .2s, padding .2s; }
.main-nav .sub-menu a:hover, .main-nav .sub-menu .current-menu-item > a { background: var(--sky-50); color: var(--blue); padding-left: 20px; }
.main-nav .sub-menu .sub-menu { left: 100%; top: 0; }
.navbar__actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.hotline-chip { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.hotline-chip__ic { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; position: relative; }
.hotline-chip__ic::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(5,105,183,.35); animation: ripple 1.8s infinite; }
.hotline-chip__ic .tl-ic { width: 19px; height: 19px; animation: shake 2.4s infinite; }
.hotline-chip__txt { display: flex; flex-direction: column; line-height: 1.25; }
.hotline-chip__txt small { font-size: 12px; color: var(--muted); }
.hotline-chip__txt b { font-size: 17px; color: var(--blue); }
@keyframes ripple { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes shake { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-14deg); } 10%, 20% { transform: rotate(14deg); } }
.main-nav .sub-toggle { display: none; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--sky-50); cursor: pointer; padding: 12px 11px; flex-direction: column; justify-content: space-between; }
.nav-toggle span { display: block; height: 2px; background: var(--blue); border-radius: 2px; transition: transform .3s, opacity .3s; }
body.nav-open .site-header { z-index: 1002; transform: none; }
.nav-overlay { position: fixed; inset: 0; background: rgba(6,38,77,.5); z-index: 950; opacity: 0; transition: opacity .3s; }
.nav-overlay.is-on { opacity: 1; }

/* ==========================================================================
   Hero (trang chủ)
   ========================================================================== */
.hero { position: relative; background: var(--grad-deep); color: #fff; overflow: hidden; padding: 80px 0 110px; isolation: isolate; }
.hero__bg, .page-hero__bg { position: absolute; inset: -60px 0; background-size: cover; background-position: center; z-index: -2; will-change: transform; }
.hero.has-img::before, .page-hero.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(6,38,77,.95) 0%, rgba(10,58,114,.85) 50%, rgba(5,105,183,.55) 100%); }
.hero__shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: float 14s ease-in-out infinite; }
.hero__orb--1 { width: 460px; height: 460px; background: #1d8be0; right: -120px; top: -120px; }
.hero__orb--2 { width: 380px; height: 380px; background: #2e4895; left: -140px; bottom: -160px; animation-delay: -6s; }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, 40px); } }
.hero__swoosh { width: 720px; right: -140px; top: 50%; transform: translateY(-50%); opacity: .45; }
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-size: 14px; font-weight: 600; margin-bottom: 22px; backdrop-filter: blur(6px); }
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #5af0a5; box-shadow: 0 0 0 0 rgba(90,240,165,.7); animation: dot 1.8s infinite; }
@keyframes dot { 70% { box-shadow: 0 0 0 10px rgba(90,240,165,0); } 100% { box-shadow: 0 0 0 0 rgba(90,240,165,0); } }
.hero__title { color: #fff; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.15; margin-bottom: 20px; }
.hero__desc { font-size: 18px; color: #cfe1f3; max-width: 600px; }
.hero__points { margin: 24px 0 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__form { background: rgba(255,255,255,.98); color: var(--ink); border-radius: var(--radius-lg); padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.35); position: relative; }
.hero__form::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(90,184,255,.9), transparent 40%, transparent 60%, rgba(46,72,149,.8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.hero__scroll { position: absolute; left: 50%; bottom: 72px; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 20px; transform: translateX(-50%); }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: wheel 1.6s infinite; }
@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Hero slider ---------- */
.hero--slider { background: var(--deep); }
.hero__bgs { position: absolute; inset: 0; z-index: -2; }
.hero__bgl { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; overflow: hidden; }
.hero__bgl.is-active { opacity: 1; }
.hero__bgl--blue { background: linear-gradient(135deg, #06264d 0%, #0a3a72 55%, #0569b7 100%); }
.hero__bgl--navy { background: linear-gradient(135deg, #0b1d4a 0%, #2e4895 55%, #1d6fc2 100%); }
.hero__bgl--deep { background: linear-gradient(135deg, #041a35 0%, #082f5c 50%, #134f8f 100%); }
.hero__bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.12); transition: transform 8s linear; }
.hero__bgl.is-active .hero__bgimg { transform: scale(1); }
.hero__bgl.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(6,38,77,.95) 0%, rgba(10,58,114,.85) 50%, rgba(5,105,183,.55) 100%); }
.hero__slides { display: grid; }
.hero-slide { grid-area: 1 / 1; visibility: hidden; pointer-events: none; }
.hero-slide.is-active { visibility: visible; pointer-events: auto; }
.hero-slide .hs-in { opacity: 0; transform: translateY(28px); transition: opacity .5s ease, transform .6s var(--ease); }
.hero-slide.is-active .hs-in { opacity: 1; transform: none; transition: opacity .8s ease calc(var(--i) * 110ms + 150ms), transform .9s var(--ease) calc(var(--i) * 110ms + 150ms); }
.hero-slide.is-leaving { visibility: visible; }
.hero-slide.is-leaving .hs-in { opacity: 0; transform: translateY(-18px); }
.hero__ctrl { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.hero__arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .25s, border-color .25s, transform .25s; }
.hero__arrow:hover { background: #fff; color: var(--blue); border-color: #fff; }
.hero__arrow .tl-ic { width: 18px; height: 18px; }
.hero__prev .tl-ic { transform: rotate(180deg); }
.hero__dots { display: flex; gap: 8px; }
.hero__dot { width: 34px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.25); cursor: pointer; overflow: hidden; transition: width .4s var(--ease), background .3s; }
.hero__dot.is-active { width: 64px; }
.hero__dot span { display: block; height: 100%; width: 100%; background: #fff; border-radius: inherit; transform: scaleX(0); transform-origin: left; }
.hero__dot.is-active span { transform: scaleX(1); }
.hero--slider.is-playing .hero__dot.is-active span { animation: dotfill var(--dur, 7s) linear forwards; }
.hero--slider.is-paused .hero__dot.is-active span { animation-play-state: paused; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero visual (thay cho form) */
.hero--slider .hero__inner { grid-template-columns: 1.15fr .85fr; }
.hero--slider { padding: 90px 0 130px; }
.hero__visual { position: relative; height: 460px; display: grid; place-items: center; }
.hv-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.hv-ring--1 { width: 440px; height: 440px; animation: spinslow 40s linear infinite; border-style: dashed; }
.hv-ring--2 { width: 540px; height: 540px; border-color: rgba(255,255,255,.07); }
@keyframes spinslow { to { transform: rotate(360deg); } }
.hv-orb { position: relative; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2b9bf0 0%, #0569b7 45%, #2e4895 100%); box-shadow: 0 40px 90px rgba(0,0,0,.35), inset 0 -20px 50px rgba(0,0,0,.2), inset 0 10px 30px rgba(255,255,255,.25); display: grid; place-items: center; overflow: hidden; animation: bob 6s ease-in-out infinite; }
.hv-swoosh { inset: -10%; width: 120%; height: 120%; opacity: .35; }
.hv-icon { grid-area: 1 / 1; width: 130px; height: 130px; color: #fff; opacity: 0; transform: scale(.6) rotate(-15deg); transition: opacity .6s ease, transform .8s var(--ease); }
.hv-icon.is-active { opacity: 1; transform: none; transition-delay: .2s; }
.hv-icon .tl-ic { width: 100%; height: 100%; stroke-width: 1.2; }
.hv-chip { position: absolute; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.96); color: var(--ink-2); padding: 12px 18px; border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.25); font-weight: 700; font-size: 14.5px; animation: bob 5s ease-in-out infinite; }
.hv-chip .tl-ic { width: 22px; height: 22px; color: var(--blue); }
.hv-chip--1 { left: 0; top: 40px; flex-direction: column; align-items: flex-start; gap: 0; }
.hv-chip--1 b { font-size: 30px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv-chip--1 span { font-size: 13px; color: var(--muted); font-weight: 500; }
.hv-chip--2 { right: -10px; top: 150px; animation-delay: -1.5s; }
.hv-chip--3 { left: 30px; bottom: 30px; animation-delay: -3s; }

/* ---------- Stats ---------- */
.stats { position: relative; z-index: 2; margin-top: -54px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.stat { padding: 30px 20px; text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--line); }
.stat__num { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: flex; justify-content: center; align-items: baseline; gap: 2px; }
.stat__num em { font-style: normal; font-size: .7em; }
.stat__label { margin-top: 10px; color: var(--muted); font-weight: 500; font-size: 15px; }
.stats--flat { margin: 0; padding: 0 0 20px; }
.stats--standalone { padding: 64px 0; }
.stats--flat .stats__grid { box-shadow: var(--shadow); }

/* ---------- Quote section (home) ---------- */
.quote-home { background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); overflow: hidden; }
.quote-home__swoosh { width: 560px; color: var(--blue); right: -180px; bottom: -220px; opacity: .25; }
.quote-home__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; }
.quote-home__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.quote-home__list li { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--ink-2); }
.quote-home__n { width: 36px; height: 36px; border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; box-shadow: 0 8px 18px rgba(5,105,183,.25); }
.quote-home__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.quote-home__contact .btn .tl-ic-zalo { width: 26px; height: 26px; }
.quote-home__form { position: relative; border-top: 4px solid var(--blue); }
.quote-home__tag { position: absolute; top: -16px; right: 24px; display: inline-flex; align-items: center; gap: 6px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; box-shadow: 0 8px 18px rgba(5,105,183,.3); }
.quote-home__tag .tl-ic { width: 15px; height: 15px; }

/* ---------- About (home) ---------- */
.about-home__grid, .about-story__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.about-story__grid { grid-template-columns: 1.1fr .9fr; }
.about-home__media, .about-story__media { position: relative; }
.about-home__img, .about-story__img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.4; background: var(--soft); position: relative; z-index: 1; }
.about-home__img img, .about-story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.about-home__media:hover .about-home__img img { transform: scale(1.05); }
.about-home__ph { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #fff, var(--sky-50)); }
.about-home__ph img { width: 70%; height: auto !important; object-fit: contain !important; }
.about-home__badge { position: absolute; z-index: 2; right: -24px; bottom: 36px; background: var(--grad); color: #fff; border-radius: 18px; padding: 20px 24px; box-shadow: var(--shadow-lg); text-align: center; animation: bob 5s ease-in-out infinite; }
.about-home__badge b { display: block; font-size: 38px; line-height: 1; }
.about-home__badge span { font-size: 13.5px; opacity: .9; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.about-home__swoosh { width: 300px; color: var(--blue); left: -80px; bottom: -80px; opacity: .5; z-index: 0; }
.about-home__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 28px; }
.call-inline { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.call-inline > span:first-child { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-50); color: var(--blue); }
.call-inline small { display: block; color: var(--muted); font-size: 13px; line-height: 1.2; }
.call-inline b { font-size: 19px; color: var(--blue); }
.prose { color: #3e4752; }
.prose > *:last-child { margin-bottom: 0; }

/* ---------- Service cards ---------- */
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sv-grid--rows { grid-template-columns: repeat(2, 1fr); }
.sv-card { background: #fff; border-radius: var(--radius-lg); padding: 32px 28px 26px; border: 1px solid var(--line); position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; isolation: isolate; }
.sv-card::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .4s; z-index: -1; }
.sv-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%; border: 2px solid var(--sky-50); transition: border-color .4s, transform .6s var(--ease); z-index: -1; }
.sv-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.sv-card:hover::before { opacity: 1; }
.sv-card:hover::after { border-color: rgba(255,255,255,.18); transform: scale(1.4); }
.sv-card__icon { width: 64px; height: 64px; border-radius: 18px; background: var(--sky-50); color: var(--blue); display: grid; place-items: center; margin-bottom: 22px; transition: background .4s, color .4s, transform .5s var(--ease); }
.sv-card__icon .tl-ic { width: 32px; height: 32px; }
.sv-card:hover .sv-card__icon { background: rgba(255,255,255,.16); color: #fff; transform: rotate(-8deg) scale(1.05); }
.sv-card__title { font-size: 20px; margin-bottom: 10px; }
.sv-card__title a { color: var(--ink-2); }
.sv-card__desc { color: var(--muted); font-size: 15px; flex: 1; }
.sv-card .checklist { margin-top: 4px; }
.sv-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 18px; margin-top: 8px; border-top: 1px dashed var(--line); font-size: 14px; }
.sv-card__price { color: var(--muted); }
.sv-card__price b { color: var(--blue); }
.sv-card__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.sv-card__more .tl-ic { width: 16px; height: 16px; transition: transform .3s; }
.sv-card:hover .sv-card__title a, .sv-card:hover .sv-card__desc, .sv-card:hover .sv-card__price, .sv-card:hover .sv-card__price b, .sv-card:hover .sv-card__more, .sv-card:hover .checklist li { color: #fff; }
.sv-card:hover .sv-card__foot { border-color: rgba(255,255,255,.25); }
.sv-card:hover .sv-card__more .tl-ic { transform: translateX(5px); }
.sv-card:hover .checklist li::before { background-color: rgba(255,255,255,.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E"); }
.sv-card--row { padding: 30px; }
.sv-grid--3 { gap: 18px; }
.sv-grid--3 .sv-card { padding: 24px 20px 20px; }
.sv-grid--3 .sv-card__title { font-size: 17px; }
.sv-grid--3 .sv-card__foot { flex-wrap: wrap; }
.sv-card__more { white-space: nowrap; }
.contact-brand .checklist { margin-top: 18px; position: relative; }
.contact-brand__info { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; position: relative; }
.contact-brand__info li { display: flex; gap: 10px; }
.contact-brand__info .tl-ic { color: #9fd3ff; margin-top: 4px; }

/* ---------- Why ---------- */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card { padding: 30px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); position: relative; transition: transform .35s var(--ease), box-shadow .35s; overflow: hidden; }
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.why-card__num { position: absolute; right: 22px; top: 14px; font-size: 54px; font-weight: 800; line-height: 1; color: var(--sky-50); transition: color .35s; }
.why-card:hover .why-card__num { color: #d5e9fb; }
.why-card__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: #fff; margin-bottom: 18px; box-shadow: 0 10px 20px rgba(5,105,183,.25); position: relative; }
.why-card__icon .tl-ic { width: 28px; height: 28px; }
.why-card h3 { font-size: 19px; margin-bottom: 8px; }
.why-card p { color: var(--muted); margin: 0; font-size: 15px; }
.why__grid--dark .why-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); backdrop-filter: blur(4px); }
.why__grid--dark .why-card p { color: #b8cde4; }
.why__grid--dark .why-card__icon { background: rgba(255,255,255,.12); box-shadow: none; }

/* ---------- Process steps ---------- */
.process__swoosh { width: 620px; right: -160px; top: -120px; opacity: .25; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; counter-reset: s; }
.steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 36px; height: 2px; background: rgba(255,255,255,.15); }
.steps::after { content: ""; position: absolute; left: 12%; right: 12%; top: 36px; height: 2px; background: linear-gradient(90deg, #5ab8ff, #fff); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 1.6s var(--ease); }
.steps.is-in { --p: 1; }
.step { text-align: center; position: relative; z-index: 1; padding: 0 6px; }
.step__num { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #fff; background: var(--deep-2); border: 2px solid rgba(255,255,255,.25); box-shadow: 0 0 0 8px rgba(255,255,255,.04); transition: background .4s, transform .4s var(--ease); }
.step:hover .step__num { background: var(--blue); transform: scale(1.08); }
.step h3 { font-size: 18px; }
.step p { color: #b8cde4; font-size: 15px; margin: 0; }

/* ---------- Testimonials slider ---------- */
.slider { position: relative; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 52px) / 3); gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 20px; scroll-behavior: smooth; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; }
.slider__nav { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.slider__nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--blue); cursor: pointer; display: grid; place-items: center; transition: all .25s; }
.slider__nav button:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.slider__prev .tl-ic { transform: rotate(180deg); }
.testi-card { margin: 0; background: #fff; border-radius: var(--radius-lg); padding: 30px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); position: relative; display: flex; flex-direction: column; }
.testi-card__q { position: absolute; right: 24px; top: 22px; width: 40px; height: 40px; color: var(--sky-50); fill: var(--sky-50); }
.stars { display: flex; gap: 2px; color: #f5b301; margin-bottom: 14px; }
.stars .tl-ic { width: 17px; height: 17px; fill: currentColor; }
.testi-card blockquote { margin: 0 0 22px; color: #3e4752; font-size: 15.5px; flex: 1; }
.testi-card figcaption { display: flex; align-items: center; gap: 12px; }
.testi-card__ava { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; flex: 0 0 auto; }
.testi-card__ava img { width: 100%; height: 100%; object-fit: cover; }
.testi-card figcaption b { display: block; color: var(--ink-2); }
.testi-card figcaption small { color: var(--muted); font-size: 13.5px; }

/* ---------- Partners marquee ---------- */
.partners { padding: 10px 0 70px; }
.partners__title { text-align: center; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 60px; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; height: 64px; }
.marquee__item img { max-height: 54px; width: auto; filter: grayscale(1); opacity: .65; transition: filter .3s, opacity .3s; }
.marquee__item:hover img { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--grad); color: #fff; position: relative; overflow: hidden; padding: 64px 0; }
.cta-band__swoosh { width: 520px; left: -120px; top: -200px; opacity: .3; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 8px; }
.cta-band p { margin: 0; color: #dcecfb; max-width: 640px; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Post cards ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-grid--2 { grid-template-columns: repeat(2, 1fr); }
.post-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card__thumb { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post-card:hover .post-card__thumb img { transform: scale(1.07); }
.post-card__ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--grad); color: rgba(255,255,255,.45); }
.post-card__ph .tl-ic { width: 54px; height: 54px; }
.post-card__cat { position: absolute; left: 14px; top: 14px; background: rgba(255,255,255,.95); color: var(--blue); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.post-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.post-card__meta .tl-ic { width: 15px; height: 15px; color: var(--blue); }
.post-card__title { font-size: 18px; line-height: 1.4; margin-bottom: 10px; }
.post-card__title a { color: var(--ink-2); background: linear-gradient(var(--blue), var(--blue)) 0 100% / 0 2px no-repeat; transition: background-size .4s, color .3s; }
.post-card:hover .post-card__title a { color: var(--blue); background-size: 100% 2px; }
.post-card__excerpt { color: var(--muted); font-size: 15px; flex: 1; }
.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.link-more .tl-ic { width: 16px; height: 16px; transition: transform .3s; }
.link-more:hover .tl-ic { transform: translateX(4px); }
.post-card--big { display: grid; grid-template-columns: 1.15fr 1fr; }
.post-card--big .post-card__thumb { aspect-ratio: auto; min-height: 300px; }
.post-card--big .post-card__body { padding: 32px; justify-content: center; }
.post-card--big .post-card__title { font-size: 24px; }
.post-featured { margin-bottom: 26px; }

/* ---------- FAQ / Accordion ---------- */
.faq-home__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.accordion { display: grid; gap: 14px; }
.acc { background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: box-shadow .3s, border-color .3s; }
.acc[open] { box-shadow: var(--shadow); border-color: #c8def2; }
.acc summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.acc summary::-webkit-details-marker { display: none; }
.acc__ic { width: 32px; height: 32px; border-radius: 50%; background: var(--sky-50); color: var(--blue); display: grid; place-items: center; flex: 0 0 auto; transition: transform .35s var(--ease), background .3s, color .3s; }
.acc__ic .tl-ic { width: 18px; height: 18px; }
.acc[open] .acc__ic { transform: rotate(135deg); background: var(--blue); color: #fff; }
.acc__body { padding: 0 22px 18px; color: var(--muted); }
.acc[open] .acc__body { animation: accIn .4s var(--ease); }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } }

/* ==========================================================================
   Page hero (trang con)
   ========================================================================== */
.page-hero { position: relative; background: var(--grad-deep); color: #fff; padding: 64px 0 76px; overflow: hidden; isolation: isolate; }
.page-hero__swoosh { width: 560px; right: -100px; top: -140px; opacity: .35; }
.page-hero__inner { position: relative; }
.page-hero__title { color: #fff; font-size: clamp(28px, 3.8vw, 46px); max-width: 860px; margin-bottom: 14px; }
.page-hero__desc { color: #cfe1f3; font-size: 17.5px; max-width: 720px; margin-bottom: 0; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 18px; color: #cfe1f3; font-size: 14.5px; margin-top: 6px; }
.page-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.page-hero__meta .tl-ic { width: 16px; height: 16px; color: #9fd3ff; }
.breadcrumb ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; color: #9fc0e0; }
.breadcrumb li + li::before { content: "›"; opacity: .6; }
.breadcrumb a { color: #d6e6f7; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current] span { color: #fff; font-weight: 600; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.page-hero--post .page-hero__title { font-size: clamp(26px, 3.2vw, 40px); }

.sv-hero { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.sv-hero__icon { width: 70px; height: 70px; border-radius: 20px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); margin-bottom: 18px; color: #fff; }
.sv-hero__icon .tl-ic { width: 36px; height: 36px; }
.sv-hero__hl { margin: 22px 0 0; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 26px; }
.sv-hero__price { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-lg); padding: 28px 34px; text-align: center; backdrop-filter: blur(6px); min-width: 250px; }
.sv-hero__price small { display: block; color: #b8cde4; }
.sv-hero__price b { display: block; font-size: 34px; color: #fff; margin: 4px 0; }
.sv-hero__price span { font-size: 14px; color: #9fd3ff; }

/* ---------- Layout with sidebar ---------- */
.layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.sidebar { position: relative; }
.sidebar__sticky.is-sticky { position: sticky; top: 100px; }
.sb-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
.sb-title { font-size: 18px; margin-bottom: 14px; position: relative; padding-left: 14px; }
.sb-title::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: var(--grad); }
.sb-form { background: linear-gradient(180deg, var(--sky-50), #fff 50%); border-color: #cfe3f6; }
.sb-form__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.sb-form__head .sb-title { margin-bottom: 4px; padding-left: 0; }
.sb-form__head .sb-title::before { display: none; }
.sb-form__head p { margin: 0; font-size: 14px; color: var(--muted); }
.sb-form__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--grad); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.sb-services ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sb-services a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 15px; transition: background .25s, color .25s, padding .25s; }
.sb-services__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--sky-50); color: var(--blue); display: grid; place-items: center; flex: 0 0 auto; transition: background .25s, color .25s; }
.sb-services__ic .tl-ic { width: 19px; height: 19px; }
.sb-services__arr { margin-left: auto; width: 16px; height: 16px; opacity: .4; transition: transform .25s, opacity .25s; }
.sb-services a:hover, .sb-services .is-current a { background: var(--sky-50); color: var(--blue); }
.sb-services a:hover .sb-services__arr { transform: translateX(4px); opacity: 1; }
.sb-services .is-current .sb-services__ic { background: var(--blue); color: #fff; }
.sb-hotline { background: var(--grad); color: #fff; border: 0; text-align: center; position: relative; overflow: hidden; }
.sb-hotline__swoosh { width: 260px; right: -80px; top: -80px; opacity: .3; }
.sb-hotline h3 { color: #fff; font-size: 17px; margin-bottom: 8px; position: relative; }
.sb-hotline__num { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 26px; font-weight: 800; position: relative; }
.sb-hotline__num:hover { color: #fff; }
.sb-hotline__num .tl-ic { animation: shake 2.4s infinite; }
.sb-hotline__row { display: flex; justify-content: center; gap: 10px; margin-top: 14px; position: relative; }
.sb-hotline__row a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; font-weight: 600; font-size: 14px; }
.sb-hotline__row a:hover { background: #fff; color: var(--blue); }
.sb-recent__item { display: flex; gap: 12px; align-items: center; padding: 10px 0; color: var(--ink); }
.sb-recent__item + .sb-recent__item { border-top: 1px dashed var(--line); }
.sb-recent__thumb { width: 72px; height: 56px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; background: var(--grad); color: rgba(255,255,255,.6); display: grid; place-items: center; }
.sb-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-recent__item b { display: block; font-size: 14.5px; line-height: 1.4; font-weight: 600; transition: color .2s; }
.sb-recent__item small { color: var(--muted); font-size: 12.5px; }
.sb-recent__item:hover b { color: var(--blue); }

/* ---------- Entry content ---------- */
.entry { font-size: 16.5px; line-height: 1.8; }
.entry h2 { font-size: 26px; margin: 1.6em 0 .6em; padding-left: 16px; border-left: 4px solid var(--blue); }
.entry h3 { font-size: 21px; margin: 1.4em 0 .5em; }
.entry ul li::marker { color: var(--blue); }
.entry ul, .entry ol { margin: 0 0 1.2em; }
.entry li { margin-bottom: .4em; }
.entry img { border-radius: 14px; }
.entry blockquote { margin: 1.5em 0; padding: 18px 24px; background: var(--soft); border-left: 4px solid var(--blue); border-radius: 0 14px 14px 0; }
.entry table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; }
.entry th, .entry td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.entry th { background: var(--sky-50); color: var(--ink-2); }
.entry a { text-decoration: underline; text-underline-offset: 3px; }
.toc { background: var(--soft); border: 1px solid var(--line); border-radius: 16px; padding: 4px 22px; margin-bottom: 28px; }
.toc summary { cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink-2); padding: 14px 0; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .tl-ic { color: var(--blue); }
.toc ol { margin: 0 0 16px; padding-left: 22px; counter-reset: none; }
.toc li { margin: 6px 0; }
.toc .toc-l3 { margin-left: 18px; list-style: circle; font-size: 15px; }
.toc a { color: var(--ink); }
.toc a:hover, .toc a.is-active { color: var(--blue); font-weight: 600; }

.sv-block { margin-top: 56px; }
.sv-block__title { font-size: 26px; }
.pricing { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 20px; align-items: stretch; }
.pricing--1 { --cols: 1; max-width: 420px; }
.pricing--2 { --cols: 2; }
.price-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; background: #fff; position: relative; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.price-card.is-featured { border: 2px solid var(--blue); box-shadow: var(--shadow); }
.price-card__tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px; }
.price-card h3 { font-size: 18px; margin-bottom: 8px; }
.price-card__price { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.price-card__price b { font-size: 28px; color: var(--blue); }
.price-card__price span { color: var(--muted); font-size: 14px; }
.price-card .checklist { flex: 1; margin-bottom: 20px; }
.vsteps { list-style: none; padding: 0; margin: 0; position: relative; }
.vsteps::before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--blue), var(--sky-50)); }
.vsteps li { display: flex; gap: 20px; padding-bottom: 22px; position: relative; }
.vsteps__num { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue); font-weight: 800; font-size: 19px; display: grid; place-items: center; flex: 0 0 auto; position: relative; z-index: 1; transition: background .3s, color .3s; }
.vsteps li:hover .vsteps__num { background: var(--blue); color: #fff; }
.vsteps h3 { font-size: 18px; margin: 12px 0 4px; }
.vsteps p { color: var(--muted); margin: 0; }
.inline-cta { margin-top: 48px; background: var(--grad); color: #fff; border-radius: var(--radius-lg); padding: 30px 34px; display: flex; justify-content: space-between; align-items: center; gap: 24px; position: relative; overflow: hidden; }
.inline-cta__swoosh { width: 360px; right: -80px; top: -120px; opacity: .3; }
.inline-cta h3 { color: #fff; font-size: 21px; margin-bottom: 4px; }
.inline-cta p { margin: 0; color: #dcecfb; }
.inline-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }

/* ---------- Nội dung cũ từ Flatsome UX Builder ---------- */
.fs-section { margin: 0 0 1.4em; }
.fs-row { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 1.2em; }
.fs-col { flex: 1 1 calc(var(--span, 12) / 12 * 100% - 24px); min-width: min(100%, 240px); }
.fs-col > *:last-child, .fs-text > *:last-child { margin-bottom: 0; }
.fs-text { margin-bottom: 1em; }
.fs-gap { height: 12px; }
.fs-divider { border: 0; height: 2px; width: 60px; background: var(--blue); margin: 10px 0 18px; }
.fs-image { margin: 0 0 1.2em; }
.fs-image img, .fs-gallery img { border-radius: 14px; width: 100%; height: auto; }
.fs-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 1.2em; }
.fs-gallery figure { margin: 0; }
.fs-banner { background: var(--grad-deep) center/cover; border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 1.4em; position: relative; }
.fs-banner__inner { padding: 36px 32px; color: #fff; background: linear-gradient(90deg, rgba(6,38,77,.85), rgba(6,38,77,.45)); }
.fs-banner__inner h1, .fs-banner__inner h2, .fs-banner__inner h3, .fs-banner__inner h4 { color: #fff; border: 0; padding: 0; }
.fs-box { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; }
.fs-box img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.fs-box h4 { margin: 0 0 4px; }
.fs-note { padding: 16px 20px; background: var(--sky-50); border-left: 4px solid var(--blue); border-radius: 0 12px 12px 0; margin-bottom: 1.2em; }
.fs-tab h3 { margin-top: 1em; }
.fs-btn { margin: 4px 8px 12px 0; text-decoration: none !important; }
.fs-menu { display: grid; gap: 6px; margin-bottom: 1.2em; }
.fs-video { position: relative; aspect-ratio: 16/9; margin-bottom: 1.2em; }
.fs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; }
.entry .accordion { margin-bottom: 1.2em; }

/* ---------- Post detail ---------- */
.post-detail__thumb { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.post-detail__thumb img { width: 100%; }
.post-detail__lead { font-size: 18.5px; color: var(--ink-2); font-weight: 500; border-left: 4px solid var(--sky); padding-left: 18px; }
.post-detail__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); }
.tags a { background: var(--soft); padding: 4px 12px; border-radius: 999px; font-size: 13.5px; color: var(--ink); }
.tags a:hover { background: var(--blue); color: #fff; }
.share { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.share a, .share button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-50); color: var(--blue); border: 0; cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.share a:hover, .share button:hover { background: var(--blue); color: #fff; transform: translateY(-3px); }
.share .tl-ic { width: 18px; height: 18px; }
.share .tl-ic-zalo { width: 26px; height: 26px; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.post-nav a { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); transition: border-color .25s, box-shadow .25s; }
.post-nav a:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.post-nav small { display: block; color: var(--blue); font-weight: 700; }
.post-nav b { font-size: 15px; }
.post-nav__next { text-align: right; grid-column: 2; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 14.5px; transition: all .25s; }
.chip:hover, .chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 12px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.pagination .current, .pagination a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty > .tl-ic { width: 56px; height: 56px; color: var(--blue); margin-bottom: 14px; }
.search-inline { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 30px; }
.search-inline input { flex: 1; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }

/* ---------- About page ---------- */
.mv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mv-card { background: #fff; border-radius: var(--radius-lg); padding: 36px 30px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; position: relative; overflow: hidden; }
.mv-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); transform: scaleX(0); transition: transform .4s var(--ease); }
.mv-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.mv-card:hover::after { transform: scaleX(1); }
.mv-card__icon { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 20px; background: var(--sky-50); color: var(--blue); transition: background .35s, color .35s, transform .6s var(--ease); }
.mv-card__icon .tl-ic { width: 36px; height: 36px; }
.mv-card:hover .mv-card__icon { background: var(--grad); color: #fff; transform: rotateY(180deg); }
.mv-card p { color: var(--muted); margin: 0; }
.commit { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.timeline-title { font-size: 22px; margin-bottom: 24px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 30px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 28px 10px; }
.timeline li::before { content: ""; position: absolute; left: -40px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 0 0 6px var(--sky-50); }
.timeline__year { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; background: var(--grad); padding: 3px 12px; border-radius: 999px; margin-bottom: 6px; }
.timeline h4 { font-size: 18px; margin-bottom: 4px; }
.timeline p { color: var(--muted); margin: 0; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card { margin: 0; text-align: center; }
.team-card__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; background: var(--soft); margin-bottom: 14px; }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.team-card:hover .team-card__img img { transform: scale(1.06); }
.team-card b { display: block; color: var(--ink-2); font-size: 17px; }
.team-card span { color: var(--blue); font-size: 14px; }

/* ---------- Contact ---------- */
.contact-cards-wrap { padding-bottom: 48px; }
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: -120px; position: relative; z-index: 2; }
.contact-card { background: #fff; border-radius: var(--radius-lg); padding: 28px 22px; box-shadow: var(--shadow); text-align: center; color: var(--ink); display: block; transition: transform .35s var(--ease), box-shadow .35s; }
a.contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--ink); }
.contact-card__ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; background: var(--grad); color: #fff; box-shadow: 0 10px 20px rgba(5,105,183,.25); }
.contact-card__ic .tl-ic { width: 26px; height: 26px; }
.contact-card small { display: block; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.contact-card b { display: block; color: var(--ink-2); margin-top: 4px; font-size: 15.5px; line-height: 1.5; word-break: break-word; }
.contact-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: stretch; }
.contact-brand { height: 100%; background: var(--grad-deep); color: #d6e6f7; border-radius: var(--radius-lg); padding: 40px 36px; position: relative; overflow: hidden; }
.contact-brand__swoosh { width: 440px; right: -140px; bottom: -160px; opacity: .3; }
.contact-brand img { height: 64px; width: auto; margin-bottom: 22px; }
.contact-brand h2 { color: #fff; font-size: 22px; }
.contact-brand__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; position: relative; }
.prose--light { color: #cfe1f3; }
.contact-map { line-height: 0; }
.contact-map iframe { width: 100%; height: 440px; border: 0; filter: saturate(1.05); }

/* ---------- Quote box (services archive) ---------- */
.quote-box { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.card-form { background: #fff; border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }

/* ==========================================================================
   Forms
   ========================================================================== */
.tl-form__head { margin-bottom: 18px; }
.tl-form__title { font-size: 22px; margin-bottom: 4px; }
.tl-form__desc { color: var(--muted); font-size: 14.5px; margin: 0; }
.tl-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 18px; }
.tl-form--compact .tl-form__grid, .tl-form--hero .tl-form__grid { grid-template-columns: 1fr; gap: 12px; }
.tl-form--hero .tl-form__grid { grid-template-columns: 1fr 1fr; }
.fld--full { grid-column: 1 / -1; }
.fld label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.fld label b { color: var(--err); }
.fld input, .fld select, .fld textarea { width: 100%; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 15px; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.fld select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b7c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/18px no-repeat; padding-right: 38px; }
.fld textarea { resize: vertical; min-height: 60px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(5,105,183,.12); }
.fld.has-err input, .fld.has-err select, .fld.has-err textarea { border-color: var(--err); }
.fld__err { color: var(--err); font-size: 12.5px; margin-top: 4px; display: block; }
.tl-form--compact .fld label, .tl-form--hero .fld label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tl-form--compact .fld--cap label, .tl-form--hero .fld--cap label { position: absolute; }
.tl-cap { display: flex; align-items: center; gap: 8px; }
.tl-cap__img { width: 150px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--sky-50); display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); }
.tl-cap__img img { width: 150px; height: 46px; }
.tl-cap__loading { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.tl-cap__refresh { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--blue); cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; transition: transform .4s; }
.tl-cap__refresh:hover { transform: rotate(180deg); }
.tl-cap input[name="cap_answer"] { flex: 1; min-width: 0; }
.tl-form__submit { margin-top: 2px; }
.tl-form__submit .tl-ic { width: 18px; height: 18px; }
.tl-form__submit.is-loading { pointer-events: none; opacity: .8; }
.tl-form__submit.is-loading .tl-ic { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tl-form__note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 10px 0 0; }
.tl-form__msg:empty { display: none; }
.tl-form__msg { margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 500; }
.tl-form__msg.is-ok { background: #ecfdf3; color: #136c34; border: 1px solid #bbf0cf; }
.tl-form__msg.is-err { background: #fef2f2; color: #a61b1b; border: 1px solid #fbd0d0; }
.tl-form.is-done .tl-form__grid, .tl-form.is-done .tl-form__submit, .tl-form.is-done .tl-form__note { display: none; }
.tl-form.is-done .tl-form__msg { text-align: center; padding: 28px 20px; font-size: 16px; }
.tl-form.is-done .tl-form__msg::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/34px no-repeat; animation: pop .5s var(--ease); }
@keyframes pop { from { transform: scale(0); } }

/* ---------- Modal ---------- */
.tl-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; }
.tl-modal[hidden] { display: none; }
.tl-modal__backdrop { position: absolute; inset: 0; background: rgba(6,38,77,.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.tl-modal__box { position: relative; width: min(900px, 100%); max-height: calc(100vh - 40px); overflow: auto; display: grid; grid-template-columns: .85fr 1.15fr; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 40px 100px rgba(0,0,0,.4); opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .35s, transform .45s var(--ease); }
.tl-modal.is-open .tl-modal__backdrop { opacity: 1; }
.tl-modal.is-open .tl-modal__box { opacity: 1; transform: none; }
.tl-modal__close { position: absolute; right: 14px; top: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; transition: transform .3s, background .3s; }
.tl-modal__close:hover { transform: rotate(90deg); background: var(--sky-50); }
.tl-modal__side { background: var(--grad-deep); color: #fff; padding: 36px 30px; position: relative; overflow: hidden; }
.tl-modal__swoosh { width: 420px; left: -60px; bottom: -180px; opacity: .3; }
.tl-modal__side img { height: 54px; width: auto; margin-bottom: 26px; }
.tl-modal__side h2 { color: #fff; font-size: 24px; }
.tl-modal__hot { display: flex; align-items: center; gap: 12px; color: #fff; margin-top: 26px; position: relative; }
.tl-modal__hot > .tl-ic { width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: rgba(255,255,255,.15); }
.tl-modal__hot small { display: block; color: #b8cde4; font-size: 13px; }
.tl-modal__hot b { font-size: 21px; }
.tl-modal__hot:hover { color: #fff; }
.tl-modal__form { padding: 34px 30px 26px; }
body.modal-open { overflow: hidden; }

/* ==========================================================================
   Floating contact
   ========================================================================== */
.float-contact { position: fixed; right: 18px; bottom: 24px; z-index: 980; display: flex; flex-direction: column; gap: 12px; }
.fl-left .float-contact { right: auto; left: 18px; }
.fc-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.2); position: relative; transition: transform .3s var(--ease); }
.fc-btn:hover { transform: scale(1.1); color: #fff; }
.fc-btn .tl-ic { width: 24px; height: 24px; }
.fc-btn--zalo { background: #0068ff; }
.fc-btn--zalo .tl-ic { width: 34px; height: 34px; }
.fc-btn--zalo .tl-ic path { fill: #fff; }
.fc-btn--zalo .tl-ic text { fill: #0068ff; }
.fc-btn--msg { background: linear-gradient(135deg, #00b2ff, #a033ff); }
.fc-btn--mail { background: var(--navy); }
.fc-btn--phone { background: var(--grad); }
.fc-btn--phone .tl-ic { animation: shake 2.4s infinite; }
.fc-btn--zalo::before, .fc-btn--phone::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; z-index: -1; animation: ripple 1.8s infinite; }
.fc-tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(8px); background: var(--ink-2); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.fl-left .fc-tip { right: auto; left: calc(100% + 12px); transform: translateY(-50%) translateX(-8px); }
.fc-btn:hover .fc-tip { opacity: 1; transform: translateY(-50%); }
.fc-btn--top { background: #fff; color: var(--blue); opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .3s, visibility .3s, transform .3s; }
.fc-btn--top.is-on { opacity: 1; visibility: visible; transform: none; }
.fc-btn--top:hover { color: var(--blue); }
.fc-ring { position: absolute; inset: 0; width: 52px !important; height: 52px !important; transform: rotate(-90deg); }
.fc-ring circle { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--sp, 0))); }
.hotline-ring { position: fixed; left: 18px; bottom: 24px; z-index: 980; display: flex; align-items: center; color: #fff; }
.fl-left .hotline-ring { left: auto; right: 18px; flex-direction: row-reverse; }
.hotline-ring__circle { width: 58px; height: 58px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; position: relative; z-index: 2; box-shadow: 0 8px 22px rgba(5,105,183,.45); }
.hotline-ring__circle::before, .hotline-ring__circle::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(5,105,183,.5); animation: ripple 1.6s infinite; }
.hotline-ring__circle::after { animation-delay: .8s; }
.hotline-ring__circle .tl-ic { width: 26px; height: 26px; animation: shake 2s infinite; }
.hotline-ring__num { background: var(--grad); padding: 10px 20px 10px 34px; margin-left: -26px; border-radius: 0 999px 999px 0; font-weight: 800; font-size: 17px; letter-spacing: .02em; box-shadow: 0 8px 22px rgba(5,105,183,.35); }
.fl-left .hotline-ring__num { margin: 0 -26px 0 0; padding: 10px 34px 10px 20px; border-radius: 999px 0 0 999px; }
.hotline-ring:hover { color: #fff; }
.mobile-bar { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #041d3b; color: #9fb6cf; position: relative; overflow: hidden; padding-top: 80px; font-size: 15px; }
.site-footer__swoosh { width: 700px; right: -220px; top: -260px; opacity: .12; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 44px; padding-bottom: 56px; position: relative; }
.footer-logo img { height: 68px; width: auto; margin-bottom: 18px; }
.footer-company { color: #fff; font-weight: 700; margin-bottom: 8px; }
.footer-title { color: #fff; font-size: 17px; margin-bottom: 20px; position: relative; padding-bottom: 12px; }
.footer-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: var(--sky); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { color: #9fb6cf; display: inline-flex; align-items: center; gap: 8px; transition: color .2s, transform .2s; }
.footer-links a::before { content: "›"; color: var(--sky); }
.footer-links a:hover { color: #fff; transform: translateX(4px); }
.footer-contact { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact .tl-ic { color: var(--sky); margin-top: 3px; }
.footer-contact a { color: #cfe1f3; }
.footer-contact a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: background .25s, transform .25s; }
.footer-social a:hover { background: var(--blue); transform: translateY(-3px); color: #fff; }
.footer-social .tl-ic { width: 18px; height: 18px; }
.footer-social .tl-ic-zalo { width: 28px; height: 28px; }
.footer-social .tl-ic-zalo path { fill: #fff; }
.footer-social .tl-ic-zalo text { fill: #041d3b; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; font-size: 14px; position: relative; }
.footer-bottom__inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom a { color: #9fb6cf; }

/* ---------- 404 ---------- */
.notfound__code { font-size: clamp(100px, 18vw, 180px); font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-flex; align-items: center; }
.notfound__code span { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--grad); position: relative; overflow: hidden; margin: 0 .05em; }
.notfound__code .swoosh { inset: 0; width: 100%; height: 100%; }
.notfound__links { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }

/* ---------- Comments ---------- */
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 16px 0; border-bottom: 1px solid var(--line); }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: 12px; }

/* ==========================================================================
   Scroll animations
   ========================================================================== */
.js-anim [data-anim] { opacity: 0; transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); will-change: opacity, transform; }
.js-anim [data-anim="fade-up"] { transform: translateY(40px); }
.js-anim [data-anim="fade-down"] { transform: translateY(-30px); }
.js-anim [data-anim="fade-left"] { transform: translateX(50px); }
.js-anim [data-anim="fade-right"] { transform: translateX(-50px); }
.js-anim [data-anim="zoom-in"] { transform: scale(.88); }
.js-anim [data-anim].is-in { opacity: 1; transform: none; }
[data-delay="1"] { --d: 1; } [data-delay="2"] { --d: 2; } [data-delay="3"] { --d: 3; } [data-delay="4"] { --d: 4; } [data-delay="5"] { --d: 5; } [data-delay="6"] { --d: 6; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.js-anim [data-anim] { opacity: 1; transform: none; }
	.hero-slide .hs-in { opacity: 1; transform: none; }
	.swoosh path { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
	.hotline-chip__txt { display: none; }
	.main-nav .menu > li > a { padding: 10px 10px; font-size: 15px; }
	.layout-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
}
@media (max-width: 1024px) {
	:root { --header-h: 72px; }
	.nav-toggle { display: flex; }
	.navbar__cta { display: none; }
	/* backdrop-filter/transform tạo containing block cho phần tử fixed => tắt trên mobile */
	.navbar { backdrop-filter: none; background: #fff; }
	.site-header.is-hidden { transform: none; top: calc(-1 * var(--header-h) - 2px); }
	.site-header { transition: top .35s var(--ease); }
	.main-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: #fff; z-index: 1000; flex-direction: column; justify-content: flex-start; padding: 0 0 20px; transform: translateX(100%); visibility: hidden; transition: transform .4s var(--ease), visibility .4s; overflow-y: auto; box-shadow: var(--shadow-lg); }
	.main-nav.is-open { transform: none; visibility: visible; }
	.main-nav__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
	.main-nav__head img { height: 44px; width: auto; }
	.nav-close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--soft); cursor: pointer; display: grid; place-items: center; }
	.main-nav__foot { display: grid; gap: 10px; padding: 20px 18px 0; }
	.main-nav .menu { flex-direction: column; gap: 0; padding: 10px 8px; }
	.main-nav .menu > li > a { padding: 13px 12px; font-size: 16px; justify-content: space-between; }
	.main-nav .menu > li > a::after { display: none; }
	.main-nav .menu-item-has-children > a::before { display: none; }
	.main-nav .sub-toggle { display: grid; position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--soft); cursor: pointer; display: grid; place-items: center; }
	.main-nav .sub-toggle::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg) translateY(-2px); transition: transform .3s; }
	.main-nav li.is-open > .sub-toggle::before { transform: rotate(-135deg); }
	.main-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; display: none; }
	.main-nav li.is-open > .sub-menu { display: block; }
	.hero__inner { grid-template-columns: 1fr; gap: 40px; }
	.hero__form { max-width: 640px; }
	.hero__visual { display: none; }
	.hero--slider .hero__inner { grid-template-columns: 1fr; }
	.hero--slider { padding: 64px 0 110px; }
	.hero__swoosh { width: 520px; top: 30%; }
	.stats__grid { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(3)::before { display: none; }
	.quote-home__grid, .about-home__grid, .about-story__grid, .faq-home__grid, .commit, .quote-box, .contact-main { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.about-story__media { order: -1; }
	.sv-grid, .why__grid, .post-grid, .mv-grid { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.steps::before, .steps::after { display: none; }
	.slider__track { grid-auto-columns: calc((100% - 26px) / 2); }
	.layout-sidebar { grid-template-columns: minmax(0, 1fr); }
	.sidebar__sticky.is-sticky { position: static; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.contact-cards { grid-template-columns: repeat(2, 1fr); }
	.team-grid { grid-template-columns: repeat(3, 1fr); }
	.sv-hero { grid-template-columns: 1fr; }
	.sv-hero__price { justify-self: start; }
	.pricing { --cols: 1 !important; max-width: 520px; }
}
@media (max-width: 760px) {
	.hero__scroll { display: none; }
	.hero__ctrl { margin-top: 24px; }
		body { font-size: 15.5px; padding-bottom: 64px; }
	.topbar { display: none; }
	.section { padding: 68px 0; }
	.container { width: calc(100% - 32px); }
	.brand img { height: 46px; }
	.site-header.is-scrolled .brand img { height: 42px; }
	.hotline-chip { display: none; }
	.hero { padding: 48px 0 90px; }
	.hero__desc { font-size: 16px; }
	.hero__form { padding: 22px; }
	.hero__actions .btn { flex: 1 1 100%; }
	.tl-form__grid, .tl-form--hero .tl-form__grid { grid-template-columns: 1fr; }
	.sv-grid, .sv-grid--3, .sv-grid--rows, .why__grid, .post-grid, .post-grid--2, .post-grid--3, .mv-grid { grid-template-columns: 1fr; }
	.post-card--big { grid-template-columns: 1fr; }
	.post-card--big .post-card__thumb { min-height: 0; aspect-ratio: 16 / 10; }
	.post-card--big .post-card__body { padding: 22px 24px; }
	.checklist--grid { grid-template-columns: 1fr; }
	.sv-hero__hl { grid-template-columns: 1fr; }
	.about-home__badge { right: 10px; bottom: -20px; padding: 14px 18px; }
	.about-home__badge b { font-size: 30px; }
	.slider__track { grid-auto-columns: 88%; }
	.cta-band__inner, .inline-cta, .sec-row { flex-direction: column; align-items: flex-start; }
	.cta-band__actions .btn, .inline-cta__btns .btn { flex: 1 1 auto; }
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.contact-cards { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: -90px; }
	.contact-card { padding: 20px 14px; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.tl-modal__box { grid-template-columns: 1fr; }
	.tl-modal__side { display: none; }
	.tl-modal__form { padding: 30px 20px 20px; }
	.post-nav { grid-template-columns: 1fr; }
	.post-nav__next { grid-column: 1; }
	.card-form { padding: 22px; }
	.page-hero { padding: 44px 0 56px; }
	.contact-cards-wrap + .section .contact-main { gap: 24px; }
	.entry h2 { font-size: 22px; }
	/* Mobile: ẩn hotline tròn, dùng thanh dưới */
	.hotline-ring { display: none; }
	.float-contact { bottom: 80px; right: 12px; }
	.fl-left .float-contact { left: 12px; }
	.fc-btn { width: 46px; height: 46px; }
	.fc-btn--phone { display: none; }
	.fc-ring { width: 46px !important; height: 46px !important; }
	.fc-tip { display: none; }
	.mobile-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; background: #fff; box-shadow: 0 -6px 20px rgba(6,38,77,.12); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
	.mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 4px 0; }
	.mobile-bar .tl-ic { width: 22px; height: 22px; color: var(--blue); }
	.mobile-bar .tl-ic-zalo { width: 26px; height: 26px; color: #0068ff; }
	.mobile-bar__call { background: var(--grad); color: #fff !important; border-radius: 12px; }
	.mobile-bar__call .tl-ic { color: #fff; animation: shake 2.4s infinite; }
}
@media (max-width: 420px) {
	.stats__grid { grid-template-columns: 1fr 1fr; }
	.stat { padding: 22px 10px; }
	.tl-cap__img, .tl-cap__img img { width: 120px; height: 40px; }
}