@font-face {
    font-family:BeVietnam;
    src:url('../fonts/BeVietnamPro-Regular.ttf') format('truetype');
    font-weight:400;
    font-display:swap
}

@font-face {
    font-family:BeVietnam;
    src:url('../fonts/BeVietnamPro-SemiBold.ttf') format('truetype');
    font-weight:600;
    font-display:swap
}

@font-face {
    font-family:BeVietnam;
    src:url('../fonts/BeVietnamPro-Bold.ttf') format('truetype');
    font-weight:700 900;
    font-display:swap
}

:root {
    --blue:#245ce4;
    --blue-dark:#1745b4;
    --ink:#142440;
    --muted:#6a7990;
    --line:#e5ebf3;
    --bg:#f6f8fc;
    --green:#078465;
    --red:#de4254;
    --radius:18px;
    --shadow:0 12px 38px #182d5010
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:BeVietnam,Arial,system-ui,sans-serif;
    font-size:14px;
    line-height:1.6;
    color:var(--ink);
    background:#fff;
    -webkit-font-smoothing:antialiased
}

a {
    color:var(--blue);
    text-decoration:none
}

button,input,select,textarea {
    font:inherit
}

button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

img {
    max-width:100%;
    object-fit:cover
}

h1,h2,h3,h4,p {
    margin-top:0
}

h1,h2,h3,h4 {
    line-height:1.25;
    letter-spacing:-.025em
}

h1 {
    font-size:40px
}

h2 {
    font-size:29px
}

h3 {
    font-size:19px
}

p {
    color:var(--muted)
}

.container {
    width:min(1180px,calc(100% - 48px));
    margin:auto
}

.icon {
    width:20px;
    height:20px;
    flex-shrink:0;
    vertical-align:middle
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0)
}

.topline {
    background:#edf4ff;
    border-bottom:1px solid #e3ebfc;
    font-size:11px
}

.topline .container {
    display:flex;
    justify-content:space-between;
    padding:8px 0
}

.topline span {
    display:flex;
    align-items:center;
    gap:7px;
    color:#41608e
}

.topline .icon {
    width:14px;
    height:14px
}

.topline a {
    color:#41608e
}

.site-header {
    background:#fff;
    border-bottom:1px solid var(--line);
    position:relative;
    z-index:20
}

.nav-wrap {
    height:88px;
    display:flex;
    align-items:center;
    gap:34px;
    justify-content:space-between
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    font-size:21px;
    font-weight:800;
    white-space:nowrap;
    letter-spacing:-.6px
}

.brand img {
    width:43px;
    height:48px;
    object-fit:contain
}

.brand-dot {
    color:var(--blue)
}

.brand small {
    display:block;
    font-size:8px;
    letter-spacing:1.7px;
    font-weight:600;
    color:var(--muted);
    margin-top:3px
}

#main-nav {
    display:flex;
    gap:23px;
    align-items:center
}

#main-nav a {
    font-weight:600;
    font-size:12px;
    color:#57647b
}

#main-nav a:hover {
    color:var(--blue)
}

.nav-actions {
    display:flex;
    gap:14px;
    align-items:center;
    flex-shrink:0
}

.login-link {
    font-size:12px;
    font-weight:600
}

.menu-button {
    display:none;
    background:#f2f5fa;
    border:1px solid var(--line);
    border-radius:10px;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center
}

.btn {
    border-radius:10px;
    min-height:45px;
    padding:11px 20px;
    border:1px solid transparent;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
    font-weight:600;
    font-size:13px;
    text-decoration:none;
    transition:background .16s,box-shadow .16s
}

.btn:hover {
    box-shadow:0 5px 16px #1f4dab1a
}

.btn-primary {
    background:var(--blue);
    color:#fff
}

.btn-primary:hover {
    background:var(--blue-dark)
}

.btn-danger {
    background:#ffeff1;
    color:#c73043;
    border-color:#fbdce1
}

.btn-outline {
    background:#fff;
    border-color:var(--line);
    color:var(--ink)
}

.btn-green {
    background:var(--green);
    color:#fff
}

.btn-small {
    min-height:36px;
    padding:7px 13px;
    font-size:12px
}

.btn:disabled {
    opacity:.65;
    cursor:wait
}

.full {
    width:100%
}

.avatar-small img {
    width:34px;
    height:34px;
    border-radius:50%
}

