/* Each direction owns semantic colors, composition, identity and responsive treatment. */

[data-theme="dai-sao"] {
  color-scheme: dark; --bg:#101b30; --surface:#17263e; --ink:#f9f1db; --muted:#b8c7dc;
  --action:#ecd290; --on-action:#17213a; --accent:#ecd290; --on-accent:#17213a;
  --soft:#24354f; --line:#617087; --control:#91a1b8; --focus:#a6e4ff;
  --danger:#ffb6bb; --on-danger:#421018; --radius:12px; --display:Georgia,'Times New Roman',serif; --heading-weight:400;
}
[data-theme="dai-sao"] .product-shell { display: grid; grid-template-columns: 218px minmax(0,1fr); }
[data-theme="dai-sao"] .brand-header { border-right: 1px solid var(--line); border-bottom: 0; flex-direction: column; align-items: start; justify-content: start; padding: 38px 26px; }
[data-theme="dai-sao"] .brand { flex-direction: column; align-items: start; gap: 20px; font-family: Georgia,serif; }
[data-theme="dai-sao"] .brand-header nav { margin: 45px 0 0; flex-direction: column; width: 100%; }
[data-theme="dai-sao"] .brand-header nav button { text-align: start; }
[data-theme="dai-sao"] .product-body { padding: 0 5%; }
[data-theme="dai-sao"] .welcome { text-align: center; position: relative; display: flex; flex-direction: column; gap: 0; padding: 12px 0 24px; }
[data-theme="dai-sao"] .intro { max-width: 760px; }
[data-theme="dai-sao"] .intro h1 { font-size: clamp(2.7rem,4.1vw,4rem); }
[data-theme="dai-sao"] .hero-art { max-height: 230px; }
[data-theme="dai-sao"] .hero-visual { width: 100%; }
[data-theme="dai-sao"] .type-grid { grid-template-columns: 1fr 1fr; gap: 0 24px; }
[data-theme="dai-sao"] .type-tile { flex-direction: row; border-width: 0 0 1px; border-radius: 0; background: none; align-items: center; padding: 24px 8px; }
[data-theme="dai-sao"] .tile-arrow { display: block; width: 20px; margin-left: auto; }
[data-theme="dai-sao"] .workflow { grid-template-columns: minmax(180px,.7fr) minmax(0,1.3fr); gap: 6%; }
[data-theme="dai-sao"] .form-aside h1 { font-size: 3.2rem; }
[data-theme="dai-sao"] .reading-paper { border-top: 3px solid var(--accent); }
[data-theme="dai-sao"] .card-face { border: 1px solid var(--accent); border-radius: 70px 70px 8px 8px; padding-top: 25px; }
[data-theme="dai-sao"] .result-layout { grid-template-columns: 155px minmax(0,1fr); gap: 25px; }

[data-theme="vuon-duyen"] {
  --bg:#f4f8ea; --surface:#ffffff; --ink:#233d2c; --muted:#52694e;
  --action:#2c6545; --on-action:#ffffff; --accent:#efce59; --on-accent:#233d2c;
  --soft:#e0edcf; --line:#98ae83; --control:#738564; --focus:#7c2a78;
  --danger:#a02d32; --on-danger:#ffffff; --radius:28px; --display:Georgia,'Times New Roman',serif; --heading-weight:400; --button-radius:28px;
}
[data-theme="vuon-duyen"] .welcome { grid-template-columns: 1fr 1fr; background: var(--soft); border-radius: 40px 120px 40px 40px; padding: 40px; }
[data-theme="vuon-duyen"] .intro h1 { font-size: clamp(2.5rem,4vw,3.9rem); }
.garden-path { position: relative; max-width: 1040px; margin: 45px auto; }
.garden-stop { margin: 0 0 32px 20px; border-left: 2px dashed var(--control); padding: 0 0 24px 34px; }
.stop-heading { display: flex; align-items: center; gap: 18px; margin: 0 0 22px -55px; }
.stop-heading > span { border-radius: 50%; background: var(--action); color: var(--on-action); width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; }
.stop-heading h2 { background: var(--bg); padding: 8px 10px 8px 0; margin: 0; font-family: Georgia,serif; }
.garden-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.garden-options .type-tile { flex-direction: row; align-items: center; border: 0; padding: 24px; }
.garden-options .tile-art { border-radius: 50% 20% 50% 20%; padding: 12px; background: var(--soft); }
[data-theme="vuon-duyen"] .workflow { grid-template-columns: .6fr 1.4fr; }
[data-theme="vuon-duyen"] .form-aside { padding: 32px 20px; border-radius: 80px 80px 20px 20px; background: var(--soft); text-align: center; }
[data-theme="vuon-duyen"] .result-layout { display: block; max-width: 850px; margin-inline: auto; }
[data-theme="vuon-duyen"] .reading-aside { display: none; }
[data-theme="vuon-duyen"] .reading-paper { background: none; border: 0; padding: 0 0 0 28px; border-left: 2px dashed var(--control); }
[data-theme="vuon-duyen"] .result-section { border-radius: 26px; padding: 24px 32px; background: var(--surface); position: relative; }
[data-theme="vuon-duyen"] .result-section::before { content:''; position: absolute; left: -37px; top: 35px; width: 15px; height: 15px; border-radius: 50%; background: var(--action); }
[data-theme="vuon-duyen"] .result-section h2 { margin-top: 0; }
[data-theme="vuon-duyen"] .result-section p { margin: 0; }

