/* Full-width lesson canvas and illustrated, keyboard-operable architecture diagrams. */
/* Root cause: base .content max-width:1350px plus 70px side padding and
   a second 1070px cap on .journey-body. Scope expansion to active lessons. */
@media(min-width:751px){
 body:has(#learn.active) .content{
  max-width:none;
  width:100%;
  min-width:0;
  padding:18px clamp(18px,2vw,34px) 30px;
 }
 body:has(#learn.active) .layout{grid-template-columns:252px minmax(0,1fr)}
 #learn .journey-body{max-width:none;margin:0 auto}
}
#learn .integrated-shell,#learn .integrated-shell .course-reader,#learn .integrated-body{min-width:0}
#learn .archviz{margin:18px 0 6px;border:1px solid #cbdfe7;border-radius:16px;overflow:hidden;background:linear-gradient(155deg,#f5fbfc,#f6f9ff 80%);box-shadow:0 5px 16px rgba(27,70,89,.04)}
#learn .archviz-head{display:flex;align-items:center;gap:12px;padding:15px 18px 12px}
#learn .archviz-head-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:#dcefeb;color:#137d76}
#learn .archviz-head h4{font-size:16px;color:#1b4055;margin:0 0 2px;letter-spacing:-.01em}
#learn .archviz-head p[lang="vi"]{font-size:11px;color:#79919a;margin:0;line-height:1.5}
#learn .archviz-mini-label{font-size:9px;letter-spacing:.11em;color:#548783;background:#e2f3ef;border:1px solid #c9e6de;padding:6px 8px;border-radius:7px;margin-left:auto;font-weight:850}
#learn .archviz-toolbar{display:flex;align-items:center;gap:7px;padding:0 18px 12px;flex-wrap:wrap}
#learn .archviz-tab{display:flex;flex-direction:column;gap:3px;min-height:43px;align-items:flex-start;justify-content:center;padding:8px 12px;border-radius:9px;border:1px solid #d6e4eb;background:white;color:#416575;font-size:11px;font-weight:800}
#learn .archviz-tab small[lang="vi"]{font-size:10px;font-weight:450;color:#8497a0}
#learn .archviz-tab[aria-pressed="true"]{border-color:#50b7a7;background:#e4f6f1;color:#086c65}
#learn .archviz-tab[aria-pressed="true"] small{color:#50867f}
#learn .archviz-motion{margin-left:auto;display:inline-flex;gap:5px;align-items:center;border:1px solid #d6e4eb;background:transparent;color:#607e8b;border-radius:8px;padding:9px 10px;font-size:11px}
#learn .archviz button:focus-visible{outline:3px solid #33a99d;outline-offset:2px}
#learn .archviz-content{padding:16px 18px 17px;border-top:1px solid #dce9ef;background:#fff}
#learn .archviz-instruction{font-size:12px!important;line-height:1.6!important;color:#33576b!important;margin:0!important}
#learn .archviz-instruction-vi{font-size:11px!important;color:#81949d!important;line-height:1.55!important;margin:4px 0 14px!important}
#learn .archviz-track{display:grid;grid-template-columns:repeat(var(--node-count),minmax(0,1fr));gap:13px;align-items:stretch;overflow:visible;margin:0 0 12px}
#learn .archviz-node{position:relative;min-width:0;min-height:102px;padding:12px 9px 10px;border:1px solid #d7e6ec;background:linear-gradient(165deg,#fff,#f4f9fb);border-radius:12px;color:#2d5668;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;justify-content:center;transition:background .2s,border-color .2s,transform .2s;animation:archviz-appear .42s ease both;animation-delay:calc(var(--i)*45ms)}
#learn .archviz-node[aria-pressed="true"]{border-color:#44a997;background:#e8f8f3;box-shadow:0 0 0 2px rgba(35,152,129,.12)}
#learn .archviz-node:hover{transform:translateY(-2px);border-color:#69bcb1}
#learn .archviz-node-icon{display:grid;place-items:center;width:28px;height:28px;color:#117b77}
#learn .archviz-node-count{position:absolute;top:7px;left:9px;color:#8ca2ab;font-size:9px;font-weight:800}
#learn .archviz-node-label{font-size:11px;font-weight:750;line-height:1.3;overflow-wrap:anywhere}
#learn .archviz-node small[lang="vi"]{font-size:10px;color:#7a9099;line-height:1.3}
#learn .archviz-node:not(:last-child):after{content:"›";position:absolute;right:-13px;top:42%;color:#39a89a;font-size:20px;font-weight:800;pointer-events:none;z-index:2;animation:archviz-arrow 3.6s ease-in-out infinite;animation-delay:calc(var(--i)*.23s)}
#learn .archviz-node.archviz-back-arrow:not(:last-child):after{content:"‹";color:#b38343}
#learn .archviz-cycle .archviz-node{border-top:3px solid #56aa9f}
#learn .archviz-cycle .archviz-node:last-child{border-top-color:#d29d5d}
#learn .archviz-loop-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 12px;color:#5a7f85;font-size:11px}
#learn .archviz-loop-note span{font-size:21px;color:#198c7b}
#learn .archviz-detail{border:1px solid #d9e9e8;background:#f0faf7;border-radius:11px;padding:12px 14px;min-height:92px}
#learn .archviz-detail-inner{display:flex;align-items:flex-start;gap:11px}
#learn .archviz-detail-icon{display:grid;place-items:center;width:33px;height:33px;flex:none;border-radius:9px;background:#d8eee6;color:#0c776c}
#learn .archviz-detail strong{display:block;font-size:12px;color:#1e5d61;margin:0 0 4px}
#learn .archviz-detail p[lang="en"]{font-size:12px!important;line-height:1.6!important;color:#335b65!important;margin:0!important}
#learn .archviz-detail p[lang="vi"]{font-size:11px!important;line-height:1.5!important;color:#81939a!important;margin:5px 0 0!important}
#learn .archviz-paused .archviz-node,#learn .archviz-paused .archviz-node:after{animation-play-state:paused!important}
@keyframes archviz-arrow{0%,70%,100%{opacity:.45;transform:translateX(0)}35%{opacity:1;transform:translateX(3px)}}
@keyframes archviz-appear{from{opacity:.5;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1100px){#learn .archviz-track{gap:15px}#learn .archviz-node{min-height:105px}}
@media(min-width:651px) and (max-width:1200px){
 #learn .archviz-track{display:flex;overflow-x:auto;padding:0 3px 8px;scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-x:contain}
 #learn .archviz-node{min-width:142px;flex:1 0 142px;scroll-snap-align:start}
}
@media(max-width:650px){
 #learn .archviz-head{padding:12px}
 #learn .archviz-head h4{font-size:14px}
 #learn .archviz-mini-label{display:none}
 #learn .archviz-toolbar{padding:0 12px 12px;gap:5px}
 #learn .archviz-tab{flex:1 1 27%;font-size:10px;padding:7px;min-height:44px}
 #learn .archviz-tab small[lang="vi"]{font-size:9px}
 #learn .archviz-motion{margin-left:0}
 #learn .archviz-content{padding:12px}
 #learn .archviz-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #learn .archviz-node{min-height:91px;padding:11px 7px 9px}
 #learn .archviz-node:not(:last-child):after{display:none}
 #learn .archviz-node-label{font-size:10.5px}
 #learn .archviz-detail{padding:11px}
}
@media(prefers-reduced-motion:reduce){
 #learn .archviz-node,#learn .archviz-node:after{animation:none!important;transition:none!important}
 #learn .archviz-node:hover{transform:none}
}