.hero {
    background:linear-gradient(120deg,#f1f6ff 0%,#fff 55%,#ecf9f7 100%);
    position:relative;
    border-bottom:1px solid var(--line);
    overflow:hidden
}

.hero:after {
    content:"";
    position:absolute;
    right:-180px;
    top:-80px;
    width:600px;
    height:600px;
    border:80px solid #3a73ef07;
    border-radius:50%;
    pointer-events:none
}

.hero-layout {
    display:grid;
    grid-template-columns:1.13fr .87fr;
    gap:60px;
    padding:65px 0 45px;
    align-items:center;
    position:relative;
    z-index:1
}

.eyebrow {
    font-size:10px;
    color:var(--blue);
    letter-spacing:1.8px;
    font-weight:700;
    display:inline-block;
    margin-bottom:13px
}

.hero h1 {
    font-size:49px;
    line-height:1.14;
    letter-spacing:-2px;
    max-width:580px;
    margin:12px 0 22px
}

.hero h1 em {
    color:var(--blue);
    font-style:normal
}

.hero p {
    font-size:15px;
    line-height:1.8;
    max-width:490px;
    margin-bottom:24px
}

.hero-label {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid #e0e9fb;
    box-shadow:0 4px 12px #3159a706;
    border-radius:100px;
    color:#4275c3;
    padding:6px 13px;
    font-size:11px;
    font-weight:600
}

.hero-label:before {
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#10a780
}

.hero-actions {
    display:flex;
    gap:12px;
    margin-top:20px
}

.hero-visual {
    position:relative;
    padding:25px 12px
}

.radar {
    width:340px;
    height:340px;
    border-radius:50%;
    border:1px solid #bad7f054;
    margin:auto;
    position:relative;
    display:grid;
    place-items:center;
    background:radial-gradient(circle,#e7f5fb 0 33%,transparent 33% 49%,#dce8fa5e 50%,transparent 50%)
}

.radar:before,.radar:after {
    content:"";
    position:absolute;
    border:1px solid #b7d7e373;
    border-radius:50%;
    width:250px;
    height:250px
}

.radar:after {
    width:160px;
    height:160px
}

.hero-shield {
    width:170px;
    filter:drop-shadow(0 20px 22px #2151c330);
    z-index:1
}

.float-card {
    position:absolute;
    background:#fff;
    border:1px solid #e5eaf6;
    border-radius:13px;
    box-shadow:0 16px 26px #2052900e;
    display:flex;
    gap:10px;
    align-items:center;
    padding:13px 18px;
    z-index:2
}

.float-card b {
    font-size:12px;
    display:block
}

.float-card small {
    font-size:10px;
    color:var(--muted)
}

.float-card .icon {
    width:30px;
    height:30px;
    color:var(--green);
    background:#edf9f4;
    padding:5px;
    border-radius:7px
}

.float-one {
    top:28px;
    right:-5px
}

.float-two {
    left:-12px;
    bottom:35px
}

.hero-mini {
    position:absolute;
    bottom:2px;
    right:13px;
    font-size:10px;
    color:#7f9db2;
    letter-spacing:1px
}

.search-zone {
    padding:0 0 30px;
    position:relative;
    z-index:3
}

.search-box {
    background:#fff;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:23px
}

.search-head {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    margin-bottom:13px
}

.search-head h2 {
    font-size:18px;
    margin:0
}

.search-head span {
    font-size:11px;
    color:var(--muted)
}

.search-form {
    display:flex;
    gap:10px
}

.search-input {
    display:flex;
    gap:12px;
    align-items:center;
    border:1px solid #dfe6f0;
    border-radius:11px;
    flex:1;
    padding:0 15px;
    min-width:0;
    background:#f9fbfe
}

.search-input .icon {
    color:#7b8ca5
}

.search-input input {
    min-width:0;
    width:100%;
    border:0;
    background:transparent;
    padding:16px 0;
    outline:0;
    font-size:13px
}

.quick-tags {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:13px 0 0;
    font-size:10px;
    color:var(--muted)
}

.quick-tags button {
    background:#f4f7fc;
    border:0;
    border-radius:5px;
    font-size:10px;
    padding:4px 9px;
    color:#5b7397
}

.stats-strip {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:24px 0 34px;
    gap:20px
}

.stat {
    display:flex;
    align-items:center;
    gap:12px
}

.stat-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:#ebf2ff;
    color:var(--blue)
}

.stat:nth-child(2) .stat-icon {
    background:#e7f6ef;
    color:var(--green)
}

.stat:nth-child(3) .stat-icon {
    background:#fff1e7;
    color:#cb7b33
}

.stat strong {
    font-size:23px;
    display:block;
    line-height:1.2
}

.stat small {
    font-size:11px;
    color:var(--muted)
}

.notice {
    margin:25px 0;
    background:#f1f6ff;
    border:1px solid #d9e6fe;
    border-radius:12px;
    padding:17px 20px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#57708c;
    font-size:12px
}

.notice .icon {
    color:var(--blue);
    margin-top:3px
}

.notice b {
    display:block;
    color:#2f4f81;
    margin-bottom:4px
}

.notice p {
    margin:0;
    font-size:11px;
    line-height:1.65
}

.notice.warning {
    background:#fff8ed;
    border-color:#f5e7cb
}

.notice.warning .icon {
    color:#b48129
}

.notice.danger {
    background:#fff0f1;
    border-color:#f2cbd1
}

.section {
    padding:50px 0
}

.section.soft {
    background:var(--bg)
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px
}

.section-heading h2 {
    margin-bottom:8px
}

.section-heading p {
    font-size:12px;
    margin:0
}

.text-link {
    font-size:12px;
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    white-space:nowrap
}

.section-tag {
    display:block;
    color:var(--green);
    letter-spacing:1.5px;
    font-size:10px;
    font-weight:700;
    margin-bottom:9px
}

.gdv-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.gdv-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    overflow:hidden;
    box-shadow:0 6px 22px #2b476c05
}

.gdv-cover {
    height:93px;
    background:linear-gradient(125deg,#e8f3fb,#dcf6ed);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 18px
}

.gdv-cover:before {
    content:"";
    position:absolute;
    left:65%;
    width:150px;
    height:150px;
    border-radius:50%;
    border:25px solid #ffffff68;
    top:-30px
}

.gdv-cover span {
    font-size:8px;
    letter-spacing:1px;
    color:#469983;
    position:relative
}

.gdv-cover .icon {
    width:12px;
    height:12px
}

.gdv-card-body {
    padding:0 21px 22px
}

.gdv-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-top:-31px;
    position:relative;
    margin-bottom:15px
}

.gdv-avatar {
    width:73px;
    height:73px;
    border-radius:18px;
    border:5px solid #fff;
    background:#fff
}

.gdv-card-top .badge {
    margin-top:22px
}

.badge {
    font-size:10px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 9px;
    line-height:1.4;
    border-radius:100px;
    white-space:nowrap
}

.badge .icon {
    width:12px;
    height:12px
}

.badge.safe {
    color:#087655;
    background:#e9f7f0
}

.badge.warn {
    color:#a87415;
    background:#fff5dd
}

.badge.danger {
    color:#c1354c;
    background:#ffedf0
}

.badge.muted {
    color:#778295;
    background:#eef1f7
}

.gdv-card h3 {
    margin-bottom:5px;
    font-size:18px
}

.gdv-card h3 a {
    color:var(--ink)
}

.gdv-card p {
    font-size:11px;
    margin:9px 0 18px;
    min-height:36px
}

.gdv-card-meta {
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line);
    padding:13px 0 17px;
    gap:10px;
    font-size:10px;
    color:var(--muted)
}

