/* du-lieu.css — Phạm vi thông tin (comp: canvas boards "14 · Phạm vi thông tin"); includes the merged Quốc gia map */

/* hero record */
.dl-hero .center-head{ max-width:900px; }
.rec-wrap{ position:relative; max-width:1100px; margin:56px auto 0; }
.rec{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; box-shadow:0 40px 80px -44px rgba(18,22,43,.45); }
.rec__h{ display:flex; align-items:center; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line); }
.rec__h img{ width:56px; height:56px; border-radius:var(--r-control); object-fit:cover; flex:none; }
.rec__h > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rec__h b{ font-size:18px; font-weight:600; }
.rec__h .mono{ font-size:13px; color:var(--text-muted); }
.rec__h em{ margin-left:auto; flex:none; font-style:normal; padding:6px 12px; border-radius:var(--r-chip); background:var(--ok-bg); color:var(--data-up); font-size:13px; font-weight:600; }
.rec__grid{ display:grid; grid-template-columns:1fr 1.2fr 1fr 1fr; }
.rec__col + .rec__col{ border-left:1px solid var(--line-soft); }
.rec__g{ padding:12px 18px; background:var(--neutral-bg); font-size:13px; font-weight:600; color:var(--indigo-deep); }
.rec dl{ margin:0; }
.rec__f{ display:flex; flex-direction:column; gap:5px; padding:16px 18px; border-top:1px solid var(--line-soft); }
.rec__f dt{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--text-muted); }
.rec__f dd{ margin:0; font-size:16px; font-weight:600; }
.rec__f dd.hot{ color:var(--amber-light); }
.rec__f dd .redact{ width:78%; height:14px; margin:3px 0; }
.rec__f dd span{ font-size:13.5px; font-weight:400; color:var(--text-dim); }
.rec-wrap .pin--1{ left:24px; top:-18px; } .rec-wrap .pin--2{ left:250px; bottom:-40px; } .rec-wrap .pin--3{ left:560px; bottom:-40px; }
@media (max-width:1023px){
  .rec__grid{ grid-template-columns:1fr; }
  .rec__col + .rec__col{ border-left:0; }
  .rec__g{ display:none; }
  .rec__col:nth-child(2) .rec__f:nth-child(4), .rec__col:nth-child(3) .rec__f:nth-child(3){ display:none; }
  .rec__f{ flex-direction:row; justify-content:space-between; align-items:center; gap:12px; padding:11px 16px; }
  .rec__f dd{ font-size:13.5px; text-align:right; }
  .rec__f dd .redact{ width:120px; margin:0; } .rec__f dd span{ display:none; }
  .rec__h{ padding:14px 16px; gap:12px; } .rec__h img{ width:44px; height:44px; }
  .rec__h b{ font-size:15px; } .rec__h em{ display:none; }
  .rec-wrap{ margin-top:28px; }
  .rec-wrap .pin--1{ left:auto; right:10px; top:-16px; } .rec-wrap .pin--2, .rec-wrap .pin--3{ display:none; }
}

