.tv-hero{
  padding:72px 0 76px;
  overflow:hidden;
}

.tv-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  gap:72px;
  align-items:center;
}

.tv-hero h1{
  max-width:760px;
  margin:14px 0 22px;
  font-size:clamp(42px,5vw,68px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.tv-lead{
  max-width:680px;
  margin:0;
  font-size:18px;
  line-height:1.72;
  color:var(--muted,#5e6875);
}

.tv-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.tv-chart-preview{
  position:relative;
  padding:18px;
  border:1px solid rgba(27,79,155,.16);
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(27,79,155,.07),rgba(245,166,35,.035)),
    #fff;
  box-shadow:0 28px 70px rgba(20,42,72,.11);
}

.tv-chart-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 4px 15px;
  font-size:12px;
  letter-spacing:.08em;
  color:#1b4f9b;
}

.tv-chart-top span{
  font-weight:750;
}

.tv-chart-top small{
  color:#6d7784;
}

.tv-chart-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #dce4ed;
  border-left:1px solid #dce4ed;
  background:#fff;
}

.tv-chart-grid span{
  display:flex;
  min-height:88px;
  align-items:flex-start;
  justify-content:flex-start;
  padding:11px;
  border-right:1px solid #dce4ed;
  border-bottom:1px solid #dce4ed;
  font-size:12px;
  line-height:1.35;
  color:#4c5865;
}

.tv-chart-grid .tv-chart-center{
  align-items:center;
  justify-content:center;
  background:#f6f9fd;
  color:#1b4f9b;
  font-weight:800;
  letter-spacing:.04em;
}

.tv-section{
  padding:76px 0;
}

.tv-section-soft{
  background:#f7f9fc;
}

.tv-section-head{
  max-width:720px;
  margin-bottom:36px;
}

.tv-section-head h2,
.tv-research-block h2,
.tv-final h2{
  margin:10px 0 0;
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.12;
  letter-spacing:-.03em;
}

.tv-section-head > p:last-child{
  margin:16px 0 0;
  color:#606b77;
  line-height:1.7;
}

.tv-tool-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.tv-tool-card{
  display:flex;
  min-height:300px;
  flex-direction:column;
  padding:26px;
  border:1px solid #dfe5ec;
  border-radius:22px;
  background:#fff;
}

.tv-tool-primary{
  border-color:rgba(27,79,155,.25);
  background:
    linear-gradient(150deg,rgba(27,79,155,.075),transparent 60%),
    #fff;
}

.tv-tool-card h3{
  margin:18px 0 12px;
  font-size:22px;
  line-height:1.2;
}

.tv-tool-card p{
  margin:0;
  color:#65707c;
  line-height:1.65;
}

.tv-tool-card > a{
  margin-top:auto;
  padding-top:28px;
  color:#1b4f9b;
  font-weight:750;
  text-decoration:none;
}

.tv-tool-status{
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:#eef4fc;
  color:#1b4f9b;
  font-size:12px;
  font-weight:750;
}

.tv-tool-status.muted{
  background:#f2f3f5;
  color:#777f89;
}

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

.tv-structure-grid article{
  min-height:175px;
  padding:26px;
  border:1px solid #e1e6ec;
  border-radius:20px;
  background:#fff;
}

.tv-structure-grid strong{
  display:block;
  margin-bottom:12px;
  font-size:19px;
}

.tv-structure-grid p{
  margin:0;
  color:#66717d;
  line-height:1.65;
}

.tv-research-block{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:72px;
  padding:44px;
  border:1px solid rgba(27,79,155,.16);
  border-radius:28px;
  background:
    linear-gradient(140deg,rgba(27,79,155,.06),rgba(245,166,35,.025)),
    #fff;
}

.tv-research-copy{
  max-width:650px;
}

.tv-research-copy p{
  margin:0 0 18px;
  color:#5f6a76;
  line-height:1.72;
}

.tv-research-copy .btn{
  margin-top:10px;
}

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