.gdv-card-meta strong {
    display:block;
    font-size:12px;
    color:var(--ink);
    margin-top:2px
}

.categories {
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:12px
}

.category {
    padding:17px 8px 13px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    text-align:center;
    transition:transform .15s
}

.category:hover {
    transform:translateY(-3px)
}

.category-icon {
    width:46px;
    height:46px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:#eef3ff;
    color:var(--blue);
    margin:0 auto 11px
}

.category-icon .icon {
    width:26px;
    height:26px
}

.category:nth-child(4n+2) .category-icon {
    background:#f4ecff;
    color:#8a5bc3
}

.category:nth-child(4n+3) .category-icon {
    background:#e9f8f1;
    color:#2a9976
}

.category:nth-child(4n) .category-icon {
    background:#fff1e9;
    color:#ce8850
}

.category b {
    font-size:10px;
    line-height:1.4;
    display:block;
    color:#5a6881;
    min-height:28px
}

.table-wrap {
    overflow-x:auto;
    width:100%;
    background:#fff;
    border:1px solid var(--line);
    border-radius:13px
}

table {
    border-collapse:collapse;
    width:100%;
    font-size:12px;
    text-align:left
}

th {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:#7b879e;
    background:#f9fbfe;
    font-weight:600
}

th,td {
    padding:15px 17px;
    border-bottom:1px solid var(--line);
    vertical-align:middle
}

