:root{
  --bg:#f7f1e7;--surface:#fffdf8;--surface-2:#f2e7d6;--ink:#211915;--muted:#6e6258;--line:#e4d5c1;
  --brand:#842e29;--brand-dark:#64211d;--brand-soft:#f4dfdb;--gold:#9c722a;--green:#385f4c;--shadow:0 18px 52px rgba(70,48,28,.09);
  --radius:24px;--max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65}a{color:inherit}.wrap{width:min(calc(100% - 36px),var(--max));margin-inline:auto}.site-header{position:sticky;top:0;z-index:30;background:rgba(247,241,231,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(228,213,193,.9)}.header-row{min-height:76px;display:flex;align-items:center;gap:28px}.site-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:max-content}.site-brand img{width:42px;height:42px;border-radius:12px}.site-brand strong{display:block;font:700 18px/1.15 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif}.site-brand small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.site-nav{display:flex;align-items:center;gap:6px;margin-left:auto}.site-nav a{padding:9px 11px;border-radius:999px;text-decoration:none;font-size:13px;font-weight:750;color:#554a42}.site-nav a:hover,.site-nav a[aria-current="page"]{background:var(--surface);color:var(--brand)}.menu-btn{display:none;margin-left:auto;border:1px solid var(--line);background:var(--surface);width:42px;height:42px;border-radius:12px;font-size:20px}.hero{padding:72px 0 36px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:32px;align-items:center}.eyebrow{margin:0 0 10px;color:var(--gold);font-weight:850;letter-spacing:.14em;font-size:11px;text-transform:uppercase}.hero h1,.page-hero h1{font:700 clamp(42px,6vw,74px)/1.02 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;letter-spacing:-.025em;margin:0;word-break:normal;overflow-wrap:normal;hyphens:none;text-wrap:balance}.hero h1 span{display:inline-block;white-space:nowrap}.hero .lead,.page-hero .lead{font-size:18px;color:var(--muted);max-width:720px;margin:20px 0 0}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:13px;border:1px solid transparent;text-decoration:none;font-size:13px;font-weight:850}.btn.primary{background:var(--brand);color:#fff;box-shadow:0 9px 22px rgba(132,46,41,.2)}.btn.primary:hover{background:var(--brand-dark)}.btn.secondary{background:var(--surface);border-color:var(--line)}.hero-panel,.today-card,.feature-card,.tool-card,.article-card,.prose-card,.module-callout{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-panel{padding:25px;position:relative;overflow:hidden}.hero-panel:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--brand-soft),transparent 70%);right:-42px;top:-40px}.hero-panel h2{font:700 24px/1.2 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:0 0 12px;position:relative}.hero-panel p{color:var(--muted);font-size:14px;position:relative}.hero-panel ul{padding-left:20px;margin:18px 0 0;color:#554a42;font-size:13px;position:relative}.section{padding:42px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:22px}.section-head h2{font:700 clamp(28px,4vw,42px)/1.12 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:0}.section-head p{margin:0;color:var(--muted);max-width:620px;font-size:14px}.tool-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.tool-card{padding:18px;text-decoration:none;min-height:190px;display:flex;flex-direction:column;transition:.18s ease}.tool-card:hover{transform:translateY(-3px);border-color:#cbb28c}.tool-icon{width:44px;height:44px;border-radius:13px;background:var(--surface-2);display:grid;place-items:center;font:700 20px/1 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;color:var(--brand)}.tool-card h3{margin:18px 0 5px;font:700 19px/1.2 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif}.tool-card p{margin:0;color:var(--muted);font-size:12px}.tool-card span{margin-top:auto;padding-top:16px;font-size:11px;font-weight:850;color:var(--brand)}.today-card{padding:28px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.today-date{font:700 clamp(34px,5vw,58px)/1 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:4px 0 10px}.today-meta{display:flex;gap:8px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;min-height:30px;border-radius:999px;padding:0 11px;background:var(--surface-2);font-size:11px;color:#5d5148}.today-actions{text-align:right}.today-actions p{font-size:12px;color:var(--muted);max-width:280px;margin:0 0 12px}.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}.feature-card{padding:26px}.feature-card h3{font:700 25px/1.2 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:0 0 10px}.feature-card p{margin:0;color:var(--muted);font-size:14px}.feature-list{display:grid;gap:10px;margin-top:18px}.feature-list div{display:flex;gap:10px;align-items:flex-start}.feature-list b{width:25px;height:25px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:11px;flex:0 0 auto}.feature-list span{font-size:13px;color:#554a42}.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.article-card{padding:21px;text-decoration:none}.article-card small{color:var(--gold);font-size:10px;font-weight:850;letter-spacing:.08em}.article-card h3{font:700 21px/1.25 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:8px 0}.article-card p{color:var(--muted);font-size:12px;margin:0}.article-card:hover{border-color:#cbb28c}.cta-band{background:#2d211c;color:#f8ecda;border-radius:30px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:28px}.cta-band h2{font:700 32px/1.15 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:0}.cta-band p{color:#cabdab;margin:8px 0 0;max-width:660px;font-size:13px}.cta-band .btn.secondary{background:#fff8ed;color:#2d211c;border-color:#e8d3b2}.site-footer{margin-top:52px;border-top:1px solid var(--line);padding:34px 0 44px}.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:28px}.footer-brand p{color:var(--muted);font-size:12px;max-width:320px}.footer-col strong{display:block;font-size:12px;margin-bottom:9px}.footer-col a{display:block;text-decoration:none;color:var(--muted);font-size:12px;padding:3px 0}.footer-col a:hover{color:var(--brand)}.copyright{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:#74685f;font-size:11px}.page-hero{padding:58px 0 26px}.page-hero h1{font-size:clamp(38px,5vw,62px)}.breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-bottom:18px}.breadcrumb a{text-decoration:none}.breadcrumb b{color:#b19b7c}.module-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:22px;align-items:start}.module-callout{padding:24px;position:sticky;top:98px}.module-callout h2{font:700 25px/1.2 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:0 0 10px}.module-callout p{color:var(--muted);font-size:13px}.status{display:inline-flex;align-items:center;gap:7px;background:#f6ead6;color:#765619;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:850}.status.ready{background:#e7f0e9;color:#315e48}.prose-card{padding:clamp(24px,4vw,42px)}.prose-card h2{font:700 30px/1.2 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:34px 0 12px}.prose-card h2:first-child{margin-top:0}.prose-card h3{font:700 21px/1.25 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:28px 0 8px}.prose-card p,.prose-card li{color:#4f453e;font-size:15px}.prose-card ul,.prose-card ol{padding-left:22px}.prose-card blockquote{margin:22px 0;padding:16px 18px;border-left:4px solid var(--gold);background:#fbf4e8;border-radius:0 14px 14px 0;color:#5b4e43}.note-box{margin:22px 0;padding:18px;border-radius:16px;background:#f5eadc;border:1px solid #ead7bf}.note-box strong{display:block;margin-bottom:5px}.comparison{width:100%;border-collapse:collapse;margin:20px 0;font-size:13px}.comparison th,.comparison td{border:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}.comparison th{background:#f6eddf}.knowledge-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.knowledge-topic{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;text-decoration:none}.knowledge-topic h2{font:700 22px/1.2 "Segoe UI Variable Display","Segoe UI",Arial,Tahoma,sans-serif;margin:0 0 6px}.knowledge-topic p{color:var(--muted);font-size:12px;margin:0}.contact-list{display:grid;gap:12px}.contact-item{display:flex;gap:14px;align-items:center;padding:17px;border:1px solid var(--line);border-radius:16px;text-decoration:none;background:#fffaf2}.contact-item b{display:block}.contact-item span{color:var(--muted);font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1020px){.tool-grid{grid-template-columns:repeat(3,1fr)}.hero-grid,.module-layout{grid-template-columns:1fr}.module-callout{position:static}.article-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.wrap{width:min(calc(100% - 24px),var(--max))}.site-nav{display:none;position:absolute;left:12px;right:12px;top:70px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.site-nav.open{display:flex}.site-nav a{border-radius:10px}.menu-btn{display:block}.hero{padding-top:38px}.hero-grid{gap:20px}.hero h1{font-size:clamp(38px,12vw,46px);line-height:1.04}.hero h1 span{white-space:normal}.hero .lead{font-size:16px}.hero-panel{padding:21px}.tool-grid,.article-grid,.split,.knowledge-index,.footer-grid{grid-template-columns:1fr}.today-card{grid-template-columns:1fr}.today-actions{text-align:left}.section{padding:31px 0}.section-head{display:block}.section-head p{margin-top:9px}.cta-band{display:block;padding:26px}.cta-band .btn{margin-top:18px}.footer-grid{gap:20px}.page-hero{padding-top:40px}.prose-card p,.prose-card li{font-size:14px}.comparison{font-size:11px}.comparison th,.comparison td{padding:8px}}


/* ================================================
   WEB-UX-1C PORTAL SYSTEM
   Modern research-oriented Portal shell.
   Canonical Tu Vi chart styles are intentionally
   outside this layer.
   ================================================ */

:root{
  --bg:#f5f6f8;
  --surface:#ffffff;
  --surface-2:#eef1f6;
  --ink:#202633;
  --muted:#5f6b7e;
  --line:#d8dee9;
  --brand:#243b6b;
  --brand-dark:#1a2b50;
  --brand-soft:#e8edf7;
  --gold:#87672f;
  --green:#3d6753;
  --shadow:0 10px 30px rgba(31,45,72,.06);
  --radius:16px;
  --max:1180px;
}

.site-header{
  background:rgba(245,246,248,.94);
  border-bottom:1px solid rgba(216,222,233,.96);
}

.header-row{
  position:relative;
  min-height:72px;
  gap:24px;
}

.site-brand img{
  border-radius:10px;
}

.site-brand small{
  color:#5f6b7e;
}

.site-nav{
  gap:3px;
}

.site-nav a{
  padding:9px 10px;
  border-radius:9px;
  color:#475467;
  font-weight:700;
}

.site-nav a:hover,
.site-nav a[aria-current="page"]{
  background:var(--brand-soft);
  color:var(--brand);
}

.menu-btn{
  border-color:var(--line);
  background:var(--surface);
  color:var(--brand);
  border-radius:10px;
}

.btn{
  border-radius:10px;
}

.btn.primary{
  background:var(--brand);
  box-shadow:0 7px 18px rgba(36,59,107,.16);
}

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

.hero-panel,
.today-card,
.feature-card,
.tool-card,
.article-card,
.prose-card,
.module-callout{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.hero-panel:before{
  background:
    radial-gradient(
      circle,
      rgba(36,59,107,.10),
      transparent 70%
    );
}

.tool-card:hover,
.article-card:hover{
  border-color:#b8c3d5;
}

.tool-icon{
  border-radius:10px;
}

.chip{
  background:#eef1f6;
  color:#475467;
}

.feature-list span{
  color:#475467;
}

.cta-band{
  background:#1f2f4d;
  color:#f8fafc;
  border-radius:18px;
}

.cta-band p{
  color:#cbd5e1;
}

.cta-band .btn.secondary{
  background:#ffffff;
  color:#1f2f4d;
  border-color:#d8dee9;
}

.prose-card p,
.prose-card li{
  color:#344054;
}

.prose-card blockquote{
  background:#f7f8fb;
  color:#475467;
  border-left-color:var(--gold);
}

.note-box{
  background:#f3f5f9;
  border-color:#dfe4ec;
}

.comparison th{
  background:#f3f5f9;
}

.knowledge-topic{
  border-radius:14px;
}

.contact-item{
  background:#ffffff;
  border-radius:14px;
}

@media(max-width:1120px){

  .site-nav{
    display:none;
    position:absolute;
    z-index:50;
    left:0;
    right:0;
    top:calc(100% + 8px);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px;
    box-shadow:0 16px 36px rgba(31,45,72,.12);
    flex-direction:column;
    align-items:stretch;
  }

  .site-nav.open{
    display:flex;
  }

  .site-nav a{
    border-radius:8px;
    padding:11px 12px;
  }

  .menu-btn{
    display:block;
  }
}


/* ================================================
   WEB-UX-1D HOME EXPLORE
   Separate brand homepage from tool discovery.
   ================================================ */

.home-hero{
  padding-top:78px;
  padding-bottom:46px;
}

.home-principles{
  border-color:#cfd8e7;
}

.home-principles li + li{
  margin-top:9px;
}

.home-tool-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.tool-card-featured{
  border-color:#bac6da;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f5f7fb 100%
    );
}

.tool-card-featured .tool-icon{
  background:var(--brand);
  color:#ffffff;
}

.home-method-section{
  padding-top:52px;
}

.text-link,
.path-links a{
  display:inline-flex;
  margin-top:18px;
  text-decoration:none;
  color:var(--brand);
  font-size:12px;
  font-weight:800;
}

.text-link:hover,
.path-links a:hover{
  text-decoration:underline;
}

.explore-hero .lead{
  max-width:780px;
}

.explore-tool-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.explore-path-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.explore-path-grid .feature-card{
  display:flex;
  flex-direction:column;
  min-height:245px;
}

.explore-path-grid .feature-card p:not(.eyebrow){
  flex:1;
}

.path-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.explore-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

@media(max-width:1020px){

  .home-tool-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .explore-path-grid{
    grid-template-columns:1fr;
  }

  .explore-path-grid .feature-card{
    min-height:0;
  }
}

@media(max-width:760px){

  .home-hero{
    padding-top:44px;
    padding-bottom:28px;
  }

  .home-tool-grid,
  .explore-tool-grid{
    grid-template-columns:1fr;
  }

  .explore-cta-actions{
    justify-content:flex-start;
  }

  .explore-cta-actions .btn{
    margin-top:14px;
  }
}

/* WEB-UX-TT-3D2: Tứ Trụ result containment */
[data-tutru-result]{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

[data-tutru-result] > .tt-preview-scroll{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}

[data-tutru-result] .tt-preview-chart[data-tutru-chart]{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* WEB-UX-TT-3D3: final Tứ Trụ overflow containment */
[data-tutru-result]{
  overflow-x:hidden;
}

[data-tutru-result] > .tt-preview-scroll{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  box-sizing:border-box;
}

[data-tutru-result] .tt-preview-chart[data-tutru-chart]{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* WEB-UX-TT-3D4: fit Tứ Trụ table to Web result shell */
[data-tutru-result] .tu-tru-table{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* AQ3-A1 HOME ARCHITECTURE */

.home-journey-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.home-journey-grid .feature-card{
  display:flex;
  flex-direction:column;
  min-height:250px;
}

.home-journey-grid .feature-card .text-link{
  margin-top:auto;
  padding-top:18px;
}

.home-knowledge-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media(max-width:1020px){

  .home-journey-grid{
    grid-template-columns:1fr;
  }

  .home-journey-grid .feature-card{
    min-height:0;
  }

  .home-knowledge-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){

  .home-knowledge-grid{
    grid-template-columns:1fr;
  }
}
/* AQ3-A2 TU VI HUB PATHWAYS */

.tv-hub .tv-tool-card{
  display:flex;
  flex-direction:column;
}

.tv-hub .tv-tool-card > div{
  display:flex;
  flex:1;
  flex-direction:column;
}

.tv-hub .tv-tool-inline-link{
  display:inline-flex;
  align-items:center;
  margin-top:auto;
  padding-top:16px;
  color:var(--brand);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

.tv-hub .tv-tool-inline-link:hover{
  text-decoration:underline;
}

.tv-hub .tv-knowledge-live{
  transition:
    transform .18s ease,
    border-color .18s ease;
}

.tv-hub .tv-knowledge-live:hover{
  transform:translateY(-2px);
  border-color:#b8c3d5;
}

@media(max-width:760px){

  .tv-hub .tv-tool-inline-link{
    padding-top:12px;
  }
}
/* AQ3-A3 TU TRU READING MAP */

.tt-reading-map{
  padding-top:34px;
}

.tt-reading-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.tt-reading-card{
  display:flex;
  flex-direction:column;
  min-height:220px;
  text-decoration:none;
  transition:
    transform .18s ease,
    border-color .18s ease;
}

.tt-reading-card:hover{
  transform:translateY(-2px);
  border-color:#b8c3d5;
}

.tt-reading-index{
  display:block;
  margin-bottom:16px;
  color:var(--gold);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
}

.tt-reading-card strong{
  margin-top:auto;
  padding-top:18px;
  color:var(--brand);
  font-size:12px;
}

.tt-reading-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  margin-top:18px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  font-size:12px;
}

.tt-reading-links span{
  color:var(--muted);
}

.tt-reading-links a{
  color:var(--brand);
  font-weight:800;
  text-decoration:none;
}

.tt-reading-links a:hover{
  text-decoration:underline;
}

#tt-bon-tru,
#tt-thap-than,
#tt-vuong-suy,
#tt-van-han{
  scroll-margin-top:96px;
}

@media(max-width:1020px){

  .tt-reading-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .tt-reading-card{
    min-height:190px;
  }
}

@media(max-width:760px){

  .tt-reading-grid{
    grid-template-columns:1fr;
  }

  .tt-reading-card{
    min-height:0;
  }

  .tt-reading-links{
    align-items:flex-start;
    flex-direction:column;
  }
}
/* AQ3-A5 KNOWLEDGE ARCHITECTURE */

.knowledge-groups{
  padding-top:28px;
}

.knowledge-group + .knowledge-group{
  margin-top:46px;
  padding-top:42px;
  border-top:1px solid var(--line);
}

.knowledge-group-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
}

.knowledge-group-head h2{
  margin:0;
  font:700 clamp(26px,3vw,36px)/1.15
    "Segoe UI Variable Display",
    "Segoe UI",
    Arial,
    Tahoma,
    sans-serif;
}

.knowledge-group-head > p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.knowledge-group .knowledge-index{
  align-items:stretch;
}

.knowledge-group .knowledge-topic{
  display:flex;
  flex-direction:column;
}

.knowledge-topic-research{
  border-color:#c3ccdc;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f6f8fb 100%
    );
}

@media(max-width:760px){

  .knowledge-group + .knowledge-group{
    margin-top:34px;
    padding-top:32px;
  }

  .knowledge-group-head{
    display:block;
  }

  .knowledge-group-head > p{
    margin-top:8px;
  }
}
/* AQ4-A1 CONTEXT WAYFINDING */

.context-nav-wrap{
  padding-top:18px;
}

.context-nav{
  display:flex;
  align-items:center;
  gap:14px 20px;
  min-width:0;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(31,45,72,.04);
}

.context-nav-label{
  flex:0 0 auto;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.context-nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  min-width:0;
}

.context-nav-links a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 10px;
  border-radius:9px;
  color:var(--brand);
  font-size:12px;
  font-weight:750;
  text-decoration:none;
}

.context-nav-links a:hover{
  background:var(--brand-soft);
}

.context-nav-links a:focus-visible{
  outline:3px solid rgba(36,59,107,.28);
  outline-offset:2px;
}

.dich-r9 .context-nav-dich{
  margin:18px 0 22px;
}

#bat-dau,
#phuong-phap,
#cau-truc-la-so,
#hoc-va-nghien-cuu,
#knowledge-calendar-title,
#knowledge-date-title,
#knowledge-method-title,
#knowledge-research-title,
#dich-choice-title{
  scroll-margin-top:96px;
}