.tv-knowledge-card{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:18px;
  min-height:190px;
  padding:26px;
  border:1px solid #e0e5eb;
  border-radius:20px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.tv-knowledge-card:hover{
  transform:translateY(-3px);
  border-color:rgba(27,79,155,.28);
  box-shadow:0 14px 34px rgba(22,48,80,.08);
}

.tv-knowledge-card > span{
  color:#1b4f9b;
  font-size:13px;
  font-weight:800;
}

.tv-knowledge-card strong{
  font-size:20px;
}

.tv-knowledge-card p{
  margin:10px 0 0;
  color:#68737e;
  line-height:1.65;
}

.tv-center-action{
  margin-top:28px;
  text-align:center;
}

.tv-final{
  padding:76px 0 92px;
}

.tv-final-inner{
  display:flex;
  gap:42px;
  align-items:flex-end;
  justify-content:space-between;
  padding:42px 46px;
  border-radius:28px;
  background:#102f5d;
  color:#fff;
}

.tv-final-inner > div{
  max-width:720px;
}

.tv-final .eyebrow{
  color:#f5a623;
}

.tv-final h2{
  color:#fff;
}

.tv-final p{
  margin:16px 0 0;
  color:rgba(255,255,255,.76);
  line-height:1.7;
}

@media (max-width:1050px){
  .tv-hero-grid{
    grid-template-columns:1fr;
    gap:44px;
  }

  .tv-chart-preview{
    max-width:720px;
  }

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

@media (max-width:760px){
  .tv-hero{
    padding:42px 0 48px;
  }

  .tv-hero h1{
    font-size:clamp(38px,12vw,52px);
  }

  .tv-lead{
    font-size:16px;
  }

  .tv-actions{
    flex-direction:column;
  }

  .tv-actions .btn{
    width:100%;
    justify-content:center;
  }

  .tv-chart-preview{
    padding:12px;
    border-radius:20px;
  }

  .tv-chart-grid span{
    min-height:70px;
    padding:8px;
    font-size:10px;
  }

  .tv-section{
    padding:54px 0;
  }

  .tv-tool-grid,
  .tv-structure-grid,
  .tv-knowledge-grid{
    grid-template-columns:1fr;
  }

  .tv-tool-card{
    min-height:230px;
  }

  .tv-structure-grid article{
    min-height:0;
  }

  .tv-research-block{
    grid-template-columns:1fr;
    gap:28px;
    padding:28px 22px;
    border-radius:22px;
  }

  .tv-final{
    padding:54px 0 68px;
  }

  .tv-final-inner{
    flex-direction:column;
    align-items:stretch;
    padding:30px 24px;
    border-radius:22px;
  }

  .tv-final-inner .btn{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:430px){
  .tv-chart-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .tv-chart-grid .tv-chart-center{
    display:none;
  }
}

/* =========================================================
   TU VI - APP VISUAL PARITY PHASE 2B.2D
   Source visual: Tử Vi Tứ Trụ Lite V5.9.32
   ========================================================= */

.tv-lapso-section{padding:8px 0 72px;}
.tv-lapso-form-card{padding:22px;border:1px solid rgba(27,79,155,.14);border-radius:22px;background:#fff;box-shadow:0 14px 40px rgba(22,48,80,.07);}
.tv-lapso-form{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:16px;align-items:end;}
.tv-lapso-field{display:flex;min-width:0;flex-direction:column;gap:7px;}
.tv-lapso-field label{color:#354052;font-size:13px;font-weight:750;}
.tv-lapso-field input,.tv-lapso-field select{width:100%;min-height:46px;box-sizing:border-box;padding:9px 12px;border:1px solid #cbd6e2;border-radius:11px;background:#fff;color:#17202a;font:inherit;}
.tv-lapso-field input:focus,.tv-lapso-field select:focus{outline:none;border-color:#1b4f9b;box-shadow:0 0 0 3px rgba(27,79,155,.10);}
.tv-lapso-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:9px;padding-top:3px;}
.tv-lapso-error{grid-column:1 / -1;margin:0;padding:11px 13px;border:1px solid #dfb6b6;border-radius:10px;background:#fff7f7;color:#992d2d;font-size:13px;}
.tv-lapso-result{margin-top:34px;}
.tv-lapso-result-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px;}
.tv-lapso-result-head h2{margin:3px 0 0;}
.tv-lapso-result-note{margin:0;color:#6d7784;font-size:12px;}
.tv-lapso-chart-scroll{overflow-x:auto;overflow-y:hidden;padding:2px 2px 14px;scrollbar-width:thin;}

/* Board follows the app instead of the custom web renderer. */
.tuvi-app-board.la-so-container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,236px);
  gap:2px;
  position:relative;
  width:min(720px,100%);
  max-width:720px;
  box-sizing:border-box;
  margin:0 auto;
  background:#ccc;
  border:2px solid #555;
  color:#222;
  font-family:Arial,sans-serif;
}

.tuvi-app-board .cung-so{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:hidden;
  box-sizing:border-box;
  padding:6px 6px 28px;
  border-radius:2px;
  background:#fff;
  font-size:11px;
}

.tuvi-app-board .cung-top-row{
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  padding-bottom:3px;
  border-bottom:1px solid #eee;
}

.tuvi-app-board .ten-cung-chinh{
  order:1;
  padding:2px 4px;
  border-radius:2px;
  background:#e3f2fd;
  color:#1565c0;
  text-align:center;
  text-transform:uppercase;
  font-size:12px;
  font-weight:bold;
}

.tuvi-app-board .chinh-tinh-box{
  order:2;
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  gap:1px;
  color:#222;
  text-align:center;
  text-transform:uppercase;
  font-size:11px;
  font-weight:bold;
}

.tuvi-app-board .tu-hoa-box{
  min-height:14px;
  margin-top:2px;
  text-align:center;
  text-transform:uppercase;
  font-size:11px;
  font-weight:bold;
  line-height:1.25;
}

.tuvi-app-board .phu-tinh-container{
  display:flex;
  width:100%;
  min-height:0;
  flex-grow:1;
  justify-content:space-between;
  gap:4px;
  margin-top:3px;
  padding-bottom:4px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#aab4b9 #f2f2f2;
}
.tuvi-app-board .phu-tinh-container::-webkit-scrollbar{width:7px;}
.tuvi-app-board .phu-tinh-container::-webkit-scrollbar-track{background:#f2f2f2;border-radius:4px;}
.tuvi-app-board .phu-tinh-container::-webkit-scrollbar-thumb{background:#aab4b9;border-radius:4px;}

.tuvi-app-board .cat-tinh-col,
.tuvi-app-board .sat-tinh-col{
  display:flex;
  width:50%;
  flex-direction:column;
  gap:0;
  font-size:10px;
  font-weight:bold;
  line-height:1.12;
}
.tuvi-app-board .cat-tinh-col{text-align:left;}
.tuvi-app-board .sat-tinh-col{text-align:right;}
.tuvi-app-board .cat-tinh-col>span,
.tuvi-app-board .sat-tinh-col>span{display:block;}

.tuvi-app-board .sao-ten{white-space:nowrap;}
.tuvi-app-board .sao-trang-thai{white-space:normal;}

.tuvi-app-board .dai-han-box{
  position:absolute;
  top:4px;
  right:5px;
  color:#333;
  font-size:10px;
  font-weight:bold;
}
.tuvi-app-board .dai-han-can-chi-box{
  position:absolute;
  z-index:3;
  top:5px;
  left:5px;
  line-height:1;
  white-space:nowrap;
  font-size:9px;
  font-weight:600;
  pointer-events:none;
}
.tuvi-app-board .tieu-han-box{
  position:absolute;
  top:18px;
  left:5px;
  padding:1px 3px;
  border-radius:2px;
  color:#777;
  font-size:9px;
  font-weight:bold;
  line-height:1.15;
}
.tuvi-app-board .tieu-han-active{background:#fff1d6;color:#222;border:1px solid #d6a84f;}
.tuvi-app-board .nguyet-han-box{
  position:absolute;
  z-index:3;
  bottom:2px;
  left:5px;
  color:#555;
  white-space:nowrap;
  font-size:9px;
  font-weight:600;
  line-height:1;
  pointer-events:none;
}
.tuvi-app-board .nguyet-han-compact{display:none;}
.tuvi-app-board .cung-dia-chi{
  position:absolute;
  right:5px;
  bottom:2px;
  color:#909090;
  text-transform:uppercase;
  font-size:9px;
  font-weight:600;
}
.tuvi-app-board .cung-cuc-vong{
  position:absolute;
  bottom:14px;
  left:50%;
  width:70%;
  transform:translateX(-50%);
  text-align:center;
  font-size:10px;
  font-style:italic;
  font-weight:bold;
  line-height:1.15;
}

.tuvi-app-board .thien-ban-giua{
  position:relative;
  display:flex;
  overflow:hidden;
  box-sizing:border-box;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:34px 12px 12px;
  border:1px dashed #b92b27;
  background:#fffdf6;
}
.tuvi-app-board .tb-title{margin-bottom:2px;color:#b92b27;text-transform:uppercase;letter-spacing:1px;font-size:16px;font-weight:bold;}
.tuvi-app-board .tb-name{margin-bottom:6px;color:#1565c0;font-size:14px;font-weight:bold;}
.tuvi-app-board .tb-info-line{margin-bottom:3px;color:#333;font-size:12px;font-weight:500;}
.tuvi-app-board .tb-note-line{margin-top:4px;color:#0b2265;font-size:11px;font-weight:bold;text-align:center;}
.tuvi-app-board .tb-note-row{display:block;}

.tuvi-app-board table{
  width:84%;
  margin-top:4px;
  border-collapse:collapse;
  table-layout:fixed;
  background:#fff;
  text-align:center;
  font-size:10px;
  line-height:1.12;
}
.tuvi-app-board th,
.tuvi-app-board td{padding:2px 3px;border:1px solid #ddd;line-height:1.12;}
.tuvi-app-board th{background:#f5f5f5;color:#444;font-weight:bold;}
.tuvi-app-board .tb-can-chi-stack{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;}
.tuvi-app-board .tb-can-chi-stack span{display:block;font-weight:bold;}

.tuvi-app-board .tieu-han-thien-ban{position:absolute;inset:0;color:#333;font-size:10px;font-weight:bold;pointer-events:none;}
.tuvi-app-board .tieu-han-center-label{position:absolute;transform:translate(-50%,-50%);padding:1px 3px;border-radius:2px;white-space:nowrap;text-align:center;}
.tuvi-app-board .tieu-han-center-active{border:0;background:transparent;color:#d32f2f;line-height:inherit;}

.tuvi-app-board .khong-vong-layer{position:absolute;z-index:8;inset:0;pointer-events:none;}
.tuvi-app-board .khong-vong-label{
  position:absolute;
  transform:translate(-50%,-50%);
  padding:2px 5px;
  border:1px solid #fff;
  border-radius:2px;
  background:#111;
  color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  text-align:center;
  font-size:11px;
  font-weight:bold;
  line-height:1.05;
}
.tuvi-app-board .khong-vong-label.khong-vong-center-top{transform:translate(-50%,2px);}
.tuvi-app-board .khong-vong-label.khong-vong-center-bottom{transform:translate(-50%,calc(-100% - 2px));}

/* Same five-element palette used by the app. */
.tuvi-app-board .hanh-moc{color:#00882d!important;}
.tuvi-app-board .hanh-hoa{color:#d32f2f!important;}
.tuvi-app-board .hanh-tho{color:#dfa100!important;}
.tuvi-app-board .hanh-kim{color:#758283!important;}
.tuvi-app-board .hanh-thuy{color:#0b2265!important;}

@media (max-width:1080px){
  .tv-lapso-form{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tv-lapso-field--wide{grid-column:1 / -1;}
}

@media (max-width:720px){
  .tv-lapso-form-card{padding:15px;border-radius:17px;}
  .tv-lapso-form{grid-template-columns:1fr;}
  .tv-lapso-field--wide,.tv-lapso-actions,.tv-lapso-error{grid-column:1;}
  .tv-lapso-result-head{align-items:flex-start;flex-direction:column;gap:5px;}
  .tv-lapso-chart-scroll{overflow:visible;margin:0;padding:0;}

  /* App-like whole-board mobile layout: no horizontal scrolling. */
  .tuvi-app-board.la-so-container{
    width:calc(100% + 6px);
    max-width:calc(100% + 6px);
    margin-left:-3px;
    margin-right:-3px;
    grid-template-rows:repeat(4,176px);
    gap:0;
    border-width:1px;
    overflow:hidden;
    -webkit-text-size-adjust:none;
    text-size-adjust:none;
  }
  .tuvi-app-board .cung-so{padding:3px 2px 10px;border-radius:0;box-shadow:inset 0 0 0 1px #c8c8c8;font-size:9px;}
  .tuvi-app-board .cung-top-row{padding-top:9px;}
  .tuvi-app-board .ten-cung-chinh{padding:1px 2px;font-size:10px;}
  .tuvi-app-board .chinh-tinh-box{font-size:9px;line-height:1.1;}
  .tuvi-app-board .tu-hoa-box{min-height:9px;margin-top:1px;font-size:7px;line-height:1.02;}
  .tuvi-app-board .phu-tinh-container{gap:1px;margin-top:1px;padding-bottom:2px;overflow:hidden;scrollbar-width:none;}
  .tuvi-app-board .phu-tinh-container::-webkit-scrollbar{display:none;width:0;height:0;}
  .tuvi-app-board .cat-tinh-col,.tuvi-app-board .sat-tinh-col{flex:0 0 50%;width:50%;min-width:0;font-family:Roboto,"Noto Sans",Arial,sans-serif;font-size:7px;font-weight:600;line-height:1.18;}
  .tuvi-app-board .cat-tinh-col>span,.tuvi-app-board .sat-tinh-col>span{display:block;min-width:0;max-width:100%;white-space:normal;overflow-wrap:normal;word-break:normal;}
  .tuvi-app-board .sao-ten{white-space:nowrap;}
  .tuvi-app-board .cung-cuc-vong{bottom:12px;width:82%;font-family:Roboto,"Noto Sans",Arial,sans-serif;font-size:7px;font-style:normal;font-weight:600;line-height:1.18;}
  .tuvi-app-board .cung-dia-chi{font-size:7px;}
  .tuvi-app-board .dai-han-box{font-size:8px;}
  .tuvi-app-board .dai-han-can-chi-box{top:3px;left:3px;font-size:7px;}
  .tuvi-app-board .tieu-han-box{top:13px;left:3px;font-size:7px;}
  .tuvi-app-board .nguyet-han-box{bottom:2px;left:3px;font-size:7px;}
  .tuvi-app-board .nguyet-han-full{display:none;}
  .tuvi-app-board .nguyet-han-compact{display:inline;}

  .tuvi-app-board .thien-ban-giua{padding:30px 4px 5px;overflow:hidden;}
  .tuvi-app-board .tb-title{margin-bottom:0;letter-spacing:0;font-family:"Noto Serif",serif;font-size:12px;font-weight:600;line-height:1.05;}
  .tuvi-app-board .tb-name{margin-bottom:1px;font-family:"Noto Serif",serif;font-size:8px;font-weight:500;line-height:1.05;}
  .tuvi-app-board .tb-info-line,.tuvi-app-board .tb-note-line{margin-top:0;margin-bottom:1px;color:#000;font-family:"Noto Serif",serif;font-size:7px;font-weight:700;line-height:1.05;}
  .tuvi-app-board table{width:78%;margin-top:1px;margin-bottom:1px;font-family:"Noto Serif",serif;font-size:6px;font-weight:700;line-height:1.05;}
  .tuvi-app-board th,.tuvi-app-board td{padding:1px 0;overflow-wrap:anywhere;line-height:1.05;}
  .tuvi-app-board .tieu-han-thien-ban{font-size:7px;}
  .tuvi-app-board .khong-vong-label{padding:1px 4px;font-size:9px;}

  /* Android Play V21 brighter palette. */
  .tuvi-app-board .phu-tinh-container .hanh-moc,.tuvi-app-board .cung-cuc-vong .hanh-moc{color:#00B04A!important;}
  .tuvi-app-board .phu-tinh-container .hanh-hoa,.tuvi-app-board .cung-cuc-vong .hanh-hoa{color:#F02B2C!important;}
  .tuvi-app-board .phu-tinh-container .hanh-tho,.tuvi-app-board .cung-cuc-vong .hanh-tho{color:#DB9000!important;}
  .tuvi-app-board .phu-tinh-container .hanh-kim,.tuvi-app-board .cung-cuc-vong .hanh-kim{color:#73777C!important;}
  .tuvi-app-board .phu-tinh-container .hanh-thuy,.tuvi-app-board .cung-cuc-vong .hanh-thuy{color:#000!important;}
}

@media (max-width:399px){
  .tuvi-app-board table{width:84%;}
}

@media (max-width:700px) and (min-height:800px){
  .tuvi-app-board.la-so-container{grid-template-rows:repeat(4,188px);}
}

/* =========================================================
   APP EXPORT PARITY PHASE 2B.2E
   Portrait benchmark: Lite V5.9.32 export
   ========================================================= */

@media (min-width:721px){
  .tuvi-app-board.la-so-container{
    gap:0;
    background:#d8d2c6;
    border:1px solid #817b71;
  }

  .tuvi-app-board .cung-so{
    padding:5px 5px 27px;
    border-radius:0;
    background:#f3f0e8;
    box-shadow:inset 0 0 0 1px #9f9a90;
    font-size:10px;
    line-height:1.12;
  }

  .tuvi-app-board .cung-top-row{
    gap:1px;
    padding-bottom:2px;
    border-bottom:1px solid #c5c0b7;
  }

  .tuvi-app-board .ten-cung-chinh{
    padding:1px 3px;
    border-radius:0;
    background:transparent;
    color:#164f7a;
    letter-spacing:0;
    font-size:11px;
    font-weight:700;
  }

  .tuvi-app-board .chinh-tinh-box{
    font-size:10px;
    line-height:1.12;
  }

  .tuvi-app-board .tu-hoa-box{
    font-size:8px;
    line-height:1.08;
  }

  .tuvi-app-board .phu-tinh-container{
    gap:1px;
    margin-top:2px;
    font-size:9px;
    line-height:1.1;
  }

  .tuvi-app-board .dai-han-can-chi-box,
  .tuvi-app-board .dai-han-box,
  .tuvi-app-board .nguyet-han-box{
    font-size:9px;
  }

  .tuvi-app-board .thien-ban-giua{
    padding:28px 10px 10px;
    border:1px solid #9f9a90;
    background:#eee9de;
  }

  .tuvi-app-board .tb-title{
    margin-bottom:2px;
    letter-spacing:.5px;
    font-size:15px;
  }

  .tuvi-app-board .tb-name{
    margin-bottom:5px;
    font-size:13px;
  }

  .tuvi-app-board .tb-info-line{
    margin-bottom:2px;
    font-size:11px;
    font-weight:600;
  }

  .tuvi-app-board .tb-note-line{
    margin-top:3px;
    font-size:10px;
    line-height:1.15;
  }

  .tuvi-app-board table{
    width:84%;
    margin-top:3px;
    font-size:9px;
  }

  .tuvi-app-board th,
  .tuvi-app-board td{
    padding:2px;
    border-color:#bbb5aa;
  }
}



/* =========================================================
   WEB-UX-1E TU VI HUB
   Scoped to /tu-vi/ hub only.
   ========================================================= */

.tv-hub-page{
  background:var(--bg);
}

.tv-hub-page .tv-hub{
  color:var(--ink);
}

.tv-hub-page .tv-hub-hero{
  padding:72px 0 68px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      var(--bg) 100%
    );
}

.tv-hub-page .tv-hub-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(340px,.84fr);
  gap:56px;
  align-items:center;
}

.tv-hub-page .tv-hub-hero-copy{
  max-width:760px;
}

.tv-hub-page .tv-hub-hero h1{
  margin:18px 0 22px;
  max-width:760px;
  color:var(--ink);
  font-size:clamp(44px,5.4vw,72px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.tv-hub-page .tv-hub-lead{
  max-width:690px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.75;
}

.tv-hub-page .tv-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.tv-hub-page .tv-hub-principles{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}

.tv-hub-page .tv-hub-principles span{
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
}

.tv-hub-page .tv-hub-flow{
  padding:28px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
}

.tv-hub-page .tv-hub-flow-label{
  margin:0 0 18px;
  color:var(--brand);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}

.tv-hub-page .tv-hub-flow ol{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

.tv-hub-page .tv-hub-flow li{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:14px;
  padding:16px 0;
  border-top:1px solid var(--line);
}

.tv-hub-page .tv-hub-flow li:first-child{
  border-top:0;
  padding-top:0;
}

.tv-hub-page .tv-hub-flow li>b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:12px;
}

.tv-hub-page .tv-hub-flow li strong{
  display:block;
  margin-bottom:4px;
  color:var(--ink);
  font-size:15px;
}

.tv-hub-page .tv-hub-flow li span{
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.tv-hub-page .tv-hub-flow-note{
  margin:6px 0 0;
  padding:16px;
  border-radius:12px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}


.tv-hub-page .tv-hub-section{
  padding:76px 0;
}

.tv-hub-page .tv-hub-section-soft{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}

.tv-hub-page .tv-hub-section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
  gap:52px;
  align-items:end;
  margin-bottom:34px;
}

.tv-hub-page .tv-hub-section-head h2{
  max-width:760px;
  margin:9px 0 0;
  color:var(--ink);
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.1;
  letter-spacing:-.03em;
}

.tv-hub-page .tv-hub-section-head>p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}


.tv-hub-page .tv-tool-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.tv-hub-page .tv-tool-card{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:16px;
  min-height:225px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:none;
}

.tv-hub-page .tv-tool-card:hover{
  transform:none;
}

.tv-hub-page .tv-tool-primary{
  border-color:#bdc8df;
  background:
    linear-gradient(
      145deg,
      #fff 0%,
      var(--brand-soft) 100%
    );
}

.tv-hub-page .tv-tool-index{
  color:var(--gold);
  font-size:13px;
  font-weight:800;
}

.tv-hub-page .tv-tool-card h3{
  margin:6px 0 10px;
  color:var(--ink);
  font-size:22px;
}

.tv-hub-page .tv-tool-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.tv-hub-page .tv-tool-card>a{
  display:inline-block;
  margin-top:20px;
  color:var(--brand);
  font-weight:750;
  text-decoration:none;
}

.tv-hub-page .tv-tool-status{
  color:var(--green);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.tv-hub-page .tv-tool-status.muted{
  color:var(--muted);
}


.tv-hub-page .tv-method-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.tv-hub-page .tv-method-grid article{
  padding:26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--bg);
}

.tv-hub-page .tv-method-grid article>span{
  color:var(--gold);
  font-size:13px;
  font-weight:800;
}

.tv-hub-page .tv-method-grid h3{
  margin:28px 0 10px;
  font-size:20px;
}

.tv-hub-page .tv-method-grid p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.tv-hub-page .tv-method-note{
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:center;
  margin-top:18px;
  padding:24px 26px;
  border-left:3px solid var(--gold);
  background:var(--surface-2);
}

.tv-hub-page .tv-method-note strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink);
}

.tv-hub-page .tv-method-note p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  line-height:1.65;
}


.tv-hub-page .tv-structure-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.tv-hub-page .tv-structure-card{
  padding:28px;
  border-top:2px solid var(--brand);
  background:#fff;
}

.tv-hub-page .tv-structure-number{
  display:block;
  min-height:42px;
  color:var(--brand);
  font-size:32px;
  font-weight:800;
  letter-spacing:-.04em;
}

.tv-hub-page .tv-structure-card h3{
  margin:20px 0 9px;
  font-size:20px;
}

.tv-hub-page .tv-structure-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}


.tv-hub-page .tv-hub-research{
  background:#fff;
}

.tv-hub-page .tv-knowledge-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.tv-hub-page .tv-knowledge-card{
  display:flex;
  flex-direction:column;
  min-height:285px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:inherit;
  text-decoration:none;
}

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

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

.tv-hub-page .tv-knowledge-type{
  color:var(--brand);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.tv-hub-page .tv-knowledge-type.muted{
  color:var(--muted);
}

.tv-hub-page .tv-knowledge-card h3{
  margin:36px 0 10px;
  color:var(--ink);
  font-size:21px;
  line-height:1.3;
}

.tv-hub-page .tv-knowledge-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.tv-hub-page .tv-knowledge-card strong{
  margin-top:auto;
  padding-top:24px;
  color:var(--brand);
}

.tv-hub-page .tv-hub-research-link{
  margin-top:24px;
}

.tv-hub-page .tv-hub-research-link a{
  color:var(--brand);
  font-weight:750;
}


.tv-hub-page .tv-final{
  padding:0 0 76px;
  background:#fff;
}

.tv-hub-page .tv-final-inner{
  display:flex;
  justify-content:space-between;
  gap:36px;
  align-items:center;
  padding:38px 40px;
  border-radius:18px;
  background:var(--brand-dark);
  color:#fff;
}

.tv-hub-page .tv-final .eyebrow{
  color:#d7deed;
}

.tv-hub-page .tv-final h2{
  max-width:700px;
  margin:7px 0 8px;
  color:#fff;
  font-size:clamp(28px,3vw,42px);
  line-height:1.12;
}

.tv-hub-page .tv-final p{
  margin:0;
  color:#d7deed;
  line-height:1.65;
}

.tv-hub-page .tv-final .btn.primary{
  flex:0 0 auto;
  background:#fff;
  color:var(--brand-dark);
}


@media (max-width:1050px){

  .tv-hub-page .tv-hub-hero-grid{
    grid-template-columns:1fr;
  }

  .tv-hub-page .tv-hub-flow{
    max-width:760px;
  }

  .tv-hub-page .tv-hub-section-head{
    grid-template-columns:1fr;
    gap:14px;
  }

}


@media (max-width:760px){

  .tv-hub-page .tv-hub-hero{
    padding:48px 0 46px;
  }

  .tv-hub-page .tv-hub-hero-grid{
    gap:34px;
  }

  .tv-hub-page .tv-hub-hero h1{
    font-size:clamp(38px,11vw,56px);
  }

  .tv-hub-page .tv-hub-lead{
    font-size:16px;
  }

  .tv-hub-page .tv-hub-section{
    padding:56px 0;
  }

  .tv-hub-page .tv-tool-grid,
  .tv-hub-page .tv-method-grid,
  .tv-hub-page .tv-structure-grid,
  .tv-hub-page .tv-knowledge-grid{
    grid-template-columns:1fr;
  }

  .tv-hub-page .tv-tool-card{
    min-height:0;
  }

  .tv-hub-page .tv-method-note{
    align-items:flex-start;
    flex-direction:column;
  }

  .tv-hub-page .tv-final-inner{
    align-items:flex-start;
    flex-direction:column;
    padding:30px;
  }

}


@media (max-width:430px){

  .tv-hub-page .tv-hub-hero{
    padding-top:38px;
  }

  .tv-hub-page .tv-hub-hero h1{
    font-size:38px;
  }

  .tv-hub-page .tv-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .tv-hub-page .tv-actions .btn{
    width:100%;
    justify-content:center;
  }

  .tv-hub-page .tv-hub-flow{
    padding:22px;
  }

  .tv-hub-page .tv-tool-card{
    grid-template-columns:36px minmax(0,1fr);
    padding:22px;
  }

  .tv-hub-page .tv-final-inner{
    padding:26px 22px;
  }

}


/* =========================================================
   WEB-UX-1E.1 COMPACT CONTENT
   ========================================================= */

.tv-hub-page .tv-hub-hero{
  padding:58px 0 52px;
}

.tv-hub-page .tv-hub-lead{
  max-width:620px;
}

.tv-hub-page .tv-hub-flow li{
  padding:13px 0;
}

.tv-hub-page .tv-hub-flow li>div{
  align-self:center;
}

.tv-hub-page .tv-hub-section{
  padding:60px 0;
}

.tv-hub-page .tv-hub-section-head{
  margin-bottom:26px;
}

.tv-hub-page .tv-tool-card{
  min-height:185px;
}

.tv-hub-page .tv-method-grid article{
  padding:24px;
}

.tv-hub-page .tv-method-grid h3{
  margin:20px 0 8px;
}

.tv-hub-page .tv-structure-card{
  min-height:200px;
}

.tv-hub-page .tv-knowledge-card{
  min-height:230px;
}

.tv-hub-page .tv-knowledge-card h3{
  margin:24px 0 8px;
}

.tv-hub-page .tv-final{
  padding-bottom:60px;
}


@media (max-width:760px){

  .tv-hub-page .tv-hub-hero{
    padding:42px 0 40px;
  }

  .tv-hub-page .tv-hub-section{
    padding:44px 0;
  }

  .tv-hub-page .tv-tool-card,
  .tv-hub-page .tv-structure-card,
  .tv-hub-page .tv-knowledge-card{
    min-height:0;
  }

}


@media (max-width:430px){

  .tv-hub-page .tv-hub-hero{
    padding-top:32px;
  }

  .tv-hub-page .tv-hub-section{
    padding:38px 0;
  }

}


/* =========================================================
   WEB-UX-1E.2 MOBILE DIRECT FLOW
   Desktop keeps the research flow panel.
   Mobile goes directly from hero to actions.
   ========================================================= */

@media (max-width:760px){

  .tv-hub-page .tv-hub-flow{
    display:none;
  }

}


/* =========================================================
   WEB-UX-1F LAP LA SO SHELL
   Shell only. Canonical chart CSS remains independent.
   ========================================================= */

.tv-lapso-main{
  background:var(--bg);
}

.tv-lapso-workspace{
  padding:34px 0 72px;
}

.tv-lapso-breadcrumb{
  margin-bottom:24px;
}

.tv-lapso-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:22px;
}

.tv-lapso-heading h1{
  margin:7px 0 7px;
  color:var(--ink);
  font-size:clamp(34px,4vw,48px);
  line-height:1.05;
  letter-spacing:-.035em;
}

.tv-lapso-heading>div>p:last-child{
  margin:0;
  color:var(--muted);
  font-size:15px;
}


.tv-lapso-workspace .tv-lapso-form-card{
  padding:22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
}


.tv-lapso-workspace .tv-lapso-form{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  align-items:end;
}


.tv-lapso-workspace .tv-lapso-field{
  min-width:0;
}


.tv-lapso-workspace .tv-lapso-field--name{
  grid-column:span 3;
}

.tv-lapso-workspace .tv-lapso-field--date{
  grid-column:span 3;
}

.tv-lapso-workspace .tv-lapso-field--time{
  grid-column:span 2;
}

.tv-lapso-workspace .tv-lapso-field--gender{
  grid-column:span 2;
}

.tv-lapso-workspace .tv-lapso-field--year{
  grid-column:span 2;
}


.tv-lapso-workspace .tv-lapso-field label{
  margin-bottom:1px;
  color:var(--ink);
  font-size:12px;
  font-weight:750;
}


.tv-lapso-workspace .tv-lapso-field input,
.tv-lapso-workspace .tv-lapso-field select{
  min-height:44px;
  border-color:var(--line);
  border-radius:10px;
  background:#fff;
}


.tv-lapso-workspace .tv-lapso-actions{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:9px;
  padding-top:5px;
}


.tv-lapso-workspace .tv-lapso-submit{
  min-width:160px;
}


.tv-lapso-workspace .tv-lapso-error{
  grid-column:1 / -1;
}


.tv-lapso-workspace .tv-lapso-result{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--line);
}


.tv-lapso-workspace .tv-lapso-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:16px;
}


.tv-lapso-workspace .tv-lapso-result-head h2{
  margin:0;
  color:var(--ink);
  font-size:24px;
}


.tv-lapso-workspace .tv-lapso-result-tools{
  display:flex;
  align-items:center;
  gap:12px;
}


.tv-lapso-workspace .tv-lapso-result-note{
  margin:0;
  color:var(--muted);
  font-size:12px;
}


@media (max-width:1050px){

  .tv-lapso-workspace .tv-lapso-form{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  .tv-lapso-workspace .tv-lapso-field--name,
  .tv-lapso-workspace .tv-lapso-field--date{
    grid-column:span 3;
  }

  .tv-lapso-workspace .tv-lapso-field--time,
  .tv-lapso-workspace .tv-lapso-field--gender,
  .tv-lapso-workspace .tv-lapso-field--year{
    grid-column:span 2;
  }

}


@media (max-width:760px){

  .tv-lapso-workspace{
    padding:24px 0 52px;
  }

  .tv-lapso-breadcrumb{
    margin-bottom:18px;
  }

  .tv-lapso-heading{
    margin-bottom:18px;
  }

  .tv-lapso-heading h1{
    font-size:34px;
  }

  .tv-lapso-workspace .tv-lapso-form-card{
    padding:15px;
  }

  .tv-lapso-workspace .tv-lapso-form{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .tv-lapso-workspace .tv-lapso-field--name{
    grid-column:1 / -1;
  }

  .tv-lapso-workspace .tv-lapso-field--date,
  .tv-lapso-workspace .tv-lapso-field--time,
  .tv-lapso-workspace .tv-lapso-field--gender,
  .tv-lapso-workspace .tv-lapso-field--year{
    grid-column:span 1;
  }

  .tv-lapso-workspace .tv-lapso-actions{
    grid-column:1 / -1;
  }

  .tv-lapso-workspace .tv-lapso-submit{
    flex:1 1 auto;
  }

  .tv-lapso-workspace .tv-lapso-result-head{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .tv-lapso-workspace .tv-lapso-result-tools{
    width:100%;
    justify-content:space-between;
  }

}


@media (max-width:430px){

  .tv-lapso-heading h1{
    font-size:31px;
  }

  .tv-lapso-workspace .tv-lapso-field label{
    font-size:11px;
  }

  .tv-lapso-workspace .tv-lapso-field input,
  .tv-lapso-workspace .tv-lapso-field select{
    min-height:43px;
    padding-left:9px;
    padding-right:9px;
  }

}


/* =========================================================
   WEB-UX-1F.1 RESULT ACTIONS
   Keep result heading and Save action visible after auto-scroll.
   ========================================================= */

.tv-lapso-workspace .tv-lapso-result{
  scroll-margin-top:104px;
}

.tv-lapso-heading h1{
  margin-top:0;
}

.tv-lapso-workspace .tv-lapso-result-tools{
  display:flex;
  align-items:center;
  gap:12px;
}

.tv-lapso-workspace .tv-lapso-export-btn{
  min-width:126px;
  min-height:42px;
  border-color:var(--brand);
  background:var(--brand);
  color:#fff;
  font-weight:750;
  box-shadow:0 8px 20px rgba(36,59,107,.14);
}

.tv-lapso-workspace .tv-lapso-export-btn:hover{
  border-color:var(--brand-dark);
  background:var(--brand-dark);
  color:#fff;
}

.tv-lapso-workspace .tv-lapso-export-btn:focus-visible{
  outline:3px solid rgba(36,59,107,.18);
  outline-offset:2px;
}


@media (max-width:760px){

  .tv-lapso-workspace .tv-lapso-result{
    scroll-margin-top:88px;
  }

  .tv-lapso-workspace .tv-lapso-result-tools{
    width:100%;
    align-items:center;
    justify-content:space-between;
  }

  .tv-lapso-workspace .tv-lapso-export-btn{
    flex:0 0 auto;
    min-width:116px;
  }

}


@media (max-width:430px){

  .tv-lapso-workspace .tv-lapso-result-head{
    gap:12px;
  }

  .tv-lapso-workspace .tv-lapso-result-tools{
    gap:8px;
  }

  .tv-lapso-workspace .tv-lapso-result-note{
    max-width:170px;
    line-height:1.4;
  }

}