[data-theme="tram-tin-hieu"] {
  --bg:#edf0ff; --surface:#ffffff; --ink:#151d51; --muted:#525b7e;
  --action:#263ec3; --on-action:#ffffff; --accent:#d6ed54; --on-accent:#151d51;
  --soft:#dce3ff; --line:#8791b4; --control:#6a7599; --focus:#a01c69;
  --danger:#ad2037; --on-danger:#ffffff; --radius:4px; --display:'Courier New',Courier,monospace; --button-radius:3px;
}
[data-theme="tram-tin-hieu"] .brand-header { background: var(--action); color: var(--on-action); border-bottom: 5px solid var(--ink); }
[data-theme="tram-tin-hieu"] .brand > .icon, [data-theme="tram-tin-hieu"] .brand small { color: var(--accent); }
[data-theme="tram-tin-hieu"] .brand-header nav button[aria-current] { background: var(--accent); color: var(--ink); }
[data-theme="tram-tin-hieu"] .welcome { border: 2px solid var(--ink); gap: 0; align-items: stretch; }
[data-theme="tram-tin-hieu"] .intro { padding: 32px; background: var(--accent); }
[data-theme="tram-tin-hieu"] .intro h1 { font-size: clamp(2rem,3.3vw,3.3rem); line-height: 1.2; letter-spacing: -.06em; }
[data-theme="tram-tin-hieu"] .intro p, [data-theme="tram-tin-hieu"] .intro .eyebrow { color: var(--ink); }
[data-theme="tram-tin-hieu"] .hero-visual { display: grid; place-content: center; padding: 16px; background: var(--soft); border-left: 2px solid var(--ink); }
[data-theme="tram-tin-hieu"] .type-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
[data-theme="tram-tin-hieu"] .type-tile { border: 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 22px 18px; border-radius: 0; }
[data-theme="tram-tin-hieu"] .tile-number { display: block; background: var(--ink); color: var(--accent); padding: 1px 7px; font-family: monospace; }
[data-theme="tram-tin-hieu"] .tile-art { align-self: end; }
[data-theme="tram-tin-hieu"] .type-tile:hover { transform: none; background: var(--accent); }
[data-theme="tram-tin-hieu"] .type-tile:hover small { color: var(--ink); }
[data-theme="tram-tin-hieu"] .workflow { border: 2px solid var(--ink); padding: 0; gap: 0; grid-template-columns: 1fr 1.6fr; }
[data-theme="tram-tin-hieu"] .form-aside { padding: 32px; background: var(--accent); height: 100%; border-right: 2px solid var(--ink); }
[data-theme="tram-tin-hieu"] .form-aside p, [data-theme="tram-tin-hieu"] .form-aside .eyebrow { color: var(--ink); }
[data-theme="tram-tin-hieu"] .form-aside h1 { font-size: 2.8rem; }
[data-theme="tram-tin-hieu"] .form-paper { border: 0; border-radius: 0; }
[data-theme="tram-tin-hieu"] .result-heading { text-align: start; border-left: 12px solid var(--action); padding-left: 28px; max-width: none; }
[data-theme="tram-tin-hieu"] .reading-paper { border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--soft); }
[data-theme="tram-tin-hieu"] .result-section h2 { background: var(--accent); display: inline-block; padding: 7px 12px; font-size: 1.4rem; }
[data-theme="tram-tin-hieu"] .card-face { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--action); border-radius: 0; }

