:root {
  --navy: #6f0717;
  --navy-2: #9f1024;
  --blue: #e31e34;
  --blue-2: #ff4a32;
  --cyan: #ffc928;
  --violet: #c30f2e;
  --ink: #42121b;
  --muted: #75565d;
  --line: #f0d2ca;
  --soft: #fff8e7;
  --white: #fff;
  --radius: 18px;
  --shadow: 0 18px 48px rgba(171, 20, 45, .14);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: #fff; font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; line-height: 1.65; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.btn-primary { --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: var(--navy-2); --bs-btn-hover-border-color: var(--navy-2); --bs-btn-active-bg: var(--navy); --bs-btn-active-border-color: var(--navy); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.text-bg-primary { background-color: var(--blue) !important; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 2000; padding: 10px 16px; color: #fff; background: var(--navy); border-radius: 8px; transition: .2s; }
.skip-link:focus { top: 12px; }

.utility-bar { padding: 7px 0; color: #fff3dc; background: linear-gradient(90deg, #8c091e, #df1d31 58%, #ff6a2c); font-size: .78rem; }
.utility-bar .system-name { font-weight: 600; letter-spacing: .01em; }
.utility-bar .system-name i { margin-right: 7px; color: var(--cyan); }
.utility-bar .contact-line { text-align: right; }
.utility-bar .contact-line a { color: #fff; font-weight: 600; }
.utility-bar .contact-line a:hover { color: var(--cyan); }
.utility-bar .contact-line span { margin: 0 5px; opacity: .6; }

.site-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(122,16,36,.1); box-shadow: 0 8px 26px rgba(91,15,29,.07); backdrop-filter: blur(14px); }
.navbar { min-height: 78px; padding: .55rem 0; }
.brand-lockup, .footer-brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; color: #fff; background: linear-gradient(145deg, #ff3c3c, #c40f28 58%, #ffbd17); border-radius: 15px 15px 15px 5px; box-shadow: 0 8px 20px rgba(227,30,52,.25); }
.brand-mark i { position: relative; z-index: 2; font-size: 1.25rem; }
.mark-orbit { position: absolute; width: 56px; height: 23px; border: 1px solid rgba(166,27,43,.26); border-radius: 50%; transform: rotate(-25deg); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { color: var(--navy); font-size: 1.01rem; font-weight: 800; letter-spacing: .055em; }
.brand-copy small { margin-top: 5px; color: #8a6f75; font-size: .7rem; font-style: italic; letter-spacing: .02em; }
.navbar-nav { gap: 2px; }
.navbar .nav-link { position: relative; padding: .72rem .62rem !important; color: #5a4147; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.navbar .nav-link::after { position: absolute; bottom: 4px; left: 50%; width: 0; height: 2px; content: ""; background: var(--blue); border-radius: 10px; transform: translateX(-50%); transition: .2s ease; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--blue); }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { width: calc(100% - 1.25rem); }
.navbar-toggler { border: 0; box-shadow: none !important; }
.btn-login { padding: .68rem .9rem; color: #fff; background: linear-gradient(135deg, #f12a3d, #b90d28); border-radius: 10px; font-size: .76rem; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px rgba(227,30,52,.24); }
.btn-login:hover { color: #fff; background: var(--navy-2); transform: translateY(-1px); }

.hero-section { position: relative; padding: 44px 0 36px; overflow: hidden; background: linear-gradient(120deg, #fff0dc 0%, #fffdf5 50%, #fff2bf 100%); }
.hero-mesh { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(122,16,36,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(122,16,36,.055) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, black, transparent); }
.hero-section::before { position: absolute; top: -180px; right: -120px; width: 520px; height: 520px; content: ""; background: radial-gradient(circle, rgba(255,201,40,.42), transparent 66%); }
.login-card { position: relative; z-index: 2; padding: 30px; background: #fff; border: 1px solid rgba(122,16,36,.11); border-radius: var(--radius); box-shadow: var(--shadow); }
.eyebrow, .section-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
.eyebrow span { width: 18px; height: 3px; background: var(--cyan); border-radius: 5px; }
.login-card h1 { margin: 0 0 12px; color: var(--navy); font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.25; font-weight: 800; letter-spacing: -.035em; }
.login-card > p { margin-bottom: 22px; color: var(--muted); font-size: .91rem; }
.audience-card { overflow: hidden; background: linear-gradient(160deg, #fff 0%, #fff9ec 100%); }
.audience-card::after { position: absolute; right: -70px; bottom: -80px; width: 190px; height: 190px; content: ""; background: radial-gradient(circle, rgba(255,201,40,.22), transparent 68%); border-radius: 50%; pointer-events: none; }
.audience-list { position: relative; z-index: 2; display: grid; gap: 10px; margin: 20px 0 22px; }
.audience-list a { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid #f3d8cf; border-radius: 13px; transition: .22s; }
.audience-list a:hover { border-color: var(--blue); box-shadow: 0 10px 22px rgba(227,30,52,.11); transform: translateX(4px); }
.audience-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; color: #9a0c22; background: linear-gradient(145deg, #ffe86a, #ffbf22); border-radius: 12px; }
.audience-list a > span:last-child { display: flex; flex-direction: column; }
.audience-list strong { color: var(--navy); font-size: .84rem; }
.audience-list small { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.audience-cta { position: relative; z-index: 2; width: 100%; padding: .78rem; border: 0; border-radius: 11px; font-size: .78rem; font-weight: 700; }
.audience-cta i { margin-left: 7px; }
.form-label { margin-bottom: 7px; color: #33435c; font-size: .82rem; font-weight: 600; }
.input-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; transition: .2s; }
.input-shell:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(166,27,43,.1); }
.input-shell .input-group-text, .input-shell .form-control, .toggle-password { height: 48px; background: #f9fbfe; border: 0; }
.input-shell .input-group-text { padding-left: 15px; color: var(--blue); }
.input-shell .form-control { font-size: .86rem; box-shadow: none !important; }
.toggle-password { color: #738098; }
.toggle-password:hover { color: var(--blue); }
.invalid-feedback { font-size: .74rem; }
.form-check-label, .forgot-link { font-size: .76rem; }
.forgot-link { color: var(--blue); font-weight: 600; }
.login-submit { height: 49px; background: linear-gradient(90deg, var(--navy-2), var(--blue)); border: 0; border-radius: 10px; font-size: .88rem; font-weight: 700; box-shadow: 0 9px 20px rgba(122,16,36,.2); }
.login-submit:hover { background: var(--navy-2); }
.form-note { margin-top: 15px; color: #78869a; font-size: .68rem; text-align: center; }
.form-note i { margin-right: 4px; color: #b78516; }

.hero-carousel, .hero-carousel .owl-stage-outer, .hero-carousel .owl-stage, .hero-carousel .owl-item { height: 100%; }
.hero-slide { position: relative; min-height: 518px; height: 100%; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.hero-slide-photo > img { width: 100%; height: 100%; min-height: 518px; object-fit: cover; }
.slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(105,5,24,.93), rgba(202,18,43,.46) 54%, rgba(255,174,24,.05)); }
.slide-content { position: absolute; inset: auto auto 53px 46px; z-index: 2; width: min(450px, calc(100% - 70px)); color: #fff; }
.slide-kicker { display: inline-block; margin-bottom: 13px; padding: 6px 10px; color: #fff; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 30px; font-size: .69rem; font-weight: 700; letter-spacing: .12em; backdrop-filter: blur(6px); }
.slide-kicker.dark { color: var(--blue); background: #fff0e6; border: 0; }
.slide-content h2, .document-copy h2 { margin-bottom: 12px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.1; font-weight: 800; letter-spacing: -.04em; }
.slide-content p { max-width: 430px; margin-bottom: 22px; color: rgba(255,255,255,.83); }
.slide-content .btn, .document-copy .btn { padding: .72rem 1.1rem; border: 0; border-radius: 10px; font-size: .8rem; font-weight: 700; }
.document-slide { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; padding: 48px; background: linear-gradient(145deg, #fff 0%, #fff0e6 100%); }
.document-copy { position: relative; z-index: 2; }
.document-copy h2 { color: var(--navy); font-size: clamp(1.85rem, 3.1vw, 2.8rem); }
.document-copy p { margin-bottom: 22px; color: var(--muted); }
.document-cover { position: relative; display: flex; justify-content: center; }
.document-cover::before { position: absolute; inset: 8% -15% -8% 20%; content: ""; background: linear-gradient(145deg, var(--cyan), var(--blue)); border-radius: 50%; filter: blur(34px); opacity: .28; }
.document-cover img { position: relative; width: 78%; max-height: 410px; object-fit: cover; object-position: top; border: 7px solid #fff; border-radius: 6px; box-shadow: 0 24px 42px rgba(91,15,29,.24); transform: rotate(3deg); }
.trust-slide { background: linear-gradient(135deg, #7b071a, #db1c35 62%, #ff7a28); }
.trust-pattern { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(130deg, transparent, black); }
.trust-slide::after { position: absolute; top: -90px; right: -70px; width: 360px; height: 360px; content: ""; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 46px rgba(255,255,255,.035), 0 0 0 92px rgba(255,255,255,.025); }
.slide-content-wide { inset: 55px 52px auto; width: min(610px, calc(100% - 90px)); }
.slide-content-wide h2 { font-size: clamp(2.4rem, 4vw, 3.7rem); }
.trust-metrics { display: flex; gap: 34px; margin-top: 32px; }
.trust-metrics div { display: flex; flex-direction: column; padding-left: 14px; border-left: 2px solid var(--cyan); }
.trust-metrics strong { font-size: 1.45rem; line-height: 1; }
.trust-metrics span { margin-top: 7px; color: rgba(255,255,255,.7); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.hero-carousel .owl-dots { position: absolute; bottom: 22px; left: 50%; display: flex; align-items: center; gap: 5px; transform: translateX(-50%); }
.hero-carousel .owl-dot span { display: block; width: 8px; height: 8px; background: rgba(255,255,255,.55); border: 1px solid rgba(7,29,67,.15); border-radius: 20px; transition: .25s; }
.hero-carousel .owl-dot.active span { width: 27px; background: var(--cyan); }

.trust-strip { position: relative; z-index: 3; background: #fff; border-bottom: 1px solid var(--line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding: 22px 28px; border-right: 1px solid var(--line); }
.trust-item:last-child { border-right: 0; }
.trust-item > i { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: var(--blue); background: #fff0df; border-radius: 11px; }
.trust-item div { display: flex; flex-direction: column; }
.trust-item strong { color: var(--navy); font-size: .82rem; }
.trust-item span { color: var(--muted); font-size: .68rem; }

.section-pad { padding: 92px 0; }
.section-title { margin-bottom: 18px; color: var(--navy); font-size: clamp(2rem, 3.6vw, 3.05rem); line-height: 1.2; font-weight: 800; letter-spacing: -.04em; }
.section-lead, .section-heading p { color: var(--muted); font-size: 1rem; }
.section-heading { max-width: 700px; }
.section-heading .section-label { justify-content: center; }
.text-link { color: var(--blue); font-size: .83rem; font-weight: 700; }
.text-link i { margin-left: 7px; transition: .2s; }
.text-link:hover { color: var(--navy); }
.text-link:hover i { transform: translateX(4px); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature-card { position: relative; min-height: 215px; padding: 27px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: .25s; }
.feature-card:first-child { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 448px; color: #fff; background: linear-gradient(160deg, #8b091f, #ed2336 68%, #ff8b27); border: 0; }
.feature-card:hover { border-color: rgba(166,27,43,.35); transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-card i { margin-bottom: 35px; color: var(--blue); font-size: 2rem; }
.feature-card:first-child i { color: var(--cyan); font-size: 3rem; }
.feature-card h3 { margin-bottom: 9px; color: var(--navy); font-size: 1.06rem; font-weight: 700; }
.feature-card:first-child h3 { color: #fff; font-size: 1.4rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.feature-card:first-child p { color: rgba(255,255,255,.72); }
.feature-no { position: absolute; top: 20px; right: 22px; color: #c7d4e7; font-size: .74rem; font-weight: 700; }
.feature-card:first-child .feature-no { color: rgba(255,255,255,.45); }

.resource-section { background: var(--soft); }
.resource-card { display: flex; flex-direction: column; height: 100%; padding: 29px; background: #fff; border: 1px solid #e2eaf4; border-radius: 17px; box-shadow: 0 8px 28px rgba(6,38,82,.045); transition: .25s; }
.resource-card:hover { border-color: rgba(227,30,52,.32); transform: translateY(-7px); box-shadow: var(--shadow); }
.featured-resource { border-top: 4px solid var(--cyan); box-shadow: 0 14px 36px rgba(227,30,52,.1); }
.resource-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 23px; border-radius: 16px; font-size: 1.35rem; }
.resource-icon.primary { color: #986b09; background: #fff2c5; }
.resource-icon.secondary { color: #a61b2b; background: #fde6e3; }
.resource-icon.high { color: #6f1020; background: #f3dadd; }
.resource-level { margin-bottom: 8px; color: var(--blue); font-size: .67rem; font-weight: 800; letter-spacing: .11em; }
.resource-card h3 { color: var(--navy); font-size: 1.12rem; line-height: 1.45; font-weight: 700; }
.resource-card p { color: var(--muted); font-size: .82rem; }
.basis-links { display: grid; gap: 9px; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid #f0e0da; list-style: none; }
.basis-links a { position: relative; display: block; padding-left: 18px; color: var(--blue); font-size: .73rem; font-weight: 700; line-height: 1.45; }
.basis-links a::before { position: absolute; top: .52em; left: 0; width: 7px; height: 7px; content: ""; background: var(--cyan); border: 2px solid var(--blue); border-radius: 50%; }
.basis-links a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.resource-action { margin-top: auto; padding-top: 16px; color: var(--blue); border-top: 1px solid #edf1f6; font-size: .78rem; font-weight: 700; }
.resource-action i { float: right; }

.safety-section { background: #fff; }
.safety-panel { position: relative; padding: 64px 70px; overflow: hidden; color: #fff; background: linear-gradient(125deg, #7d071b 0%, #d81c34 58%, #ff7728 100%); border-radius: 26px; box-shadow: 0 28px 66px rgba(161,12,37,.24); }
.safety-panel::after { position: absolute; right: -160px; bottom: -240px; width: 500px; height: 500px; content: ""; background: radial-gradient(circle, rgba(225,178,63,.36), transparent 68%); }
.section-label.light { color: #f7cf69; }
.safety-lead { max-width: 690px; color: rgba(255,255,255,.74); }
.safety-list { display: grid; gap: 12px; margin-top: 26px; }
.safety-list > div { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.8); font-size: .84rem; }
.safety-list i { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; margin-top: 2px; color: var(--navy); background: var(--cyan); border-radius: 50%; font-size: .68rem; }
.safety-list strong { color: #fff; }
.safety-visual { position: relative; min-height: 340px; }
.shield-core { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; place-items: center; width: 120px; height: 140px; color: #fff; background: linear-gradient(155deg, rgba(225,178,63,.98), rgba(166,27,43,.9)); clip-path: polygon(50% 0, 92% 16%, 86% 70%, 50% 100%, 14% 70%, 8% 16%); transform: translate(-50%,-50%); filter: drop-shadow(0 16px 30px rgba(0,0,0,.26)); }
.shield-core i { font-size: 2rem; }
.shield-core span { margin-top: -18px; font-size: 1.15rem; font-weight: 800; }
.data-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(245,202,92,.35); border-radius: 50%; transform: translate(-50%,-50%); }
.ring-one { width: 230px; height: 230px; }
.ring-two { width: 320px; height: 320px; border-style: dashed; animation: rotate 24s linear infinite; }
.data-node { position: absolute; z-index: 4; display: grid; place-items: center; width: 48px; height: 48px; color: var(--cyan); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 14px; backdrop-filter: blur(8px); }
.n1 { top: 13%; left: 22%; }.n2 { top: 27%; right: 14%; }.n3 { bottom: 11%; left: 33%; }
@keyframes rotate { to { transform: translate(-50%,-50%) rotate(360deg); } }

.news-section { padding-top: 78px; background: linear-gradient(#fff8f3, #fff); }
.news-card { height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: .25s; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.news-image { position: relative; display: block; height: 225px; overflow: hidden; background: #eaf0f8; }
.news-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: .4s; }
.news-card:hover .news-image img { transform: scale(1.035); }
.news-type { position: absolute; right: 12px; bottom: 12px; padding: 5px 8px; color: #fff; background: rgba(59,7,18,.88); border-radius: 6px; font-size: .64rem; font-weight: 700; backdrop-filter: blur(6px); }
.news-body { padding: 22px; }
.news-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: .66rem; }
.news-meta a { color: var(--blue); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.news-meta time { color: #8390a2; white-space: nowrap; }
.news-meta time i { margin-right: 4px; }
.news-body h3 { margin-bottom: 10px; font-size: 1.01rem; line-height: 1.5; font-weight: 700; }
.news-body h3 a { color: var(--navy); }
.news-body h3 a:hover { color: var(--blue); }
.news-body p { display: -webkit-box; margin-bottom: 0; overflow: hidden; color: var(--muted); font-size: .78rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.news-carousel .owl-stage { display: flex; }
.news-carousel .owl-item { display: flex; padding: 8px 0 30px; }
.news-carousel .owl-dots { display: flex; justify-content: center; gap: 5px; }
.news-carousel .owl-dot span { display: block; width: 8px; height: 8px; background: #c3cfde; border-radius: 10px; transition: .2s; }
.news-carousel .owl-dot.active span { width: 24px; background: var(--blue); }

.registration-section { padding: 12px 0 86px; }
.registration-card { position: relative; padding: 44px 52px; overflow: hidden; color: #fff; background: linear-gradient(120deg, #9a0a23, #ee2539 56%, #ff8d24); border-radius: 22px; box-shadow: 0 22px 48px rgba(194,17,45,.24); }
.registration-card::after { position: absolute; top: -125px; right: 25%; width: 280px; height: 280px; content: ""; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.045); }
.registration-card .row { position: relative; z-index: 2; }
.registration-card h2 { margin-bottom: 10px; font-size: clamp(1.65rem, 3vw, 2.45rem); font-weight: 800; }
.registration-card p { max-width: 690px; margin: 0; color: rgba(255,255,255,.8); font-size: .88rem; }
.zalo-contact-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 58px; padding: .8rem 1rem; color: var(--blue); border: 0; border-radius: 13px; font-size: .84rem; font-weight: 600; box-shadow: 0 13px 28px rgba(83,7,21,.18); }
.zalo-contact-btn > i:first-child { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: #0877e8; border-radius: 10px; }
.zalo-contact-btn > i:last-child { font-size: .72rem; opacity: .7; }
.zalo-contact-btn:hover { color: var(--navy); background: #fff4c6; transform: translateY(-2px); }

.site-footer { color: #e5cfd2; background: #2a050d; }
.footer-main { padding: 62px 0 48px; }
.footer-brand { color: #fff; }
.footer-brand .brand-mark.small { width: 43px; height: 43px; flex-basis: 43px; border-radius: 13px 13px 13px 5px; }
.footer-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.footer-brand strong { font-size: 1rem; letter-spacing: .08em; }
.footer-brand small { color: #c99ca3; font-size: .7rem; }
.footer-intro { max-width: 430px; margin: 20px 0 0; color: #c29ba2; font-size: .82rem; }
.site-footer h2 { margin-bottom: 17px; color: #fff; font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.contact-list, .footer-nav { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .78rem; }
.contact-list li { display: flex; align-items: flex-start; gap: 10px; }
.contact-list i { width: 16px; margin-top: 5px; color: var(--cyan); }
.contact-list a:hover, .footer-nav a:hover { color: var(--cyan); }
.footer-nav li { position: relative; padding-left: 13px; }
.footer-nav li::before { position: absolute; top: 10px; left: 0; width: 4px; height: 4px; content: ""; background: var(--cyan); border-radius: 50%; }
.footer-bottom { background: #200309; border-top: 1px solid rgba(255,255,255,.08); }
.footer-bottom-grid { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 19px 0; }
.footer-legal { text-align: left; }
.legal-links { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 6px; }
.legal-links a { color: #d2afb5; font-size: .7rem; }
.legal-links a:hover { color: #fff; }
.footer-legal p { margin: 0; color: #ae8188; font-size: .68rem; }
.social-links { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.social-links a { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; transition: .2s; }
.social-links a:hover { color: var(--navy); background: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); }
.back-to-top { position: fixed; right: 20px; bottom: 92px; z-index: 1000; display: grid; place-items: center; width: 43px; height: 43px; color: #fff; background: var(--blue); border: 0; border-radius: 12px; box-shadow: 0 10px 24px rgba(122,16,36,.32); opacity: 0; pointer-events: none; transform: translateY(12px); transition: .22s; }
.back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--navy); }

@media (max-width: 1199.98px) {
  .navbar .nav-link { padding-inline: .43rem !important; font-size: .75rem; }
  .btn-login { padding-inline: .75rem; }
  .hero-slide, .hero-slide-photo > img { min-height: 520px; }
  .document-slide { padding: 36px; }
}

@media (max-width: 991.98px) {
  .navbar { min-height: 70px; }
  .navbar-collapse { margin-top: 10px; padding: 14px; background: #f7faff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
  .navbar-nav { align-items: stretch !important; }
  .navbar .nav-link { padding: .7rem .75rem !important; }
  .navbar .nav-link::after { display: none; }
  .btn-login { display: block; margin-top: 8px; text-align: center; }
  .hero-section { padding-top: 30px; }
  .hero-slide, .hero-slide-photo > img { min-height: 500px; }
  .feature-grid { margin-top: 12px; }
  .safety-panel { padding: 52px 45px; }
  .safety-visual { min-height: 300px; }
  .footer-main { padding-top: 48px; }
}

@media (max-width: 767.98px) {
  body { font-size: 15px; }
  .utility-bar { padding: 8px 0; }
  .utility-bar .system-name { font-size: .68rem; }
  .utility-bar .contact-line { width: 100%; font-size: .69rem; text-align: right; }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .brand-copy strong { font-size: .86rem; }
  .brand-copy small { font-size: .62rem; }
  .login-card { padding: 24px 21px; }
  .hero-slide, .hero-slide-photo > img { min-height: 460px; }
  .slide-overlay { background: linear-gradient(0deg, rgba(52,5,15,.94), rgba(91,15,29,.18)); }
  .slide-content { inset: auto 23px 54px; width: auto; }
  .slide-content h2 { font-size: 2.2rem; }
  .document-slide { grid-template-columns: 1fr; padding: 28px 25px 52px; }
  .document-copy h2 { font-size: 1.75rem; }
  .document-cover { display: none; }
  .slide-content-wide { inset: 40px 25px auto; width: auto; }
  .slide-content-wide h2 { font-size: 2.25rem; }
  .trust-metrics { gap: 14px; }
  .trust-metrics div { padding-left: 9px; }
  .trust-metrics strong { font-size: 1.16rem; }
  .trust-metrics span { font-size: .58rem; }
  .trust-item { padding: 17px 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-item:last-child { border-bottom: 0; }
  .section-pad { padding: 66px 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card:first-child { grid-row: auto; min-height: 270px; }
  .feature-card { min-height: auto; }
  .feature-card i { margin-bottom: 22px; }
  .safety-panel { padding: 35px 22px; border-radius: 20px; }
  .safety-visual { min-height: 260px; transform: scale(.82); margin: -20px 0; }
  .news-image { height: 235px; }
  .registration-section { padding-bottom: 66px; }
  .registration-card { padding: 34px 22px; }
  .zalo-contact-btn { min-height: 56px; font-size: .78rem; }
  .footer-bottom-grid { align-items: flex-start; flex-direction: column; }
  .social-links { align-self: flex-end; }
  .legal-links { flex-direction: column; gap: 5px; }
  .back-to-top { right: 16px; bottom: 170px; }
}

@media (max-width: 379.98px) {
  .brand-copy strong { font-size: .76rem; }
  .brand-copy small { font-size: .57rem; }
  .slide-content h2 { font-size: 1.9rem; }
  .hero-slide, .hero-slide-photo > img { min-height: 435px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}