tr:last-child td {
    border:0
}

.cell-person {
    display:flex;
    gap:10px;
    align-items:center;
    min-width:145px
}

.cell-person img {
    width:34px;
    height:34px;
    border-radius:10px
}

.cell-person strong {
    display:block;
    font-size:12px
}

.cell-person small {
    font-size:10px;
    color:var(--muted)
}

.post-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.post-card {
    border:1px solid var(--line);
    border-radius:15px;
    overflow:hidden;
    background:#fff
}

.post-visual {
    height:155px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    background:linear-gradient(135deg,#dcecff,#f0f5ff);
    color:#467cca;
    position:relative;
    overflow:hidden
}

.post-visual:after {
    content:"";
    position:absolute;
    border:30px solid #ffffff60;
    border-radius:50%;
    width:200px;
    height:200px;
    right:-80px;
    top:-50px
}

.post-visual.warning {
    background:linear-gradient(140deg,#fff0ed,#fff9f5);
    color:#d2795d
}

.post-visual .icon {
    width:48px;
    height:48px
}

.post-visual span {
    width:115px;
    font-size:11px;
    font-weight:700;
    line-height:1.7;
    letter-spacing:1px
}

.post-visual img {
    width:100%;
    height:100%
}

.post-body {
    padding:22px
}

.post-body .eyebrow {
    font-size:9px;
    margin-bottom:10px
}

.post-body h3 {
    font-size:17px;
    line-height:1.45
}

.post-body h3 a {
    color:var(--ink)
}

.post-body p {
    font-size:12px;
    min-height:58px
}

.post-body small {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:#8b99aa
}

.post-body small .icon {
    width:14px;
    height:14px
}

.cta {
    margin:15px 0 50px;
    background:linear-gradient(100deg,#245ce4,#3678ec);
    color:#fff;
    padding:37px 45px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}

.cta h2 {
    font-size:25px;
    margin-bottom:10px
}

.cta p {
    color:#c9dcff;
    font-size:12px;
    margin:0
}

.cta .btn {
    background:#fff;
    color:var(--blue)
}

.site-footer {
    padding:45px 0 22px;
    background:#f8fafc;
    border-top:1px solid var(--line)
}

.footer-grid {
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1.1fr;
    gap:50px
}

.footer-grid .brand {
    font-size:18px
}

.footer-grid .brand img {
    width:30px;
    height:34px
}

.footer-grid h4 {
    font-size:12px;
    margin:6px 0 16px
}

.footer-grid a:not(.brand) {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:9px
}

.footer-grid p {
    font-size:11px;
    margin:13px 0;
    line-height:1.8
}

.independent {
    font-size:9px;
    color:#7d92aa;
    padding:4px 8px;
    border:1px solid var(--line);
    border-radius:5px
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:20px;
    margin-top:32px;
    font-size:10px;
    color:#8a97aa
}

.mobile-bottom {
    display:none
}

.page {
    padding:42px 0 60px;
    background:var(--bg);
    min-height:60vh
}

.page-intro {
    margin-bottom:28px
}

.page-intro h1 {
    font-size:33px;
    margin-bottom:13px
}

.page-intro p {
    font-size:13px;
    max-width:750px
}

.card {
    border:1px solid var(--line);
    background:#fff;
    border-radius:15px;
    padding:25px;
    box-shadow:0 4px 18px #213b5c04;
    margin-bottom:20px
}

.card h2 {
    font-size:20px;
    margin-bottom:20px
}

.card h3 {
    font-size:16px
}

.two-col {
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:24px;
    align-items:start
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.field {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:17px;
    min-width:0
}

.field label,.field-label {
    font-size:12px;
    font-weight:600;
    color:#4d5e76
}

.field input,.field select,.field textarea {
    width:100%;
    border:1px solid #dce4ef;
    padding:11px 13px;
    border-radius:9px;
    outline:none;
    background:#fff;
    min-height:43px;
    font-size:13px;
    color:var(--ink)
}

.field input:focus,.field textarea:focus,.field select:focus {
    border-color:#78a0ff;
    box-shadow:0 0 0 3px #edf3ff
}

.field textarea {
    resize:vertical;
    min-height:125px;
    line-height:1.7
}

.field small {
    font-size:10px;
    color:var(--muted)
}

.field input[type=file] {
    font-size:11px
}

.checkbox {
    display:flex;
    gap:9px;
    align-items:flex-start;
    font-size:11px;
    color:#61718b;
    margin-bottom:17px
}

.checkbox input {
    margin-top:4px
}

.form-message {
    font-size:12px;
    margin:12px 0;
    color:var(--green)
}

.auth-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    max-width:940px;
    margin:auto;
    gap:50px;
    align-items:center
}

.auth-art {
    padding:40px
}

.auth-art img {
    width:135px;
    display:block;
    margin-bottom:25px
}

.auth-art h1 {
    font-size:34px
}

.auth-art p {
    font-size:13px
}

.auth-card {
    padding:32px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--line)
}

.auth-card h2 {
    font-size:24px
}

.auth-foot {
    font-size:12px;
    text-align:center;
    margin-top:20px
}

.inline-note {
    padding:13px;
    border-radius:9px;
    background:#f4f7fc;
    font-size:11px;
    color:var(--muted);
    margin-bottom:17px
}

.toolbar {
    display:flex;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:20px;
    align-items:center
}

.filters {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-bottom:25px
}

.filters a {
    font-size:11px;
    color:#64748b;
    background:#fff;
    border:1px solid var(--line);
    padding:7px 13px;
    border-radius:8px
}

.filters a.active {
    background:var(--blue);
    color:#fff;
    border-color:var(--blue)
}

.pagination {
    display:flex;
    gap:7px;
    margin:23px 0;
    justify-content:center
}

.pagination a {
    padding:7px 13px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#fff;
    color:var(--muted)
}

.pagination .active {
    background:var(--blue);
    color:#fff
}

.empty {
    text-align:center;
    padding:35px 20px;
    color:var(--muted);
    font-size:12px
}

.search-results:empty {
    display:none
}

.search-results {
    margin-top:18px
}

.result-summary {
    border-radius:10px;
    padding:17px;
    border:1px solid var(--line);
    background:#f8fafc
}

.result-summary.red {
    background:#fff0f3;
    border-color:#f7d3dc
}

.result-summary.yellow {
    background:#fff8e9;
    border-color:#f3e3ba
}

.result-summary.green {
    background:#eaf8f0;
    border-color:#cee9dc
}

.result-summary p {
    font-size:12px;
    margin:8px 0 0;
    color:inherit
}

.result-list {
    padding:0;
    margin:14px 0;
    list-style:none
}

.result-list li {
    border-bottom:1px solid var(--line);
    padding:12px 0
}

.result-list a {
    font-weight:600;
    font-size:13px
}

.result-list small {
    display:block;
    color:var(--muted);
    font-size:11px
}

.verified {
    display:inline-grid;
    place-items:center;
    background:#2587ee;
    border-radius:50%;
    color:#fff;
    width:23px;
    height:23px
}

.verified .icon {
    width:16px;
    height:16px
}

.detail {
    min-width:0
}

.detail span {
    font-size:11px;
    color:var(--muted);
    display:block;
    margin-bottom:4px
}

.detail strong {
    font-size:13px;
    font-weight:600;
    overflow-wrap:anywhere
}

.prose {
    font-size:14px;
    line-height:1.9;
    overflow-wrap:anywhere
}

.prose h2 {
    margin-top:32px
}

.prose p {
    color:#556781;
    white-space:pre-line
}

.prose img {
    max-height:400px;
    border-radius:13px
}

.article-width {
    max-width:820px;
    margin:auto
}

.article-title {
    font-size:36px;
    line-height:1.3;
    margin:12px 0 18px
}

.article-meta {
    font-size:11px;
    color:var(--muted);
    margin-bottom:30px
}

.comment-item {
    border-bottom:1px solid var(--line);
    padding:15px 0
}

.comment-item strong {
    font-size:12px
}

.comment-item p {
    white-space:pre-line;
    font-size:12px;
    margin:7px 0
}

.qr-box {
    text-align:center
}

.qr-box svg,.qr-box img {
    width:160px;
    height:160px
}

.qr-box p {
    font-size:11px;
    overflow-wrap:anywhere;
    margin:12px 0
}

.scan-check {
    display:flex;
    gap:12px;
    padding:13px 0;
    border-bottom:1px solid var(--line);
    align-items:flex-start
}

.scan-check strong {
    font-size:12px
}

.scan-check p {
    font-size:11px;
    margin:5px 0 0
}

.scan-check .icon {
    color:var(--green)
}

.scan-check.failed .icon {
    color:#d0973e
}

.scan-score {
    font-size:40px;
    font-weight:700;
    color:var(--blue)
}

.scan-status {
    font-size:11px;
    color:var(--muted)
}

#toasts {
    position:fixed;
    z-index:200;
    right:20px;
    top:20px;
    display:grid;
    gap:9px;
    max-width:350px
}

.toast {
    padding:13px 18px;
    border-radius:11px;
    background:#fff;
    box-shadow:0 10px 40px #10264620;
    border:1px solid #dcecdf;
    color:#247052;
    font-size:12px
}

.toast.error {
    border-color:#fad6d9;
    color:#b63d4c
}

#loader {
    position:fixed;
    inset:0;
    background:#fff;
    z-index:300;
    display:grid;
    place-items:center;
    pointer-events:none;
    animation:loader-exit .2s 1.4s forwards
}

