:root{--ink:#142321;--muted:#61716d;--paper:#f7f5ef;--card:#fff;--line:#dce5df;--green:#0d4f46;--green-2:#176d60;--lime:#c9e66b;--orange:#f28a49;--shadow:0 24px 70px rgba(19,56,50,.13);--radius:28px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65}a{color:inherit}.lb-wrap{width:min(1160px,calc(100% - 36px));margin-inline:auto}.lb-skip{position:fixed;left:18px;top:-80px;z-index:1000;background:#fff;padding:10px 14px;border-radius:10px}.lb-skip:focus{top:18px}.lb-header{position:sticky;top:0;z-index:50;background:rgba(247,245,239,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(13,79,70,.1)}.lb-header__inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.lb-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-weight:850;letter-spacing:-.03em;font-size:1.18rem}.lb-brand__mark{width:38px;height:38px;border-radius:50%;background:var(--green);display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 5px rgba(255,255,255,.15)}.lb-brand__mark:before,.lb-brand__mark:after{content:"";position:absolute;background:#fff}.lb-brand__mark:before{width:2px;height:22px;transform:rotate(28deg)}.lb-brand__mark:after{width:6px;height:6px;border-radius:50%}.lb-brand__mark span{position:absolute;width:7px;height:7px;background:var(--lime);clip-path:polygon(50% 0,100% 100%,0 100%);top:5px}.lb-nav{display:flex;align-items:center;gap:8px}.lb-nav a{text-decoration:none;padding:9px 13px;border-radius:999px;font-weight:700;font-size:.94rem;color:#344642}.lb-nav a:hover{background:#e7ede8;color:var(--green)}.lb-menu-button{display:none;border:0;background:none;padding:8px}.lb-menu-button i{display:block;width:24px;height:2px;background:var(--ink);margin:5px}.lb-hero{position:relative;overflow:hidden;padding:80px 0 112px;background:linear-gradient(135deg,#f7f5ef 0%,#edf4ee 58%,#dcebdc 100%)}.lb-hero:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-120px;top:-180px;background:radial-gradient(circle,rgba(201,230,107,.48),transparent 67%)}.lb-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) .95fr;align-items:center;gap:80px;position:relative;z-index:1}.lb-eyebrow,.lb-kicker{font-size:.76rem;letter-spacing:.16em;font-weight:900;color:var(--green);margin:0 0 14px}.lb-hero h1{font-size:clamp(3.2rem,8vw,5.6rem);line-height:.91;letter-spacing:-.07em;margin:0;max-width:730px}.lb-hero__lead{font-size:clamp(1.07rem,2vw,1.32rem);max-width:650px;color:#49605a;margin:27px 0 0}.lb-hero__badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.lb-hero__badges span{background:rgba(255,255,255,.72);border:1px solid rgba(13,79,70,.12);padding:8px 12px;border-radius:999px;font-weight:700;font-size:.85rem}.lb-hero__visual{min-height:360px;position:relative;display:grid;place-items:center}.lb-orbit{position:absolute;border:1px solid rgba(13,79,70,.18);border-radius:50%}.lb-orbit--one{width:360px;height:360px}.lb-orbit--two{width:270px;height:270px;border-style:dashed;animation:spin 26s linear infinite}.lb-mini-compass{width:210px;height:210px;border-radius:50%;background:var(--green);color:#fff;box-shadow:0 32px 70px rgba(13,79,70,.28),inset 0 0 0 12px rgba(255,255,255,.1);display:grid;place-items:center;position:relative}.lb-mini-compass b{position:absolute;top:18px}.lb-mini-compass span{width:16px;height:112px;background:linear-gradient(var(--lime) 0 50%,#f9b197 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:rotate(20deg)}.lb-mini-compass i{position:absolute;width:20px;height:20px;background:#fff;border-radius:50%}@keyframes spin{to{transform:rotate(360deg)}}.lb-tool-section{padding:0 0 88px;margin-top:-52px;position:relative;z-index:4}.lb-tool-shell{background:var(--card);border:1px solid rgba(13,79,70,.1);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.lb-tool-head{padding:28px 32px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px}.lb-tool-head h2{margin:0;font-size:clamp(1.45rem,3vw,2.15rem);letter-spacing:-.035em}.lb-tool-head p:not(.lb-kicker){margin:5px 0 0;color:var(--muted)}.lb-status-chip{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;font-size:.86rem}.lb-status-chip span{width:9px;height:9px;border-radius:50%;background:#a9b3b0}.lb-status-chip[data-state=ready] span{background:#28a56c;box-shadow:0 0 0 6px rgba(40,165,108,.12)}.lb-status-chip[data-state=waiting] span{background:#e8a23a}.lb-status-chip[data-state=error] span{background:#d75b4e}.lb-workspace{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(310px,.82fr)}.lb-compass-panel{padding:45px 40px 38px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at center,#f5faf4,#fff 63%)}.lb-heading-readout{text-align:center;margin-bottom:20px}.lb-heading-readout strong{display:block;font-size:clamp(2.9rem,6vw,5.4rem);line-height:1;letter-spacing:-.06em;color:var(--green)}.lb-heading-readout span{font-weight:850;font-size:1.15rem}.lb-compass{width:min(470px,84vw);aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;background:#f0f3ed;box-shadow:inset 0 0 0 1px #d6dfd8,0 26px 55px rgba(30,68,60,.14)}.lb-compass__glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(201,230,107,.3),transparent 68%)}.lb-compass__dial{
    position:absolute;
    inset:7%;
    border-radius:50%;
    background:#fff;
    border:1px solid #ccd9d1;
    box-shadow:inset 0 0 0 11px #f2f5ef;

    /* Không dùng transition vì dữ liệu cảm biến cập nhật liên tục */
    transition:none;

    /* Ép Safari dùng compositing ổn định hơn */
    will-change:transform;
    transform:translate3d(0,0,0) rotate(0deg);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-style:preserve-3d;
}.lb-cardinal,.lb-inter{position:absolute;z-index:3;font-weight:900}.lb-cardinal{font-size:clamp(1.25rem,4vw,2rem);color:var(--green)}.lb-cardinal--n{top:4%;left:50%;transform:translateX(-50%);color:#d75b4e}.lb-cardinal--e{right:5%;top:50%;transform:translateY(-50%)}.lb-cardinal--s{bottom:3%;left:50%;transform:translateX(-50%)}.lb-cardinal--w{left:5%;top:50%;transform:translateY(-50%)}.lb-inter{font-size:.78rem;color:#80908a}.lb-inter--ne{right:18%;top:18%}.lb-inter--se{right:18%;bottom:18%}.lb-inter--sw{left:18%;bottom:18%}.lb-inter--nw{left:18%;top:18%}.lb-ticks{position:absolute;inset:11%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(20,35,33,.82) 0 1deg,transparent 1deg 10deg);mask:radial-gradient(transparent 0 85%,#000 86%)}.lb-needle{position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%)}.lb-needle__north,.lb-needle__south{position:absolute;left:50%;width:38px;height:50%;transform:translateX(-50%);clip-path:polygon(50% 0,100% 100%,50% 82%,0 100%)}.lb-needle__north{top:0;background:linear-gradient(#e76755,#b43c31)}.lb-needle__south{bottom:0;background:#95a29e;transform:translateX(-50%) rotate(180deg)}.lb-needle i{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;background:var(--green);border:8px solid #fff;transform:translate(-50%,-50%);box-shadow:0 2px 12px rgba(0,0,0,.2)}.lb-bearing-marker{position:absolute;top:-0.5%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:22px solid var(--orange);z-index:6}.lb-live-copy{color:var(--muted);text-align:center;max-width:620px;margin:24px 0 0}.lb-control-panel{border-left:1px solid var(--line);padding:34px;background:#f9faf7}.lb-control-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;gap:15px}.lb-control-icon{width:46px;height:46px;border-radius:14px;background:#e7f0e8;display:grid;place-items:center;font-size:1.5rem;color:var(--green)}.lb-control-card small{font-size:.7rem;letter-spacing:.12em;color:var(--muted);font-weight:900}.lb-control-card strong{display:block;font-size:1.35rem;margin-top:2px}.lb-control-card p{margin:3px 0 0;color:var(--muted);font-size:.9rem}.lb-action{border:1px solid #ccd9d1;background:#fff;color:var(--green);border-radius:14px;padding:13px 16px;font:inherit;font-weight:850;cursor:pointer}.lb-action:hover{transform:translateY(-1px)}.lb-action--main{width:100%;margin-top:14px;background:var(--green);color:#fff;border-color:var(--green);display:flex;justify-content:space-between;font-size:1rem}.lb-action--main:disabled{opacity:.75;cursor:default}.lb-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.lb-calibration{margin-top:20px;padding:20px;border-radius:18px;background:#eaf2e8}.lb-calibration h3{margin:0 0 10px;font-size:1rem}.lb-calibration ol{margin:0;padding-left:20px;color:#42534f;font-size:.91rem}.lb-support-note{margin-top:16px;color:var(--muted);font-size:.85rem}.lb-tool-shell:fullscreen,.lb-tool-shell.is-pseudo-fullscreen{background:#fff;padding:10px;overflow:auto}.lb-feature-strip{padding:0 0 88px}.lb-feature-strip__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lb-feature-strip article{padding:26px;border:1px solid var(--line);border-radius:22px;background:#fff}.lb-feature-strip span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;font-weight:900}.lb-feature-strip h3{margin:18px 0 6px}.lb-feature-strip p{margin:0;color:var(--muted)}.lb-content{padding:88px 0;background:#fff}.lb-content__layout{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:70px;align-items:start}.lb-prose h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.04em;margin:2.2em 0 .55em}.lb-prose h2:first-child{margin-top:0}.lb-prose h3{font-size:1.2rem;margin-top:1.8em}.lb-prose p,.lb-prose li{color:#43534f}.lb-prose a{color:var(--green);font-weight:750}.lb-prose ul,.lb-prose ol{padding-left:1.3rem}.lb-prose .lb-note{background:#edf4eb;border-left:4px solid var(--green);padding:17px 19px;border-radius:0 14px 14px 0}.lb-content__aside{position:sticky;top:100px;padding:22px;border-radius:18px;background:var(--green);color:#fff}.lb-content__aside p{color:#dcece7}.lb-content__aside a{color:var(--lime);font-weight:850}.lb-faq{padding:88px 0}.lb-section-title{text-align:center;max-width:720px;margin:0 auto 35px}.lb-section-title h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.05em;margin:0}.lb-section-title p:last-child{color:var(--muted)}.lb-faq__list{max-width:860px;margin:auto;display:grid;gap:10px}.lb-faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 20px}.lb-faq summary{list-style:none;cursor:pointer;font-weight:850;padding:18px 0;display:flex;justify-content:space-between;gap:20px}.lb-faq summary::-webkit-details-marker{display:none}.lb-faq details p{margin:0;padding:0 0 18px;color:var(--muted)}.lb-page-hero{padding:72px 0 58px;background:linear-gradient(135deg,#eaf2e8,#f7f5ef)}.lb-page-hero h1{font-size:clamp(2.5rem,6vw,4.8rem);letter-spacing:-.06em;line-height:1;margin:12px 0}.lb-page-intro{max-width:800px;font-size:1.14rem;color:#4b615b}.lb-breadcrumbs{display:flex;gap:9px;font-size:.87rem;color:var(--muted);margin-bottom:28px}.lb-breadcrumbs a{text-decoration:none}.lb-document{padding:72px 0 96px}.lb-document__grid{display:grid;grid-template-columns:minmax(0,780px) 300px;gap:60px;align-items:start}.lb-prose--page{background:#fff;padding:clamp(24px,5vw,52px);border-radius:24px;border:1px solid var(--line)}.lb-side-faq{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}.lb-side-faq details{border-top:1px solid var(--line);padding:12px 0}.lb-side-faq summary{font-weight:800;cursor:pointer}.lb-side-faq p{font-size:.9rem;color:var(--muted)}.lb-contact-form{margin-top:35px;padding-top:30px;border-top:1px solid var(--line)}.lb-form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.lb-contact-form label{display:grid;gap:7px;font-weight:800;margin-bottom:15px}.lb-contact-form input,.lb-contact-form textarea{width:100%;border:1px solid #cbd7d0;border-radius:12px;padding:12px 14px;font:inherit;background:#fbfcfa}.lb-submit{border:0;border-radius:12px;background:var(--green);color:#fff;font-weight:900;padding:13px 20px}.hp-field{position:absolute;left:-9999px}.lb-alert{padding:12px 14px;border-radius:10px}.lb-alert.is-success{background:#e4f5e8}.lb-alert.is-error{background:#fee8e4}.lb-footer{background:#102b27;color:#fff;padding:55px 0}.lb-footer__grid{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:50px;align-items:start}.lb-brand--footer{color:#fff}.lb-footer p{color:#c6d7d2}.lb-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lb-footer nav a{text-decoration:none;color:#e8f1ee}.lb-footer__legal{text-align:right;font-size:.86rem}@media(max-width:900px){.lb-hero__grid,.lb-workspace,.lb-content__layout,.lb-document__grid,.lb-footer__grid{grid-template-columns:1fr}.lb-hero__visual{display:none}.lb-tool-head{align-items:flex-start}.lb-control-panel{border-left:0;border-top:1px solid var(--line)}.lb-feature-strip__grid{grid-template-columns:1fr}.lb-content__aside,.lb-side-faq{position:static}.lb-footer__legal{text-align:left}.lb-nav{display:none;position:absolute;top:76px;left:18px;right:18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow)}.lb-nav.is-open{display:grid}.lb-menu-button{display:block}}@media(max-width:620px){.lb-wrap{width:min(100% - 24px,1160px)}.lb-header__inner{height:66px}.lb-hero{padding:58px 0 92px}.lb-hero h1{font-size:3.55rem}.lb-tool-head{padding:22px;display:grid}.lb-status-chip{width:max-content}.lb-compass-panel{padding:30px 14px}.lb-control-panel{padding:22px}.lb-actions-row,.lb-form-row{grid-template-columns:1fr}.lb-feature-strip{padding-bottom:58px}.lb-content,.lb-faq{padding:62px 0}.lb-prose--page{padding:24px 18px}.lb-footer nav{grid-template-columns:1fr}.lb-compass{width:min(410px,92vw)}}

/* iOS Safari compass rendering fix */
.lb-compass__dial{transition:none!important;will-change:transform;transform-origin:50% 50%;transform:translate3d(0,0,0) rotate(0deg);-webkit-transform:translateZ(0) rotate(0deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;contain:layout paint style}
.lb-cardinal,.lb-inter{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0)}

/* Compact compass controls */
.lb-control-card__body{min-width:0;flex:1}
.lb-command-bar{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:10px;margin-top:14px}
.lb-command-bar .lb-action{min-width:0;min-height:58px;margin:0;padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;line-height:1.2}
.lb-command-bar .lb-action--main{width:auto;background:var(--green);color:#fff;border-color:var(--green)}
.lb-action__icon{flex:0 0 auto;font-size:1.12rem;line-height:1}
.lb-action__label{min-width:0}
.lb-calibration{margin-top:16px;padding:0;border-radius:18px;background:#eaf2e8;overflow:hidden}
.lb-calibration summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:850}
.lb-calibration summary::-webkit-details-marker{display:none}
.lb-calibration summary span{font-size:1.2rem;transition:transform .2s ease}
.lb-calibration[open] summary span{transform:rotate(45deg)}
.lb-calibration ol{margin:0;padding:0 20px 17px 38px;color:#42534f;font-size:.91rem}

@media(max-width:620px){
  .lb-tool-section{margin-top:-34px;padding-bottom:58px}
  .lb-tool-shell{border-radius:22px}
  .lb-tool-head{padding:20px 20px 18px}
  .lb-tool-head h2{font-size:1.42rem;line-height:1.28}
  .lb-tool-head p:not(.lb-kicker){font-size:.94rem;line-height:1.55}
  .lb-compass-panel{padding:26px 10px 24px}
  .lb-heading-readout{margin-bottom:14px}
  .lb-heading-readout strong{font-size:3.25rem}
  .lb-heading-readout span{font-size:1rem}
  .lb-live-copy{margin-top:18px;padding-inline:8px;font-size:.92rem;line-height:1.5}
  .lb-control-panel{padding:14px;background:#f6f8f4}
  .lb-control-card{border-radius:17px;padding:14px;gap:12px;align-items:center}
  .lb-control-icon{width:42px;height:42px;border-radius:12px;font-size:1.25rem}
  .lb-control-card small{font-size:.62rem;letter-spacing:.14em}
  .lb-control-card strong{font-size:1.17rem;line-height:1.25;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lb-control-card p{font-size:.78rem;line-height:1.4;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lb-command-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}
  .lb-command-bar .lb-action{min-height:62px;border-radius:13px;padding:8px 5px;display:grid;grid-template-rows:20px auto;align-content:center;gap:5px;font-size:.76rem;line-height:1.12}
  .lb-command-bar .lb-action--main{font-size:.78rem}
  .lb-action__icon{font-size:1.18rem}
  .lb-action__label{display:block;max-width:100%}
  .lb-calibration{margin-top:10px;border-radius:14px}
  .lb-calibration summary{padding:12px 14px;font-size:.88rem}
  .lb-calibration ol{padding:0 16px 14px 32px;font-size:.82rem;line-height:1.55}
  .lb-support-note{margin-top:10px;padding:0 3px;font-size:.77rem;line-height:1.45}
}

@media(max-width:370px){
  .lb-command-bar .lb-action{font-size:.7rem;padding-inline:3px}
  .lb-control-card strong{font-size:1.05rem}
}

/* ===== Compact compass controls v2.2 ===== */
.lb-mobile-console{width:min(640px,100%);margin-top:22px}
.lb-mobile-console .lb-control-card{box-shadow:0 10px 28px rgba(20,35,33,.06)}
.lb-mobile-console .lb-command-bar{margin-top:10px}

@media(max-width:900px){
  .lb-workspace{display:block}
  .lb-control-panel{padding:14px 22px 22px;border-top:0;background:#f9faf7}
  .lb-mobile-console{width:100%}
}

@media(max-width:620px){
  .lb-tool-section{margin-top:-34px;padding-bottom:58px}
  .lb-tool-shell{border-radius:22px}
  .lb-tool-head{padding:18px 18px 16px}
  .lb-tool-head h2{font-size:1.35rem;line-height:1.3}
  .lb-tool-head p:not(.lb-kicker){font-size:.9rem;line-height:1.5}
  .lb-status-chip{padding:7px 11px;font-size:.78rem}

  .lb-compass-panel{padding:22px 10px 12px}
  .lb-heading-readout{margin-bottom:10px}
  .lb-heading-readout strong{font-size:3rem}
  .lb-heading-readout span{font-size:.96rem}
  .lb-compass{width:min(360px,88vw)}

  .lb-mobile-console{margin-top:12px;padding:0 4px}
  .lb-mobile-console .lb-control-card{min-height:72px;padding:11px 12px;border-radius:16px;gap:10px;align-items:center}
  .lb-mobile-console .lb-control-icon{width:40px;height:40px;border-radius:12px;font-size:1.25rem;flex:0 0 40px}
  .lb-mobile-console .lb-control-card small{font-size:.58rem;letter-spacing:.14em}
  .lb-mobile-console .lb-control-card strong{font-size:1.08rem;line-height:1.15;margin-top:0}
  .lb-mobile-console .lb-control-card p{font-size:.73rem;line-height:1.3;margin-top:2px}

  .lb-mobile-console .lb-command-bar{grid-template-columns:1.12fr 1fr 1fr;gap:6px;margin-top:7px}
  .lb-mobile-console .lb-command-bar .lb-action{min-height:54px;border-radius:12px;padding:6px 4px;grid-template-rows:17px auto;gap:3px;font-size:.68rem;line-height:1.06}
  .lb-mobile-console .lb-command-bar .lb-action--main{font-size:.7rem}
  .lb-mobile-console .lb-action__icon{font-size:.95rem;line-height:1}
  .lb-mobile-console .lb-action__label{display:block;white-space:normal}

  .lb-live-copy{margin:10px 0 0;padding:0 8px;font-size:.78rem;line-height:1.35;min-height:0}
  .lb-control-panel{padding:8px 14px 16px}
  .lb-calibration{margin-top:0;padding:14px 16px;border-radius:15px}
  .lb-calibration summary{font-size:.88rem}
  .lb-support-note{margin-top:10px;font-size:.75rem;line-height:1.45}
}

@media(max-width:370px){
  .lb-compass{width:min(330px,89vw)}
  .lb-mobile-console .lb-command-bar .lb-action{font-size:.63rem;padding-inline:2px}
  .lb-mobile-console .lb-control-card strong{font-size:1rem}
}

/* =========================================================
   LaBanOnline 2.3 — single-panel tool + focused fullscreen
   ========================================================= */
.lb-workspace{
  display:block;
}

.lb-compass-panel{
  width:100%;
  padding:38px;
  display:grid;
  grid-template-columns:minmax(320px,1.15fr) minmax(300px,.85fr);
  gap:42px;
  align-items:center;
  background:radial-gradient(circle at 28% 48%,#f3f9f2 0,#fff 58%);
}

.lb-compass-stage{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.lb-tool-console{
  width:100%;
  max-width:430px;
  justify-self:center;
  display:grid;
  gap:14px;
}

.lb-heading-readout{
  margin:0 0 18px;
}

.lb-compass{
  width:min(460px,100%);
}

.lb-control-card{
  padding:18px;
  border-radius:18px;
  box-shadow:0 12px 32px rgba(19,56,50,.07);
}

.lb-command-bar{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:9px;
}

.lb-action,
.lb-action--main{
  width:100%;
  min-width:0;
  margin:0;
  padding:12px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  line-height:1.2;
  text-align:center;
}

.lb-action__icon{
  flex:0 0 auto;
}

.lb-action__label{
  min-width:0;
}

.lb-live-copy{
  margin:0;
  min-height:1.5em;
  max-width:none;
  font-size:.9rem;
}

.lb-calibration{
  margin:0;
  padding:0;
  border-radius:16px;
  background:#eaf2e8;
  overflow:hidden;
}

.lb-calibration summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:850;
}

.lb-calibration summary::-webkit-details-marker{display:none}
.lb-calibration[open] summary span{transform:rotate(45deg)}
.lb-calibration summary span{transition:transform .18s ease}
.lb-calibration ol{margin:0;padding:0 34px 16px;color:#42534f;font-size:.9rem}
.lb-support-note{margin:0;font-size:.82rem;line-height:1.55}

/* Chỉ form la bàn được đưa vào Fullscreen API. */
.lb-compass-panel:fullscreen,
.lb-compass-panel:-webkit-full-screen,
.lb-compass-panel.is-pseudo-fullscreen{
  width:100%;
  height:100%;
  min-height:100vh;
  min-height:100dvh;
  max-width:none;
  margin:0;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  border:0;
  border-radius:0;
  background:#f8faf6;
  overflow:auto;
  overscroll-behavior:contain;
}

.lb-compass-panel.is-pseudo-fullscreen{
  position:fixed;
  inset:0;
  z-index:9999;
}

html.lb-has-pseudo-fullscreen,
body.lb-has-pseudo-fullscreen{
  overflow:hidden !important;
  overscroll-behavior:none;
}

.lb-compass-panel:fullscreen .lb-compass,
.lb-compass-panel:-webkit-full-screen .lb-compass,
.lb-compass-panel.is-pseudo-fullscreen .lb-compass{
  width:min(58vh,500px);
  width:min(58dvh,500px);
}

@media (max-width:900px){
  .lb-compass-panel{
    grid-template-columns:1fr;
    gap:18px;
    padding:26px 18px 20px;
    background:radial-gradient(circle at 50% 30%,#f3f9f2,#fff 66%);
  }

  .lb-tool-console{
    max-width:560px;
    gap:10px;
  }

  .lb-compass{
    width:min(410px,88vw);
  }

  .lb-heading-readout{margin-bottom:12px}
  .lb-heading-readout strong{font-size:clamp(2.8rem,13vw,4.4rem)}
  .lb-control-card{padding:14px 15px}
  .lb-control-icon{width:42px;height:42px;border-radius:12px}
  .lb-control-card strong{font-size:1.15rem}
  .lb-control-card p{font-size:.82rem}
  .lb-command-bar{grid-template-columns:1.15fr 1fr 1fr}
  .lb-action,.lb-action--main{padding:11px 7px;font-size:.82rem}
  .lb-action__icon{font-size:1rem}
  .lb-live-copy{font-size:.82rem}
  .lb-support-note{font-size:.78rem}
}

@media (max-width:620px){
  .lb-compass-panel{
    padding:20px 10px 14px;
    gap:12px;
  }

  .lb-compass{
    width:min(390px,92vw);
  }

  .lb-tool-console{
    width:100%;
  }

  .lb-control-card{
    border-radius:15px;
    box-shadow:none;
  }

  .lb-command-bar{
    gap:7px;
  }

  .lb-action,.lb-action--main{
    min-height:54px;
    padding:8px 5px;
    flex-direction:column;
    gap:3px;
    border-radius:12px;
    font-size:.74rem;
  }

  .lb-action__label{white-space:normal}
  .lb-calibration summary{padding:12px 14px;font-size:.9rem}
}

/* Điện thoại xoay ngang: la bàn bên trái, điều khiển bên phải. */
@media (orientation:landscape) and (max-height:620px) and (max-width:950px){
  .lb-header__inner{height:54px}
  .lb-tool-section{margin-top:-24px}
  .lb-tool-head{padding:14px 18px}
  .lb-tool-head h2{font-size:1.1rem}
  .lb-tool-head p:not(.lb-kicker),.lb-tool-head .lb-kicker{display:none}

  .lb-compass-panel{
    grid-template-columns:minmax(250px,1fr) minmax(260px,.9fr);
    gap:18px;
    padding:14px 18px;
    align-items:center;
  }

  .lb-heading-readout{margin-bottom:5px}
  .lb-heading-readout strong{font-size:2.6rem}
  .lb-heading-readout span{font-size:.92rem}
  .lb-compass{width:min(66vh,330px);width:min(66dvh,330px)}
  .lb-tool-console{gap:7px;max-width:380px}
  .lb-control-card{padding:10px 12px;gap:10px}
  .lb-control-icon{width:36px;height:36px}
  .lb-control-card p{display:none}
  .lb-command-bar{gap:6px}
  .lb-action,.lb-action--main{min-height:48px;padding:7px 5px;font-size:.69rem}
  .lb-live-copy{display:none}
  .lb-calibration summary{padding:10px 12px;font-size:.82rem}
  .lb-calibration ol{padding:0 28px 10px;font-size:.76rem}
  .lb-support-note{font-size:.7rem}
}

@media (orientation:landscape) and (max-height:620px) and (max-width:950px){
  .lb-compass-panel:fullscreen,
  .lb-compass-panel:-webkit-full-screen,
  .lb-compass-panel.is-pseudo-fullscreen{
    grid-template-columns:minmax(260px,1fr) minmax(280px,.85fr);
    padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  }
  .lb-compass-panel:fullscreen .lb-compass,
  .lb-compass-panel:-webkit-full-screen .lb-compass,
  .lb-compass-panel.is-pseudo-fullscreen .lb-compass{
    width:min(78vh,390px);
    width:min(78dvh,390px);
  }
}

/* =========================================================
   LaBanOnline 2.4 — giao diện riêng cho điện thoại nằm ngang
   ========================================================= */
@media (orientation:landscape) and (max-height:700px) and (max-width:1180px){
  .lb-header__inner{height:50px}
  .lb-brand{font-size:1rem}
  .lb-brand__mark{width:32px;height:32px}
  .lb-nav a{padding:6px 9px;font-size:.82rem}

  /* Ẩn phần giới thiệu của tool để toàn bộ vùng nhìn dành cho la bàn. */
  .lb-tool-section{margin:0;padding:0}
  .lb-tool-section>.lb-wrap{width:100%;max-width:none}
  .lb-tool-shell{border-radius:0;box-shadow:none;border-left:0;border-right:0}
  .lb-tool-head{display:none}

  .lb-compass-panel{
    min-height:calc(100svh - 50px);
    min-height:calc(100dvh - 50px);
    max-height:calc(100svh - 50px);
    max-height:calc(100dvh - 50px);
    grid-template-columns:minmax(0,1.08fr) minmax(270px,.92fr);
    gap:14px;
    padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));
    align-items:center;
    overflow:hidden;
  }

  .lb-compass-stage{
    min-width:0;
    min-height:0;
    height:100%;
    justify-content:center;
  }

  .lb-heading-readout{margin:0 0 2px;line-height:1}
  .lb-heading-readout strong{font-size:clamp(2rem,9vh,3rem);line-height:.95}
  .lb-heading-readout span{font-size:.78rem;line-height:1.1;margin-top:3px}

  .lb-compass{
    width:min(59svh,310px);
    width:min(59dvh,310px);
    max-width:100%;
    flex:0 0 auto;
  }

  .lb-tool-console{
    min-width:0;
    max-width:390px;
    gap:6px;
    align-content:center;
  }

  .lb-control-card{padding:9px 11px;gap:9px;border-radius:14px}
  .lb-control-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;font-size:1rem}
  .lb-control-card small{font-size:.54rem;letter-spacing:.13em}
  .lb-control-card strong{font-size:1rem;line-height:1.1;margin-top:0}
  .lb-control-card p{font-size:.68rem;line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .lb-command-bar{grid-template-columns:1.08fr 1fr 1fr;gap:6px;margin:0}
  .lb-action,.lb-action--main{
    min-height:46px;
    padding:6px 5px;
    border-radius:11px;
    flex-direction:row;
    gap:4px;
    font-size:.68rem;
    line-height:1.05;
  }
  .lb-action__icon{font-size:.9rem}
  .lb-action__label{white-space:normal}

  /* Các hướng dẫn phụ vẫn có ở chế độ dọc; ẩn khi ngang để tránh cuộn/cắt mặt la bàn. */
  .lb-live-copy,.lb-calibration,.lb-support-note{display:none}

  .lb-feature-strip,.lb-content,.lb-faq,.lb-footer{position:relative}
}

/* Màn hình ngang rất thấp (iPhone mini/SE và thanh trình duyệt đang mở). */
@media (orientation:landscape) and (max-height:470px) and (max-width:1000px){
  .lb-header__inner{height:44px}
  .lb-compass-panel{
    min-height:calc(100svh - 44px);
    min-height:calc(100dvh - 44px);
    max-height:calc(100svh - 44px);
    max-height:calc(100dvh - 44px);
    grid-template-columns:minmax(0,1fr) minmax(250px,.9fr);
    padding-top:5px;
    padding-bottom:5px;
  }
  .lb-heading-readout strong{font-size:2rem}
  .lb-heading-readout span{font-size:.7rem}
  .lb-compass{width:min(63svh,270px);width:min(63dvh,270px)}
  .lb-tool-console{gap:5px}
  .lb-control-card{padding:7px 9px}
  .lb-control-card p{display:none}
  .lb-action,.lb-action--main{min-height:42px;font-size:.63rem;padding:5px 4px}
}

/* Fullscreen nằm ngang: chỉ form tool, tự cân theo chiều cao thực tế. */
@media (orientation:landscape) and (max-height:700px) and (max-width:1180px){
  .lb-compass-panel:fullscreen,
  .lb-compass-panel:-webkit-full-screen,
  .lb-compass-panel.is-pseudo-fullscreen{
    min-height:100svh;
    min-height:100dvh;
    max-height:100svh;
    max-height:100dvh;
    grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);
    gap:18px;
    overflow:hidden;
  }
  .lb-compass-panel:fullscreen .lb-compass,
  .lb-compass-panel:-webkit-full-screen .lb-compass,
  .lb-compass-panel.is-pseudo-fullscreen .lb-compass{
    width:min(72svh,380px);
    width:min(72dvh,380px);
  }
}

/* =========================================================
   LaBanOnline 2.5 — landscape mobile rebuilt from scratch
   The final block intentionally overrides all older landscape rules.
   ========================================================= */
@media (orientation:landscape) and (max-height:720px) and (max-width:1200px){
  .lb-header__inner{height:44px!important}
  .lb-tool-section{margin:0!important;padding:0!important}
  .lb-tool-section>.lb-wrap{width:100%!important;max-width:none!important}
  .lb-tool-shell{border:0!important;border-radius:0!important;box-shadow:none!important}
  .lb-tool-head{display:none!important}

  .lb-compass-panel{
    box-sizing:border-box!important;
    width:100%!important;
    height:calc(100dvh - 44px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 44px)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(280px,42vw)!important;
    grid-template-rows:minmax(0,1fr)!important;
    gap:12px!important;
    padding:6px max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
    align-items:center!important;
    overflow:hidden!important;
    background:#f8faf6!important;
  }

  .lb-compass-stage{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
  }

  /* Degree and direction are already repeated in the right-hand card. */
  .lb-heading-readout{display:none!important}

  .lb-compass{
    width:min(calc(100dvh - 62px),52vw,390px)!important;
    height:min(calc(100dvh - 62px),52vw,390px)!important;
    max-width:100%!important;
    max-height:100%!important;
    margin:0!important;
    flex:none!important;
  }

  .lb-tool-console{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:430px!important;
    min-width:0!important;
    max-height:100%!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    align-content:center!important;
    gap:10px!important;
    overflow:hidden!important;
  }

  .lb-control-card{
    min-width:0!important;
    padding:12px 14px!important;
    gap:10px!important;
    border-radius:15px!important;
    box-shadow:none!important;
  }
  .lb-control-icon{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:11px!important;font-size:1.05rem!important}
  .lb-control-card small{font-size:.56rem!important;letter-spacing:.12em!important}
  .lb-control-card strong{font-size:1.05rem!important;line-height:1.12!important;margin:1px 0 0!important}
  .lb-control-card p{font-size:.7rem!important;line-height:1.25!important;margin:3px 0 0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  .lb-command-bar{
    display:grid!important;
    grid-template-columns:1.1fr 1fr 1fr!important;
    gap:7px!important;
    margin:0!important;
  }
  .lb-command-bar .lb-action,
  .lb-command-bar .lb-action--main{
    min-width:0!important;
    min-height:48px!important;
    height:48px!important;
    margin:0!important;
    padding:5px 6px!important;
    border-radius:11px!important;
    flex-direction:row!important;
    gap:4px!important;
    font-size:.66rem!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  .lb-command-bar .lb-action__icon{font-size:.85rem!important;line-height:1!important}
  .lb-command-bar .lb-action__label{display:block!important;overflow-wrap:anywhere!important}

  .lb-live-copy,.lb-calibration,.lb-support-note{display:none!important}
}

/* Very short landscape viewports: reserve every pixel for the compass. */
@media (orientation:landscape) and (max-height:430px) and (max-width:1000px){
  .lb-header__inner{height:40px!important}
  .lb-compass-panel{
    height:calc(100dvh - 40px)!important;
    max-height:calc(100dvh - 40px)!important;
    grid-template-columns:minmax(0,1fr) minmax(250px,43vw)!important;
    gap:8px!important;
    padding-top:3px!important;
    padding-bottom:max(3px,env(safe-area-inset-bottom))!important;
  }
  .lb-compass{
    width:min(calc(100dvh - 48px),50vw,340px)!important;
    height:min(calc(100dvh - 48px),50vw,340px)!important;
  }
  .lb-control-card{padding:9px 11px!important}
  .lb-control-card p{display:none!important}
  .lb-command-bar .lb-action,.lb-command-bar .lb-action--main{height:43px!important;min-height:43px!important;font-size:.61rem!important;padding:4px!important}
}

/* Fullscreen landscape: only the tool, with a larger compass and compact console. */
@media (orientation:landscape) and (max-height:720px) and (max-width:1200px){
  .lb-compass-panel:fullscreen,
  .lb-compass-panel:-webkit-full-screen,
  .lb-compass-panel.is-pseudo-fullscreen{
    box-sizing:border-box!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    grid-template-columns:minmax(0,1fr) minmax(280px,40vw)!important;
    grid-template-rows:minmax(0,1fr)!important;
    gap:14px!important;
    padding:max(5px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }
  .lb-compass-panel:fullscreen .lb-compass-stage,
  .lb-compass-panel:-webkit-full-screen .lb-compass-stage,
  .lb-compass-panel.is-pseudo-fullscreen .lb-compass-stage{
    height:100%!important;
    overflow:hidden!important;
  }
  .lb-compass-panel:fullscreen .lb-compass,
  .lb-compass-panel:-webkit-full-screen .lb-compass,
  .lb-compass-panel.is-pseudo-fullscreen .lb-compass{
    width:min(calc(100dvh - 18px),56vw,440px)!important;
    height:min(calc(100dvh - 18px),56vw,440px)!important;
    max-height:100%!important;
  }
  .lb-compass-panel:fullscreen .lb-tool-console,
  .lb-compass-panel:-webkit-full-screen .lb-tool-console,
  .lb-compass-panel.is-pseudo-fullscreen .lb-tool-console{
    max-width:420px!important;
    gap:10px!important;
  }
}

/* =========================================================
   LaBanOnline 2.6 — full Vietnamese cardinal labels
   Keep Bắc / Đông / Nam / Tây optically centered on the dial.
   ========================================================= */
.lb-compass__dial{
  container-type:inline-size;
}

.lb-cardinal{
  width:max-content;
  max-width:34%;
  margin:0;
  padding:0;
  font-size:clamp(1rem,6.7cqi,2rem);
  line-height:1;
  letter-spacing:-.035em;
  white-space:nowrap;
  text-align:center;
  transform-origin:center center;
}

.lb-cardinal--n{
  top:7.5%;
  left:50%;
  right:auto;
  bottom:auto;
  transform:translate(-50%,0) translateZ(0);
}

.lb-cardinal--e{
  top:50%;
  left:82.5%;
  right:auto;
  bottom:auto;
  transform:translate(-50%,-50%) translateZ(0);
}

.lb-cardinal--s{
  top:auto;
  left:50%;
  right:auto;
  bottom:6.5%;
  transform:translate(-50%,0) translateZ(0);
}

.lb-cardinal--w{
  top:50%;
  left:17.5%;
  right:auto;
  bottom:auto;
  transform:translate(-50%,-50%) translateZ(0);
}

/* Diagonal labels follow the same optical circle as the full words. */
.lb-inter{
  font-size:clamp(.62rem,2.9cqi,.82rem);
  line-height:1;
  white-space:nowrap;
}
.lb-inter--ne{top:20%;right:19%}
.lb-inter--se{right:19%;bottom:20%}
.lb-inter--sw{left:19%;bottom:20%}
.lb-inter--nw{top:20%;left:19%}

/* Smaller compass sizes need slightly more breathing room near the rim. */
@media(max-width:620px){
  .lb-cardinal{font-size:clamp(.95rem,6.4cqi,1.55rem)}
  .lb-cardinal--n{top:8%}
  .lb-cardinal--s{bottom:7%}
  .lb-cardinal--e{left:81.5%}
  .lb-cardinal--w{left:18.5%}
  .lb-inter--ne{top:20.5%;right:18.5%}
  .lb-inter--se{right:18.5%;bottom:20.5%}
  .lb-inter--sw{left:18.5%;bottom:20.5%}
  .lb-inter--nw{top:20.5%;left:18.5%}
}

/* Landscape and fullscreen use the same centered geometry at every scale. */
@media (orientation:landscape) and (max-height:720px) and (max-width:1200px){
  .lb-cardinal{font-size:clamp(.9rem,6.2cqi,1.65rem)}
  .lb-cardinal--n{top:8%}
  .lb-cardinal--s{bottom:7%}
  .lb-cardinal--e{left:81.5%}
  .lb-cardinal--w{left:18.5%}
}


/* ===== LaBanOnline 2.7 — degree ring ===== */
.lb-degree-ring{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.lb-degree{
  position:absolute;
  transform:translate(-50%,-50%);
  color:#536661;
  font-size:clamp(.56rem,2.35cqi,.82rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.88);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}
.lb-degree--0{left:50%;top:3.8%}
.lb-degree--30{left:73.2%;top:10.1%}
.lb-degree--60{left:90.3%;top:27%}
.lb-degree--90{left:96%;top:50%}
.lb-degree--120{left:90.3%;top:73%}
.lb-degree--150{left:73.2%;top:89.9%}
.lb-degree--180{left:50%;top:96.2%}
.lb-degree--210{left:26.8%;top:89.9%}
.lb-degree--240{left:9.7%;top:73%}
.lb-degree--270{left:4%;top:50%}
.lb-degree--300{left:9.7%;top:27%}
.lb-degree--330{left:26.8%;top:10.1%}

/* Keep the direction names inside the numeric scale. */
.lb-cardinal--n{top:12.5%!important}
.lb-cardinal--s{bottom:11.5%!important}
.lb-cardinal--e{left:77.5%!important}
.lb-cardinal--w{left:22.5%!important}
.lb-inter--ne{top:22%!important;right:20.5%!important}
.lb-inter--se{bottom:22%!important;right:20.5%!important}
.lb-inter--sw{bottom:22%!important;left:20.5%!important}
.lb-inter--nw{top:22%!important;left:20.5%!important}

@media (max-width:620px){
  .lb-degree{font-size:clamp(.5rem,2.7cqi,.7rem)}
  .lb-cardinal--n{top:13%!important}
  .lb-cardinal--s{bottom:12%!important}
  .lb-cardinal--e{left:76.5%!important}
  .lb-cardinal--w{left:23.5%!important}
}

@media (orientation:landscape) and (max-height:560px){
  .lb-degree{font-size:clamp(.46rem,2.55cqi,.68rem)}
  .lb-degree--0{top:4.5%}
  .lb-degree--180{top:95.5%}
  .lb-degree--90{left:95.3%}
  .lb-degree--270{left:4.7%}
  .lb-cardinal--n{top:14%!important}
  .lb-cardinal--s{bottom:13%!important}
  .lb-cardinal--e{left:75.5%!important}
  .lb-cardinal--w{left:24.5%!important}
}


/* =========================================================
   LaBanOnline 2.8 — external degree ring
   Numeric bearings live in the outer annulus. The white face
   is reserved for direction labels and the needle.
   ========================================================= */
.lb-compass{
  overflow:visible;
}

.lb-compass__dial{
  inset:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:50%;
  container-type:normal!important;
  overflow:visible;
}

.lb-compass__face{
  position:absolute;
  inset:12.5%;
  border-radius:50%;
  background:#fff;
  border:1px solid #ccd9d1;
  box-shadow:inset 0 0 0 10px #f2f5ef;
  container-type:inline-size;
  overflow:hidden;
}

.lb-degree-ring{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}

.lb-degree{
  color:#425852;
  font-size:clamp(.58rem,2.25cqi,.82rem);
  font-weight:850;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}

/* Bearings are centered in the pale outer annulus. */
.lb-degree--0{left:50%;top:5.2%}
.lb-degree--30{left:72.4%;top:11.2%}
.lb-degree--60{left:88.8%;top:27.6%}
.lb-degree--90{left:94.8%;top:50%}
.lb-degree--120{left:88.8%;top:72.4%}
.lb-degree--150{left:72.4%;top:88.8%}
.lb-degree--180{left:50%;top:94.8%}
.lb-degree--210{left:27.6%;top:88.8%}
.lb-degree--240{left:11.2%;top:72.4%}
.lb-degree--270{left:5.2%;top:50%}
.lb-degree--300{left:11.2%;top:27.6%}
.lb-degree--330{left:27.6%;top:11.2%}

/* Restore direction geometry relative to the new inner face. */
.lb-cardinal--n{top:8%!important}
.lb-cardinal--s{bottom:7%!important}
.lb-cardinal--e{left:84.5%!important}
.lb-cardinal--w{left:12.5%!important}
.lb-inter--ne{top:20.5%!important;right:18.5%!important}
.lb-inter--se{bottom:20.5%!important;right:18.5%!important}
.lb-inter--sw{bottom:20.5%!important;left:18.5%!important}
.lb-inter--nw{top:20.5%!important;left:18.5%!important}

/* Tick ring now belongs to the white face. */
.lb-ticks{
  inset:10.5%;
}

@media(max-width:620px){
  .lb-compass__face{inset:13%;box-shadow:inset 0 0 0 8px #f2f5ef}
  .lb-degree{font-size:clamp(.5rem,2.55cqi,.68rem)}
  .lb-degree--0{top:5.6%}
  .lb-degree--90{left:94.4%}
  .lb-degree--180{top:94.4%}
  .lb-degree--270{left:5.6%}
}

@media (orientation:landscape) and (max-height:560px){
  .lb-compass__face{inset:13.5%;box-shadow:inset 0 0 0 7px #f2f5ef}
  .lb-degree{font-size:clamp(.46rem,2.35cqi,.64rem)}
  .lb-degree--0{top:5.8%}
  .lb-degree--90{left:94.2%}
  .lb-degree--180{top:94.2%}
  .lb-degree--270{left:5.8%}
}


/* =========================================================
   LaBanOnline 2.9 — keep every compass label upright
   The dial rotates counter-clockwise with the heading. Each text
   label rotates by the same heading in the opposite local direction,
   so numbers and Vietnamese direction names remain readable.
   ========================================================= */
.lb-compass__dial{
  --label-rotation:0deg;
}

.lb-degree{
  transform:translate(-50%,-50%) rotate(var(--label-rotation)) translateZ(0)!important;
  transform-origin:50% 50%;
  will-change:transform;
}

.lb-cardinal--n,
.lb-cardinal--s{
  transform:translate(-50%,0) rotate(var(--label-rotation)) translateZ(0)!important;
  transform-origin:50% 50%;
  will-change:transform;
}

.lb-cardinal--e,
.lb-cardinal--w{
  transform:translate(-50%,-50%) rotate(var(--label-rotation)) translateZ(0)!important;
  transform-origin:50% 50%;
  will-change:transform;
}

.lb-inter{
  display:inline-block;
  transform:rotate(var(--label-rotation)) translateZ(0)!important;
  transform-origin:50% 50%;
  will-change:transform;
}


/* =========================================================
   LaBanOnline 3.1 — fixed device pointer
   The red tip always points to the top of the screen and the grey tip
   always points down. Only the compass dial rotates beneath the pointer.
   ========================================================= */
.lb-needle--independent{
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:34%;
  z-index:8;
  transform:translate3d(-50%,-50%,0) rotate(0deg);
  -webkit-transform:translate3d(-50%,-50%,0) rotate(0deg);
  transform-origin:50% 50%;
  will-change:auto;
  pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.lb-needle--independent .lb-needle__north,
.lb-needle--independent .lb-needle__south{
  width:clamp(22px,8cqi,38px);
}
@media (max-width:620px){
  .lb-needle--independent{width:32%;height:32%}
}
@media (orientation:landscape) and (max-height:520px){
  .lb-needle--independent{width:30%;height:30%}
}

/* =========================================================
   LaBanOnline 3.2 — portrait fullscreen fit
   Keep the entire compass tool inside narrow mobile viewports.
   ========================================================= */
@media (orientation:portrait) and (max-width:900px){
  .lb-compass-panel:fullscreen,
  .lb-compass-panel:-webkit-full-screen,
  .lb-compass-panel.is-pseudo-fullscreen{
    box-sizing:border-box!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    background:#f8faf6!important;
  }

  .lb-compass-panel:fullscreen .lb-compass-stage,
  .lb-compass-panel:-webkit-full-screen .lb-compass-stage,
  .lb-compass-panel.is-pseudo-fullscreen .lb-compass-stage{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
  }

  .lb-compass-panel:fullscreen .lb-heading-readout,
  .lb-compass-panel:-webkit-full-screen .lb-heading-readout,
  .lb-compass-panel.is-pseudo-fullscreen .lb-heading-readout{
    margin:0 0 5px!important;
  }
  .lb-compass-panel:fullscreen .lb-heading-readout strong,
  .lb-compass-panel:-webkit-full-screen .lb-heading-readout strong,
  .lb-compass-panel.is-pseudo-fullscreen .lb-heading-readout strong{
    font-size:clamp(3rem,15vw,4.7rem)!important;
  }
  .lb-compass-panel:fullscreen .lb-heading-readout span,
  .lb-compass-panel:-webkit-full-screen .lb-heading-readout span,
  .lb-compass-panel.is-pseudo-fullscreen .lb-heading-readout span{
    font-size:.95rem!important;
  }

  .lb-compass-panel:fullscreen .lb-compass,
  .lb-compass-panel:-webkit-full-screen .lb-compass,
  .lb-compass-panel.is-pseudo-fullscreen .lb-compass{
    width:min(calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),46dvh,430px)!important;
    height:min(calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),46dvh,430px)!important;
    max-width:100%!important;
    max-height:none!important;
    flex:0 0 auto!important;
    margin:0 auto!important;
  }

  .lb-compass-panel:fullscreen .lb-tool-console,
  .lb-compass-panel:-webkit-full-screen .lb-tool-console,
  .lb-compass-panel.is-pseudo-fullscreen .lb-tool-console{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:560px!important;
    margin:0 auto!important;
    gap:8px!important;
    overflow:visible!important;
  }

  .lb-compass-panel:fullscreen .lb-control-card,
  .lb-compass-panel:-webkit-full-screen .lb-control-card,
  .lb-compass-panel.is-pseudo-fullscreen .lb-control-card{
    padding:11px 13px!important;
    gap:10px!important;
    border-radius:15px!important;
  }
  .lb-compass-panel:fullscreen .lb-control-icon,
  .lb-compass-panel:-webkit-full-screen .lb-control-icon,
  .lb-compass-panel.is-pseudo-fullscreen .lb-control-icon{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    border-radius:11px!important;
    font-size:1.05rem!important;
  }
  .lb-compass-panel:fullscreen .lb-control-card strong,
  .lb-compass-panel:-webkit-full-screen .lb-control-card strong,
  .lb-compass-panel.is-pseudo-fullscreen .lb-control-card strong{
    font-size:1.1rem!important;
    line-height:1.15!important;
  }
  .lb-compass-panel:fullscreen .lb-control-card p,
  .lb-compass-panel:-webkit-full-screen .lb-control-card p,
  .lb-compass-panel.is-pseudo-fullscreen .lb-control-card p{
    font-size:.78rem!important;
    line-height:1.3!important;
  }

  .lb-compass-panel:fullscreen .lb-command-bar,
  .lb-compass-panel:-webkit-full-screen .lb-command-bar,
  .lb-compass-panel.is-pseudo-fullscreen .lb-command-bar{
    grid-template-columns:1.15fr 1fr 1fr!important;
    gap:7px!important;
  }
  .lb-compass-panel:fullscreen .lb-command-bar .lb-action,
  .lb-compass-panel:fullscreen .lb-command-bar .lb-action--main,
  .lb-compass-panel:-webkit-full-screen .lb-command-bar .lb-action,
  .lb-compass-panel:-webkit-full-screen .lb-command-bar .lb-action--main,
  .lb-compass-panel.is-pseudo-fullscreen .lb-command-bar .lb-action,
  .lb-compass-panel.is-pseudo-fullscreen .lb-command-bar .lb-action--main{
    min-height:58px!important;
    height:auto!important;
    padding:7px 5px!important;
    border-radius:12px!important;
    font-size:.74rem!important;
    line-height:1.08!important;
  }

  .lb-compass-panel:fullscreen .lb-live-copy,
  .lb-compass-panel:-webkit-full-screen .lb-live-copy,
  .lb-compass-panel.is-pseudo-fullscreen .lb-live-copy{
    display:block!important;
    margin:0!important;
    min-height:0!important;
    font-size:.76rem!important;
    line-height:1.3!important;
  }

  .lb-compass-panel:fullscreen .lb-calibration,
  .lb-compass-panel:fullscreen .lb-support-note,
  .lb-compass-panel:-webkit-full-screen .lb-calibration,
  .lb-compass-panel:-webkit-full-screen .lb-support-note,
  .lb-compass-panel.is-pseudo-fullscreen .lb-calibration,
  .lb-compass-panel.is-pseudo-fullscreen .lb-support-note{
    display:none!important;
  }
}

@media (orientation:portrait) and (max-width:430px) and (max-height:760px){
  .lb-compass-panel:fullscreen .lb-compass,
  .lb-compass-panel:-webkit-full-screen .lb-compass,
  .lb-compass-panel.is-pseudo-fullscreen .lb-compass{
    width:min(calc(100vw - 22px),40dvh,360px)!important;
    height:min(calc(100vw - 22px),40dvh,360px)!important;
  }
  .lb-compass-panel:fullscreen .lb-heading-readout strong,
  .lb-compass-panel:-webkit-full-screen .lb-heading-readout strong,
  .lb-compass-panel.is-pseudo-fullscreen .lb-heading-readout strong{
    font-size:3rem!important;
  }
  .lb-compass-panel:fullscreen .lb-control-card p,
  .lb-compass-panel:-webkit-full-screen .lb-control-card p,
  .lb-compass-panel.is-pseudo-fullscreen .lb-control-card p,
  .lb-compass-panel:fullscreen .lb-live-copy,
  .lb-compass-panel:-webkit-full-screen .lb-live-copy,
  .lb-compass-panel.is-pseudo-fullscreen .lb-live-copy{
    display:none!important;
  }
  .lb-compass-panel:fullscreen .lb-command-bar .lb-action,
  .lb-compass-panel:fullscreen .lb-command-bar .lb-action--main,
  .lb-compass-panel:-webkit-full-screen .lb-command-bar .lb-action,
  .lb-compass-panel:-webkit-full-screen .lb-command-bar .lb-action--main,
  .lb-compass-panel.is-pseudo-fullscreen .lb-command-bar .lb-action,
  .lb-compass-panel.is-pseudo-fullscreen .lb-command-bar .lb-action--main{
    min-height:52px!important;
    font-size:.68rem!important;
  }
}