[data-theme="thu-gui-minh"] {
  --bg:#f9eded; --surface:#fffaf7; --ink:#502b36; --muted:#73575e;
  --action:#8b3552; --on-action:#ffffff; --accent:#edc4ba; --on-accent:#502b36;
  --soft:#f0dada; --line:#b18c96; --control:#92727b; --focus:#194e96;
  --danger:#a42135; --on-danger:#ffffff; --radius:8px; --display:Georgia,'Times New Roman',serif; --heading-weight:400; --button-radius:8px;
}
[data-theme="thu-gui-minh"] .brand-header { border: 0; }
[data-theme="thu-gui-minh"] .brand { font-family: Georgia,serif; }
[data-theme="thu-gui-minh"] main:has(.welcome) { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
[data-theme="thu-gui-minh"] .welcome { display: block; margin: 25px 0; }
[data-theme="thu-gui-minh"] .intro h1 { font-size: clamp(2.5rem,3.6vw,3.6rem); font-style: italic; }
[data-theme="thu-gui-minh"] .hero-art { margin-top: 28px; max-width: 380px; }
.letter-list { background: var(--surface); border: 1px solid var(--line); padding: 24px 32px; margin-top: 15px; box-shadow: 10px 10px 0 var(--soft); }
.letter-tab { font-family: Georgia,serif; font-size: 1.2rem; border-bottom: 1px solid var(--line); padding: 0 0 20px; }
.letter-list .type-tile { border: 0; border-bottom: 1px solid var(--soft); border-radius: 0; flex-direction: row; align-items: center; gap: 20px; padding: 18px 0; background: none; width: 100%; }
.letter-list .tile-art .icon { width: 26px; height: 26px; }
.letter-list .tile-copy strong { font-family: Georgia,serif; font-size: 1.1rem; }
.letter-list .tile-copy small { font-size: .8125rem; }
.letter-list .tile-arrow { display: block; margin-left: auto; width: 18px; }
[data-theme="thu-gui-minh"] .closing-note { grid-column: 1/-1; margin: 0 0 20px; }
[data-theme="thu-gui-minh"] .workflow { max-width: 1050px; margin: auto; gap: 55px; }
[data-theme="thu-gui-minh"] .form-paper { border-radius: 0; border-top: 6px solid var(--action); box-shadow: 9px 9px 0 var(--soft); }
[data-theme="thu-gui-minh"] .form-aside h1 { font-style: italic; }
[data-theme="thu-gui-minh"] .result-heading h1 { font-style: italic; }
[data-theme="thu-gui-minh"] .result-layout { display: block; max-width: 800px; margin-inline: auto; }
[data-theme="thu-gui-minh"] .reading-aside { display: none; }
[data-theme="thu-gui-minh"] .reading-paper { padding: 48px 64px; border-top: 6px solid var(--action); box-shadow: 10px 10px 0 var(--soft); }
[data-theme="thu-gui-minh"] .result-section h2 { font-style: italic; }
[data-theme="thu-gui-minh"] .after-reading { max-width: 1000px; margin: 45px auto; }

@media (max-width: 1100px) {
  [data-theme="dai-sao"] .product-shell { grid-template-columns: 180px minmax(0,1fr); }
  [data-theme="dai-sao"] .brand-header { padding: 30px 18px; }
  [data-theme="tram-tin-hieu"] .type-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  [data-theme="thu-gui-minh"] main:has(.welcome) { gap: 28px; }
  .letter-list { padding: 20px; }
}
@media (max-width: 850px) {
  [data-theme="dai-sao"] .product-shell { display: block; }
  [data-theme="dai-sao"] .brand-header { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  [data-theme="dai-sao"] .brand { flex-direction: row; align-items: center; }
  [data-theme="dai-sao"] .brand-header nav { flex-direction: row; margin: 0 0 0 auto; width: auto; }

  [data-theme="vuon-duyen"] .welcome { padding: 28px; }
}
@media (max-width: 700px) {

  [data-theme="dai-sao"] .product-body { padding: 0 20px; }
  [data-theme="dai-sao"] .welcome { padding: 0; }
  [data-theme="dai-sao"] .intro h1 { font-size: 2.6rem; }
  [data-theme="dai-sao"] .hero-art { max-height: 200px; }
  [data-theme="dai-sao"] .type-grid { grid-template-columns: 1fr; }
  [data-theme="dai-sao"] .tile-copy small { font-size: .875rem; }
  [data-theme="dai-sao"] .workflow, [data-theme="dai-sao"] .result-layout { display: block; }
  [data-theme="dai-sao"] .form-aside h1 { font-size: 2.5rem; }
  [data-theme="dai-sao"] .card-face { border-radius: 45px 45px 6px 6px; padding-top: 24px; }
  [data-theme="vuon-duyen"] .welcome { padding: 26px 22px 18px; border-radius: 24px 70px 24px 24px; }
  [data-theme="vuon-duyen"] .intro h1 { font-size: 2.35rem; }
  [data-theme="vuon-duyen"] .welcome .hero-art { max-height: 170px; }
  .garden-stop { margin-left: 16px; padding-left: 22px; }
  .stop-heading { margin-left: -43px; gap: 12px; }
  .stop-heading h2 { font-size: 1.25rem; }
  .garden-options { grid-template-columns: 1fr; }
  .garden-options .type-tile { padding: 20px 16px; gap: 14px; }
  .garden-options .tile-art { padding: 8px; }
  .garden-options .tile-art .icon { width: 26px; height: 26px; }
  [data-theme="vuon-duyen"] .form-aside { background: none; text-align: start; padding: 0 0 20px; }
  [data-theme="vuon-duyen"] .reading-paper { padding-left: 20px; }
  [data-theme="vuon-duyen"] .result-section { padding: 22px 18px; }
  [data-theme="vuon-duyen"] .result-section::before { left: -29px; }
  [data-theme="tram-tin-hieu"] .welcome { display: block; }
  [data-theme="tram-tin-hieu"] .intro { padding: 24px 20px; }
  [data-theme="tram-tin-hieu"] .intro h1 { font-size: 2.05rem; }
  [data-theme="tram-tin-hieu"] .hero-visual { border: 0; border-top: 2px solid var(--ink); padding: 12px; margin: 0; }
  [data-theme="tram-tin-hieu"] .hero-art { max-height: 190px; }
  [data-theme="tram-tin-hieu"] .type-grid { grid-template-columns: 1fr 1fr; }
  [data-theme="tram-tin-hieu"] .type-tile { padding: 18px 12px; }
  [data-theme="tram-tin-hieu"] .workflow { display: block; }
  [data-theme="tram-tin-hieu"] .form-aside { padding: 24px 20px; border-right: 0; border-bottom: 2px solid var(--ink); }
  [data-theme="tram-tin-hieu"] .form-aside h1 { font-size: 2.2rem; }
  [data-theme="tram-tin-hieu"] .form-paper { padding: 24px 16px; }
  [data-theme="tram-tin-hieu"] .result-heading { padding-left: 18px; border-left-width: 7px; }
  [data-theme="tram-tin-hieu"] .result-heading h1 { font-size: 2rem; }
  [data-theme="tram-tin-hieu"] .reading-paper { padding: 24px 18px; box-shadow: 4px 4px 0 var(--soft); }
  [data-theme="tram-tin-hieu"] .result-section h2 { font-size: 1.15rem; }
  [data-theme="thu-gui-minh"] main:has(.welcome) { display: block; }
  [data-theme="thu-gui-minh"] .welcome { margin: 0; }
  [data-theme="thu-gui-minh"] .intro h1 { font-size: 2.5rem; }
  [data-theme="thu-gui-minh"] .hero-art { margin-top: 10px; max-height: 190px; }
  [data-theme="thu-gui-minh"] .letter-list { margin: 25px 0 35px; padding: 24px 20px; box-shadow: 5px 5px 0 var(--soft); }
  [data-theme="thu-gui-minh"] .reading-paper { padding: 28px 22px; box-shadow: 5px 5px 0 var(--soft); }
  [data-theme="thu-gui-minh"] .form-paper { box-shadow: 5px 5px 0 var(--soft); }
}

[data-theme="tram-tin-hieu"] .brand-header :focus-visible { outline-color: var(--accent); }