#loader img {
    width:55px;
    animation:pulse .8s infinite alternate
}

.loaded #loader {
    display:none
}

.chart {
    width:100%;
    height:200px
}

.chart-labels {
    display:flex;
    justify-content:space-between;
    font-size:9px;
    color:var(--muted)
}

.progress-row {
    margin:22px 0
}

.progress-row p {
    font-size:12px;
    display:flex;
    justify-content:space-between;
    margin-bottom:9px
}

.progress-track {
    height:8px;
    background:#f0f4fa;
    border-radius:10px;
    overflow:hidden
}

.progress-fill {
    height:100%;
    background:var(--blue);
    border-radius:10px
}

.row-actions {
    display:flex;
    gap:6px;
    flex-wrap:wrap
}

.row-actions .btn {
    font-size:10px;
    padding:5px 9px;
    min-height:29px
}

.bank-row {
    display:grid;
    grid-template-columns:1fr 1fr 1.1fr 50px 32px;
    gap:8px;
    margin-bottom:12px;
    align-items:center
}

.bank-row input {
    width:100%;
    padding:8px;
    border:1px solid var(--line);
    border-radius:7px;
    font-size:11px;
    min-width:0
}

.bank-row label {
    font-size:8px;
    text-align:center
}

.bank-row input[type=checkbox] {
    width:15px
}