@media(max-width:760px){

  .context-nav{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding:12px;
  }

  .context-nav-links{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }

  .context-nav-links a{
    flex:0 0 auto;
  }
}
/* AQ4-A2 ACCESSIBILITY MOBILE POLISH */

/*
   Visible keyboard focus across the shared portal shell.
   :focus-visible avoids showing the ring for ordinary pointer clicks.
*/
:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]
):focus-visible{
  outline:3px solid rgba(36,59,107,.34);
  outline-offset:3px;
}

/*
   Keep the mobile menu control at the recommended
   minimum touch target without changing its visual hierarchy.
*/
.menu-btn{
  min-width:44px;
  min-height:44px;
}

/*
   Navigation links become full touch targets when
   the desktop navigation collapses.
*/
@media(max-width:1120px){

  .site-nav a{
    display:flex;
    align-items:center;
    min-height:44px;
  }
}

/*
   Small contextual and footer links remain comfortable
   to tap on narrow screens.
*/
@media(max-width:760px){

  .context-nav-links a{
    min-height:44px;
  }

  .footer-col a{
    display:flex;
    align-items:center;
    min-height:44px;
  }
}

/*
   Respect operating-system reduced-motion preference.
   Functional state changes remain, decorative motion is suppressed.
*/
@media(prefers-reduced-motion:reduce){

  html:focus-within{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}