.article-page { background: #f7f9fd; }
.article-header { position: sticky; top: 0; z-index: 80; border-bottom: 1px solid var(--line-200); background: rgba(255,255,255,.97); backdrop-filter: blur(14px); }
.article-header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.article-header .brand img { width: 54px; height: 54px; border-radius: 13px; }
.article-nav { display: flex; align-items: center; gap: 8px; }
.article-nav a { padding: 10px 13px; color: #39465a; border-radius: 9px; font-size: 13px; font-weight: 700; }
.article-nav a:hover, .article-nav a.active { color: var(--navy-900); background: #eef3ff; }
.knowledge-hero { padding: 66px 0 46px; background: radial-gradient(circle at 84% 24%, rgba(255,215,26,.42), transparent 22%), linear-gradient(120deg, #eaf0ff, #fff 52%, #fff9da); }
.knowledge-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 42px; }
.knowledge-hero h1 { margin: 12px 0 16px; color: var(--navy-950); font-size: clamp(39px, 5vw, 64px); line-height: 1.08; letter-spacing: -1.8px; }
.knowledge-hero p { max-width: 720px; margin: 0; color: var(--muted-700); font-size: 16px; line-height: 1.75; }
.knowledge-visual { min-height: 280px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: linear-gradient(145deg, var(--navy-950), var(--navy-700)); box-shadow: var(--shadow-lg); }
.knowledge-visual strong { color: #fff; font-size: clamp(44px, 8vw, 90px); letter-spacing: -2px; }
.knowledge-main { padding: 58px 0 80px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.knowledge-card { overflow: hidden; border: 1px solid var(--line-200); border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(7,19,65,.06); transition: transform .2s ease, box-shadow .2s ease; }
.knowledge-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.knowledge-card .card-visual { height: 180px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 75% 22%, rgba(255,215,26,.6), transparent 25%), linear-gradient(135deg, var(--navy-950), var(--navy-700)); font-size: 44px; font-weight: 900; }
.knowledge-card .card-copy { padding: 20px; }
.knowledge-card .card-copy > span { color: var(--navy-800); font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.knowledge-card h2 { margin: 8px 0 10px; color: var(--navy-950); font-size: 21px; line-height: 1.38; }
.knowledge-card p { min-height: 66px; margin: 0 0 16px; color: var(--muted-700); font-size: 13px; line-height: 1.65; }
.knowledge-card a { color: var(--navy-900); font-weight: 800; }
.article-main { padding: 42px 0 82px; }
.article-shell { display: grid; grid-template-columns: minmax(0, 820px) 280px; align-items: start; gap: 34px; }
.article-content { padding: 34px clamp(22px, 4vw, 52px); border: 1px solid var(--line-200); border-radius: 22px; background: #fff; box-shadow: 0 10px 35px rgba(7,19,65,.07); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; color: var(--muted-700); font-size: 12px; }
.breadcrumbs a { color: var(--navy-800); font-weight: 700; }
.article-content h1 { margin: 10px 0 14px; color: var(--navy-950); font-size: clamp(33px, 4.8vw, 52px); line-height: 1.16; letter-spacing: -1.35px; }
.article-lead { margin: 0 0 24px; color: #46536a; font-size: 16px; line-height: 1.78; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 28px; padding-bottom: 20px; color: var(--muted-700); border-bottom: 1px solid var(--line-200); font-size: 12px; }
.article-content h2 { margin: 34px 0 12px; color: var(--navy-950); font-size: 26px; line-height: 1.3; }
.article-content h3 { margin: 24px 0 9px; color: var(--navy-900); font-size: 19px; }
.article-content p, .article-content li { color: #3f4b60; font-size: 14px; line-height: 1.82; }
.article-content ul, .article-content ol { padding-left: 22px; }
.article-content li + li { margin-top: 7px; }
.article-note { margin: 24px 0; padding: 17px 18px; color: #32405a; border-left: 4px solid var(--yellow-500); border-radius: 0 12px 12px 0; background: #fff9df; line-height: 1.7; }
.article-table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: 13px; }
.article-table th, .article-table td { padding: 12px 13px; border: 1px solid var(--line-200); text-align: left; vertical-align: top; }
.article-table th { color: #fff; background: var(--navy-900); }
.article-cta { margin-top: 36px; padding: 22px; border-radius: 18px; background: linear-gradient(135deg, #eef3ff, #fff9df); }
.article-cta h3 { margin-top: 0; }
.article-sidebar { position: sticky; top: 104px; display: grid; gap: 16px; }
.sidebar-card { padding: 20px; border: 1px solid var(--line-200); border-radius: 18px; background: #fff; }
.sidebar-card h3 { margin: 0 0 12px; color: var(--navy-950); font-size: 17px; }
.sidebar-card a { display: block; padding: 9px 0; color: #46536a; border-bottom: 1px solid var(--line-100); font-size: 12px; font-weight: 650; }
.sidebar-card a:last-child { border-bottom: 0; }
.article-footer { padding: 45px 0; color: #dce4ff; background: var(--navy-950); }
.article-footer-inner { display: flex; justify-content: space-between; gap: 24px; }
.article-footer a { color: #fff; font-weight: 700; }
@media (max-width: 960px) { .knowledge-grid { grid-template-columns: repeat(2,1fr); } .article-shell { grid-template-columns: 1fr; } .article-sidebar { position: static; grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) { .article-header-inner { min-height: 72px; } .article-nav a:not(:last-child) { display: none; } .knowledge-hero { padding: 42px 0 36px; } .knowledge-hero-grid { grid-template-columns: 1fr; } .knowledge-visual { min-height: 200px; } .knowledge-grid { grid-template-columns: 1fr; } .article-content { padding: 26px 18px; border-radius: 16px; } .article-sidebar { grid-template-columns: 1fr; } .article-footer-inner { flex-direction: column; } .article-table { display: block; overflow-x: auto; white-space: nowrap; } }


/* V6 readability */
.knowledge-card .card-copy > span { font-size: 11px; }
.knowledge-card p { font-size: 14px; }
.article-content p, .article-content li { font-size: 15px; }
.article-table { font-size: 14px; }
.sidebar-card a { font-size: 13px; }

/* V9.7.8.40.3 universal radius */
[class*="-card"],[class~="card"],.modal-panel{border-radius:5px!important}


/* V9.7.8.40.3 — touchup: stronger text + 5px corners */
[class*="-card"],[class~="card"],.modal-panel,.checkout-item img,.checkout-zalo-note,.checkout-server-panel,.checkout-bank-panel,.checkout-qr-box,.payment-proof-preview,.payment-proof-box,.payment-proof-drop,.transfer-confirmation,.checkout-bank-warning,.checkout-bank-info button,.checkout-actions,.checkout-actions .btn{border-radius:5px!important}
.checkout-item small,.order-summary-card>p,.checkout-zalo-note,.checkout-bank-head p,.payment-proof-copy span,.payment-proof-preview small{font-weight:600!important}


/* V9.7.8.40.3 — full 5px radius audit */
.btn,a.btn,.sidebar-card,.article-content,.article-cta,.knowledge-card,.knowledge-visual,[class*="-card"],[class~="card"]{border-radius:5px!important}
.sidebar-card a,.knowledge-card p,.article-content p,.article-content li{font-weight:600!important}

/* V9.7.8.40.3 — ARTICLE MOBILE RESPONSIVE */
@media(max-width:680px){
  .article-header-inner{min-height:62px!important;gap:10px}
  .article-header .brand img{width:42px;height:42px}
  .article-nav{gap:6px}
  .article-nav a{font-size:11px}
  .knowledge-hero{padding:30px 0!important}
  .knowledge-hero h1{font-size:28px;line-height:1.25}
  .knowledge-hero p{font-size:13px}
  .knowledge-visual{min-height:150px!important}
  .knowledge-grid{gap:10px}
  .knowledge-card{border-radius:5px!important}
  .article-shell{gap:12px}
  .article-content{padding:16px!important;border-radius:5px!important}
  .article-content h1{font-size:27px;line-height:1.28}
  .article-content h2{font-size:21px}
  .article-content p,.article-content li{font-size:14px!important;line-height:1.7}
  .article-sidebar{gap:10px}
  .sidebar-card{padding:14px!important;border-radius:5px!important}
  .article-table{font-size:12px!important}
}