.muted {
    color:var(--muted)
}

.space-top {
    margin-top:25px
}

.scroll-safe {
    overflow-wrap:anywhere
}

.kpi-gdv {
    font-size:30px;
    color:var(--blue);
    font-weight:700
}

details {
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    padding:17px;
    margin-bottom:15px
}

summary {
    font-size:13px;
    font-weight:600;
    cursor:pointer
}

details form {
    margin-top:20px
}

.rating-options {
    display:flex;
    gap:15px;
    font-size:12px;
    margin-bottom:18px
}

.rating-options label {
    display:flex;
    gap:5px;
    align-items:center
}

.pill {
    padding:4px 9px;
    border-radius:6px;
    background:#f0f4fb;
    font-size:10px;
    color:#64789a
}

button:focus-visible,a:focus-visible {
    outline:3px solid #9fbaff;
    outline-offset:3px
}

.actions {
    display:flex;
    gap:9px;
    flex-wrap:wrap
}

.mini-list {
    list-style:none;
    padding:0
}

.mini-list li {
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:12px
}

.mini-list small {
    display:block;
    font-size:10px;
    color:var(--muted)
}

/* Enterprise design tokens and locally hosted, Vietnamese-capable typefaces. */
@font-face {
    font-family: Inter;
    src: url('../fonts/Inter-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url('../fonts/Inter-Italic-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Roboto;
    src: url('../fonts/Roboto-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: Poppins;
    src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

:root {
    --navy: #102c4e;
    --blue: #173d68;
    --gold: #c49a4a;
    --green: #148564;
    --text: #16324f;
    --muted: #677b91;
    --line: #e1e8f0;
    --bg: #f5f7fb;
    --soft: #eef3f8;
    --radius: 18px;
}

body {
    color: var(--text);
    font-family: Inter, Roboto, BeVietnam, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    background: var(--bg);
}

button, input, textarea, select {
    font-family: inherit;
}

[hidden] {
    display: none !important;
}

a {
    text-decoration: none;
}

a:focus-visible, button:focus-visible {
    outline: 3px solid #c49a4a99;
    outline-offset: 4px;
}

.container {
    max-width: 1200px;
    width: calc(100% - 64px);
    padding-left: 0;
    padding-right: 0;
}

.topline {
    background: var(--navy);
    color: #e7eef7;
    font-size: 11px;
}

.topline a {
    color: #e7eef7;
}

.site-header {
    background: #ffffffed;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}

.nav-wrap {
    min-height: 84px;
}

.brand {
    color: var(--navy);
    font-size: 20px;
    letter-spacing: -.6px;
}

.brand-dot {
    color: var(--gold);
}

.brand small {
    font-size: 8px;
    letter-spacing: 1.1px;
}

.brand img {
    width: 36px;
    height: 42px;
}

#main-nav {
    gap: 24px;
}

#main-nav a {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.btn {
    font-size: 13px;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 10px;
    font-weight: 650;
    transition: background .2s, box-shadow .2s, transform .2s;
}

.btn-primary {
    background: var(--navy);
    border-color: var(--navy);
    color: white;
    box-shadow: 0 8px 18px #102c4e1a;
}

.btn-primary:hover, .btn-primary:focus {
    background: #1c4675;
    border-color: #1c4675;
}

.btn-outline {
    background: white;
    border: 1px solid #ced9e7;
    color: var(--navy);
}

.btn-outline:hover {
    background: #edf3fa;
    color: var(--navy);
}

.btn-gold {
    background: #f4e8cc;
    color: #6e511e;
    border: 1px solid #e4c98d;
}

.btn-gold:hover {
    background: #eed9a6;
}

.btn-danger {
    background: #fbefef;
    border-color: #f0caca;
    color: #b6353e;
}

.btn-danger:hover {
    background: #b6353e;
    color: white;
}

.card, .gdv-card, .post-card {
    border-radius: 18px;
    border: 1px solid #e2e9f2;
    box-shadow: 0 10px 32px #102c4e05;
    background: #fff;
    display: block;
}

.card {
    padding: 26px;
}

.glass-card {
    background: #ffffffee;
    backdrop-filter: blur(14px);
    border: 1px solid #fff;
    box-shadow: 0 22px 45px #1835520d;
}

.badge {
    color: #64758a;
    white-space: normal;
    line-height: 1.5;
}

.badge.safe, .text-safe {
    color: #128360;
}

.badge.safe {
    background: #e6f5ee;
}

.badge.warn {
    color: #886519;
    background: #fff4d8;
}

.badge.danger {
    color: #af3541;
    background: #fbebee;
}

.eyebrow, .section-tag {
    color: #94732f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.enterprise-hero {
    position: relative;
    background: #f1f5f9;
    overflow: hidden;
}

.hero-slide {
    min-height: 490px;
    position: relative;
}

.hero-art {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
}

.hero-slide:not(:first-child)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f7fafcee 0%, #f7fafce6 40%, #f7fafc22 75%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 68px;
    padding-bottom: 80px;
}

.hero-content h1 {
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.15;
    font-weight: 780;
    letter-spacing: -2px;
    max-width: 570px;
    margin: 18px 0;
    color: var(--navy);
}

.hero-content h1 em {
    font-style: normal;
    color: #99712a;
}

.hero-content p {
    max-width: 500px;
    font-size: 15px;
    color: #5d738b;
    margin: 0 0 24px;
}

.hero-label {
    font-size: 10px;
    letter-spacing: 1.8px;
    font-weight: 750;
    color: #7e662f;
}

.hero-proof {
    display: flex;
    gap: 20px;
    margin-top: 23px;
    color: #637991;
    font-size: 11px;
}

.hero-proof i {
    color: #128360;
    margin-right: 6px;
}

.slider-controls {
    position: absolute;
    bottom: 38px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-controls>button {
    border: 1px solid #d4dfec;
    background: #ffffffdd;
    color: var(--navy);
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.slider-dots {
    display: flex;
    gap: 8px;
}

.slider-dots button {
    width: 7px;
    height: 7px;
    border: 0;
    border-radius: 9px;
    background: #b5c2d0;
    padding: 0;
}

.slider-dots button[aria-pressed=true] {
    background: var(--gold);
    width: 24px;
}

.hero-search {
    position: relative;
    margin-top: -24px;
    z-index: 4;
    scroll-margin-top: 110px;
}

.search-box {
    padding: 25px 28px;
    border-radius: 18px;
}

.search-head h2 {
    font-size: 23px;
    margin: 4px 0 18px;
}

.search-head>span {
    color: var(--muted);
    font-size: 11px;
}

.search-form {
    gap: 12px;
    background: #f8fafd;
    padding: 8px;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}

.search-input input {
    background: transparent;
    color: var(--navy);
    font-size: 14px;
}

.quick-tags {
    font-size: 11px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.quick-tags button {
    border: 0;
    background: #f0f4f8;
    color: #47627f;
    padding: 5px 9px;
    border-radius: 5px;
}

.stats-strip {
    margin-top: 22px;
    box-shadow: none;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--line);
}

.stat strong {
    color: var(--navy);
    font-size: 28px;
}

.stat-icon {
    color: var(--gold);
    background: #faf5e9;
}

.stat small {
    font-size: 11px;
}

.independent-notice {
    font-size: 12px;
    background: #f1f6fb;
    border-color: #d8e5f2;
    margin-top: 24px;
}

.independent-notice p {
    margin: 5px 0 7px;
}

.independent-notice small {
    color: #71849a;
    font-size: 11px;
}

.section {
    padding: 64px 0;
}

.section.soft {
    background: #eef3f8;
}

.section-heading h2 {
    font-size: 30px;
    font-weight: 750;
    color: var(--navy);
    margin-bottom: 9px;
}

.section-heading p {
    font-size: 13px;
    color: var(--muted);
}

.text-link {
    color: #294e79;
    font-size: 12px;
    font-weight: 650;
}

.gdv-cover {
    background: linear-gradient(120deg, #102c4ed9, #183f6599), url('../images/profile-cover-enterprise.webp') center / cover;
    height: 110px;
}

.gdv-avatar {
    border-radius: 50%;
    border: 5px solid white;
}

.gdv-card-body h3 {
    font-size: 20px;
}

.gdv-card-meta strong {
    font-size: 13px;
    color: var(--navy);
}

.category {
    border: 1px solid #e0e8f1;
    background: #fff;
    border-radius: 14px;
    min-height: 128px;
    padding: 20px 10px;
}

.category-icon {
    background: #edf3f9;
    border-radius: 12px;
    width: 45px;
    height: 45px;
    color: #315378;
}

.category-icon i {
    font-size: 23px;
}

.category b {
    font-size: 11px;
    line-height: 1.45;
}

.post-visual {
    height: 190px;
    position: relative;
    overflow: hidden;
}

.post-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-body h3 {
    font-size: 19px;
    line-height: 1.45;
}

.post-body p {
    font-size: 13px;
}

.post-body small {
    font-size: 11px;
}

.how-it-works {
    display: grid;
    grid-template-columns: .85fr 1fr;
    gap: 80px;
    margin-bottom: 48px;
}

.how-it-works h2 {
    font-size: 32px;
    line-height: 1.3;
    margin: 14px 0;
    color: var(--navy);
}

.how-it-works p {
    color: var(--muted);
    font-size: 13px;
}

.verification-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.verification-steps li {
    display: flex;
    gap: 20px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
}

.verification-steps li>span {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #97732e;
    background: #f7f0df;
    font-size: 14px;
    font-weight: 750;
}

.verification-steps h3 {
    font-size: 17px;
    margin: 0 0 6px;
}

.verification-steps p {
    margin: 0;
}

.cta {
    background: linear-gradient(110deg, #102c4e, #1a4167);
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #2d527a;
}

.cta .btn {
    background: #f0dfb6;
    color: #6c501a;
}

.site-footer {
    background: white;
    border-top: 1px solid var(--line);
    padding-top: 45px;
}

.field input, .field textarea, .field select {
    font-size: 14px;
    min-height: 44px;
    border-radius: 9px;
    border-color: #d6e0ec;
}

.field input:focus, .field textarea:focus, .field select:focus {
    border-color: #577daa;
    box-shadow: 0 0 0 3px #1c497914;
}

.field label {
    font-size: 12px;
    font-weight: 650;
}

.field .field-error {
    color: #b6353e;
    font-size: 11px;
    margin: 2px 0 0;
}

.field input[aria-invalid=true], .field textarea[aria-invalid=true] {
    border-color: #b6353e;
}

.form-message {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 12px;
    overflow-wrap: anywhere;
}

.swal2-popup.app-toast {
    font-family: Inter, sans-serif;
    font-size: 12px;
    border: 1px solid #e1e8f1;
}

.swal2-popup.app-toast .swal2-title {
    font-size: 13px !important;
}

.empty-state {
    padding: 24px;
    background: #f7f9fc;
    color: #789;
    border-radius: 10px;
    font-size: 13px;
}

.copy-button {
    border: 1px solid #d9e3ee;
    border-radius: 8px;
    background: white;
    min-width: 36px;
    height: 36px;
    color: #466886;
}

.profile-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    color: #8291a3;
    margin-bottom: 22px;
    font-size: 11px;
}