/* four layers */
.lays{ list-style:none; margin:52px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px; counter-reset:none; }
.lay{ display:flex; flex-direction:column; gap:14px; }
.lay__th{ height:150px; border-radius:var(--r-control); background:var(--indigo-wash); overflow:hidden; position:relative; display:flex; flex-direction:column; justify-content:center; padding:0 16px; }
.lay__th--map{ padding:0; }
.lay__th--map img{ position:absolute; left:-40px; top:-10px; width:420px; max-width:none; }
.lay__th--map i{ position:absolute; left:62%; top:48%; width:12px; height:12px; border-radius:var(--r-pill); background:var(--indigo); box-shadow:0 0 0 6px rgba(55,48,163,.2); }
.lay__hs, .lay__rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.lay__hs li{ display:flex; justify-content:space-between; padding:8px 12px; border-radius:var(--r-chip); background:var(--white); font-size:13px; max-inline-size:none; }
.lay__hs li.is-on{ background:var(--indigo); color:var(--white); }
.lay__co{ padding:14px; display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--text-muted); }
.lay__co-h{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.lay__co-h .redact{ width:60%; } .lay__co-h em{ font-style:normal; padding:2px 8px; border-radius:var(--r-chip); background:var(--ok-bg); color:var(--data-up); font-size:11px; font-weight:600; }
.lay__co .mono{ display:flex; gap:14px; color:var(--ink); } .lay__co .ai{ color:var(--indigo-deep); }
.lay__rows li{ display:grid; grid-template-columns:74px 1fr 50px; gap:8px; padding:7px 10px; border-radius:var(--r-chip); background:var(--white); font-size:12px; max-inline-size:none; }
.lay__rows li .mono:first-child{ color:var(--text-muted); } .lay__rows b{ text-align:right; }
.lay__t{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.lay__t .ico{ width:36px; height:36px; } .lay__t .ico svg{ width:18px; height:18px; }
.lay__t b{ font-size:19px; font-weight:600; }
.lay p{ font-size:15.5px; line-height:1.55; color:var(--text-dim); }
@media (max-width:1023px){ .lays{ grid-template-columns:1fr 1fr; } }
@media (max-width:767px){
  .lays{ grid-template-columns:1fr; gap:0; margin-top:24px; }
  .lay{ display:grid; grid-template-columns:40px 1fr; gap:4px 14px; padding:16px 0; border-top:1px solid var(--line); }
  .lay:first-child{ border-top:0; }
  .lay__th{ display:none; }
  .lay__t{ display:contents; }
  .lay__t .ico{ grid-row:span 2; width:40px; height:40px; }
  .lay__t b{ font-size:17px; } .lay p{ font-size:15px; grid-column:2; }
}

/* process */
.dl-proc__in{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.dl-proc__ph{ position:relative; }
.dl-proc__ph > img{ width:100%; height:520px; object-fit:cover; border-radius:var(--r-card); }
.dl-proc__card{ position:absolute; right:-28px; bottom:36px; padding:16px 18px; display:flex; gap:12px; align-items:center; color:var(--ink); box-shadow:0 30px 60px -24px rgba(18,22,43,.5); }
.dl-proc__card > span:last-child{ display:flex; flex-direction:column; font-size:13px; color:var(--text-muted); }
.dl-proc__card b{ font-size:15px; font-weight:600; color:var(--ink); }
.dl-ok{ background:var(--ok-bg); color:var(--data-up); }
.dl-proc__body{ display:flex; flex-direction:column; gap:14px; }
.dl-proc__body .sec-h2{ margin-bottom:12px; }
@media (max-width:1023px){
  .dl-proc__in{ grid-template-columns:1fr; gap:24px; }
  .dl-proc__ph{ order:2; } .dl-proc__ph > img{ height:220px; } .dl-proc__card{ display:none; }
}

/* countries map */
.qg{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:28px; align-items:start; }
.qg__regs{ grid-column:2; grid-row:1; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.reg{ width:100%; display:flex; flex-direction:column; gap:3px; text-align:left; padding:13px 16px; border-radius:var(--r-control); background:var(--white); border:1px solid var(--line); color:var(--ink); font:inherit; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.reg b{ font-size:15.5px; font-weight:600; } .reg span{ font-size:13.5px; color:var(--text-muted); }
.reg:hover{ border-color:var(--indigo); }
.reg[aria-pressed="true"]{ background:var(--indigo); border-color:var(--indigo); color:var(--white); }
.reg[aria-pressed="true"] span{ color:var(--indigo-haze); }
.qg__map{ grid-column:1; grid-row:1; position:relative; padding:22px; border-radius:var(--r-card); overflow:hidden; }
.qg__stage{ position:relative; aspect-ratio:1000/545; }
.qg__stage > img, .qg__stage > svg{ position:absolute; inset:0; width:100%; height:100%; }
.qg__arcs path{ fill:none; stroke:var(--indigo-mist); stroke-width:1.4; vector-effect:non-scaling-stroke; transition:stroke var(--dur-fast) var(--ease-out); }
.qg__arcs path.is-on{ stroke:var(--amber-dark); stroke-width:2.6; }
.qg__vn{ fill:var(--navy); stroke:var(--white); stroke-width:3; vector-effect:non-scaling-stroke; }
.mk{ position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; min-block-size:0; }
.mk::before{ content:""; width:12px; height:12px; border-radius:var(--r-pill); background:var(--indigo); border:2px solid var(--white); box-shadow:0 2px 6px rgba(18,22,43,.25); transition:transform var(--dur-fast) var(--ease-out); }
.mk:hover::before{ transform:scale(1.3); }
.mk[aria-pressed="true"]::before{ width:16px; height:16px; background:var(--amber-dark); }
.qg__panel{ position:absolute; left:40px; bottom:40px; width:300px; padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.qg__name{ display:flex; justify-content:space-between; align-items:center; gap:10px; max-inline-size:none; }
.qg__name b{ font-size:18px; font-weight:600; }
.qg__name i{ width:10px; height:10px; border-radius:var(--r-pill); background:var(--amber-dark); flex:none; }
.qg__lab{ font-size:11.5px; color:var(--text-muted); margin-top:4px; }
.qg__chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.qg__chips li{ padding:4px 10px; border-radius:var(--r-chip); background:var(--indigo-wash); font-size:13px; font-weight:500; }
.qg__route{ font-size:14px; font-weight:600; }
.qg__panel .link-arrow{ font-size:14px; }
.dl-com-h{ margin:64px 0 20px; font-size:24px; font-weight:600; letter-spacing:-0.01em; }
.dl-com{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px; }
.dl-com li{ position:relative; height:150px; border-radius:var(--r-card-inner); overflow:hidden; }
.dl-com img{ width:100%; height:100%; object-fit:cover; }
.dl-com span{ position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:6px; padding:5px 9px; background:rgba(14,13,52,.9); color:var(--white); font-size:13.5px; font-weight:600; }
.dl-com b{ font-size:11.5px; color:var(--amber-dark); font-weight:500; }
@media (max-width:1023px){
  .qg{ grid-template-columns:1fr; gap:12px; }
  .qg__regs{ grid-column:1; flex-direction:row; overflow-x:auto; margin-right:calc(-1 * var(--gutter)); padding-bottom:4px; }
  .qg__regs li{ flex:none; }
  .reg{ flex-direction:row; padding:9px 14px; border-radius:var(--r-pill); min-height:44px; align-items:center; }
  .reg span{ display:none; } .reg b{ font-size:14px; }
  .qg__map{ grid-row:auto; padding:8px; overflow:visible; }
  .qg__panel{ position:relative; left:auto; bottom:auto; width:auto; margin-top:12px; box-shadow:none; }
  .dl-com{ grid-template-columns:1fr 1fr; gap:8px; }
  .dl-com li{ height:110px; } .dl-com li:nth-child(7){ display:none; }
  .dl-com span{ font-size:12.5px; left:8px; bottom:8px; padding:4px 8px; }
  .dl-com-h{ margin-top:32px; font-size:19px; }
}

/* critique pass: pin above the record on mobile, all 7 commodities, scroll cue on region pills */
@media (max-width:1023px){
  .rec-wrap{ margin-top:52px; }
  .rec-wrap .pin--1{ left:0; right:auto; top:-42px; }
  .dl-com li:nth-child(7){ display:block; grid-column:1 / -1; }
  .qg__regs{ -webkit-mask-image:linear-gradient(90deg, var(--ink) 82%, transparent); mask-image:linear-gradient(90deg, var(--ink) 82%, transparent); padding-right:40px; }
}
.dl-com-h{ font-size:var(--fs-h3); }