/*
  la-so.css — trang kết quả lá số tử vi (/la-so.html).
  Port bố cục từ "La so tu vi/web/index.html" (thương hiệu 月静 Nguyệt Tĩnh, pastel sage)
  sang bảng màu Huyền Minh (giấy dó + vàng + triện đỏ) — mọi màu/spacing đi qua biến của
  tokens.css, không hardcode hex/px mới ở đây (Ngũ hành/Tứ Hóa map lại từ token có sẵn,
  xem ghi chú tại từng khối bên dưới).

  Toàn bộ class ở đây tiền tố "laso-" để không đụng namespace với sections.css/base.css
  vốn cũng load chung trang này (dùng .ink-card/.btn/.field/.container/.section có sẵn).
*/

.laso-section {
  padding-top: calc(var(--nav-h) + var(--s-8));
}

/* Bug đã sửa: h1 trang này thừa hưởng --fs-display-xl (54px+ ở mobile) —
   đúng tầm cho tiêu đề hero 1-2 từ nhưng "Lá số tử vi của bạn" (20 ký tự)
   vỡ thành 2-3 dòng dưới 640px, có lúc ngắt ngay giữa "Tử/Vi" trông rất xấu.
   Cỡ chữ nhỏ hơn hẳn (dùng --fs-display-md thay vì -xl) để câu vừa 1 dòng
   trên phần lớn màn hình di động, không cần --fs-display-xl vì đây là tiêu
   đề phụ của trang con, không phải hero chính của landing. */
.laso-section .seal-heading h1 {
  font-size: var(--fs-display-md);
}

.laso-layout {
  display: grid;
  /* Bug đã sửa: 340px đủ rộng để chữ trong select KHÔNG còn vô hình (đã sửa padding-right
     bên dưới) nhưng vẫn quá hẹp để hiện trọn vẹn — 3 cột Ngày/Tháng/Năm mỗi cột chỉ còn
     ~33px cho chữ sau khi trừ padding, "Tháng 10"/"1971" bị cắt còn "Thá"/"197". Rộng thêm
     400px vẫn nhỏ so với 1200px container (cột kết quả bên phải vẫn dư > 750px cho lưới
     4×4), đủ chỗ cho select hiện trọn chữ mà không cần thu nhỏ font. */
  grid-template-columns: 420px 1fr;
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 960px) {
  .laso-layout {
    grid-template-columns: 1fr;
  }
}

.laso-form {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-4));
  display: grid;
  gap: var(--s-4);
}

/* Cột sticky 340px hẹp hơn cả .hero-form-col — giữ nguyên padding-right 96px
   mặc định của .field select (sections.css) khiến cả 3 cột Ngày/Tháng/Năm mất
   sạch chữ số (chỉ còn mũi tên), phát hiện qua việc test isolation/backdrop-filter/
   z-index đều không đổi gì, cuối cùng lộ ra do bề rộng cột 3-cột ~80px trừ 96px
   padding-right ra số âm, đẩy toàn bộ text ra ngoài vùng nhìn thấy. Cùng bug/cùng
   cách sửa với `.hero .field select` — xem giải thích đầy đủ tại đó. */
.laso-form .field-row {
  /* Gap mặc định var(--s-4)=16px × 2 khoảng trong hàng 3 cột ăn vào đúng phần rộng
     vừa tăng ở .laso-layout — thu lại còn s-3=12px, dồn ~8px đó cho chữ trong select. */
  gap: var(--s-3);
}

.laso-form .field select {
  /* var(--s-6)=32px từng đủ để chữ hiện lại (hết vô hình) nhưng vẫn cắt các giá trị dài
     hơn ("Tháng 10"/"Phút 30") trong cột hẹp — mũi tên trang trí chỉ cần ~20px, s-5=24px
     vẫn dư khoảng trống cho nó mà nhường thêm ~8px cho chữ. */
  padding-right: var(--s-5);
}

/* Trang lá số toàn thẻ dữ liệu (form nhập lại, tổng quan tính cách, lưới 12 cung,
   vận tháng...) — hiệu ứng "bừng sáng vàng" khi hover kế thừa từ .ink-card (thiết kế
   cho card marketing như bảng giá/chuyên gia ở landing) không hợp ở đây: người dùng
   rê chuột qua rất nhiều thẻ liên tiếp để đọc dữ liệu, glow lặp lại liên tục gây rối
   mắt thay vì là điểm nhấn. Tắt hẳn cho mọi .ink-card trong trang này, đồng nhất với
   cách .chart-form (form hero landing) đã tắt cho chính nó. */
.laso-section .ink-card:hover,
.laso-section .ink-card:focus-within {
  border-color: var(--ink-glass-border);
  transform: none;
  box-shadow: var(--ink-glass-shadow);
}

.laso-section .ink-card:hover::before,
.laso-section .ink-card:focus-within::before {
  opacity: 0;
  animation: none;
}

@media (max-width: 960px) {
  .laso-form {
    position: static;
  }
}

.laso-result {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0; /* cho phép lưới 12 cung co lại đúng track thay vì tràn cột cha */
}

.laso-empty {
  text-align: center;
  color: var(--ceramic-ivory-dim);
  padding: var(--s-8) var(--s-4);
}

.laso-output {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.laso-card-title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-heading);
  color: var(--gold-ink);
}

.laso-hd-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--ceramic-ivory-dim);
}

/* ==================== PERSONA (tổng quan tính cách) ==================== */
.laso-persona {
  border-top: 3px solid var(--gold);
}

.laso-persona-stars {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.laso-pstar {
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 3px var(--s-4);
  border-radius: var(--r-full);
  background: var(--ink-surface-2);
  border: 1px solid var(--ink-glass-border);
  color: var(--gold-ink);
}

.laso-persona-overview {
  font-size: var(--fs-body);
  color: var(--ceramic-ivory-dim);
  margin-bottom: var(--s-5);
  line-height: var(--lh-body);
}

.laso-trait-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}

@media (max-width: 560px) {
  .laso-trait-cols {
    grid-template-columns: 1fr;
  }
}

.laso-trait {
  background: var(--ink-surface-2);
  border: 1px solid var(--ink-glass-border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}

.laso-trait h4 {
  font-weight: 700;
  margin: 0 0 var(--s-3);
  font-size: var(--fs-body);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.laso-trait--good {
  border-left: 3px solid var(--hoa-loc);
}
.laso-trait--good h4 {
  color: var(--hoa-loc);
}
.laso-trait--bad {
  border-left: 3px solid var(--vermilion-bright);
}
.laso-trait--bad h4 {
  color: var(--vermilion-bright);
}

.laso-trait ul {
  margin: 0;
  padding-left: 18px;
}
.laso-trait li {
  margin: var(--s-2) 0;
  font-size: var(--fs-body);
  color: var(--ceramic-ivory);
}

.laso-persona-detail {
  font-size: var(--fs-small);
  color: var(--ceramic-ivory-dim);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--ink-glass-border);
  line-height: var(--lh-body);
}

/* ==================== TABS ==================== */
.laso-tabs {
  display: flex;
  gap: var(--s-2);
  border-bottom: 2px solid var(--ink-glass-border);
}

.laso-tab {
  background: none;
  border: none;
  padding: var(--s-3) var(--s-5);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.laso-tab:hover {
  color: var(--ceramic-ivory);
}
.laso-tab.is-active {
  color: var(--gold-ink);
  border-bottom-color: var(--gold);
}

.laso-tabpane {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ==================== TOOLBAR / VAN-ROW ==================== */
.laso-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.laso-toolbar label {
  font-size: var(--fs-small);
  color: var(--ceramic-ivory-dim);
}
.laso-toolbar select {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ink-glass-border);
  border-radius: var(--r-md);
  background: var(--ink-surface-2);
  color: var(--ceramic-ivory);
  font-family: var(--font-body);
}

.laso-legend {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--ceramic-ivory-dim);
  margin-left: auto;
}
.laso-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.laso-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid;
}

.laso-van-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 560px) {
  .laso-van-row {
    grid-template-columns: 1fr;
  }
}
.laso-van {
  border: 1px solid var(--ink-glass-border);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  padding: var(--s-4);
  background: var(--ink-surface);
}
.laso-van--dh {
  border-left-color: var(--hoa-loc);
}
.laso-van--th {
  border-left-color: var(--gold-deep);
}
.laso-van--tt {
  border-left-color: var(--hoa-ky);
}
.laso-van .laso-van-t {
  font-size: var(--fs-small);
  color: var(--muted);
}
.laso-van .laso-van-v {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-display);
  margin-top: 2px;
}
.laso-van--dh .laso-van-v {
  color: var(--hoa-loc);
}
.laso-van--th .laso-van-v {
  color: var(--gold-deep);
}
.laso-van--tt .laso-van-v {
  color: var(--hoa-ky);
}

/* ==================== LƯỚI 12 CUNG ==================== */
.laso-chart-wrap {
  position: relative;
}

.laso-chart {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(225px, 1fr));
  background: var(--gold-deep);
  border: 2px solid var(--gold-deep);
  border-radius: var(--r-sm);
  overflow: hidden;
}
@media (max-width: 600px) {
  .laso-chart {
    grid-template-rows: repeat(4, minmax(190px, 1fr));
  }
}
@media (max-width: 380px) {
  .laso-chart {
    grid-template-rows: repeat(4, minmax(160px, 1fr));
  }
}

.laso-svg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.laso-palace {
  position: relative;
  background: var(--ink-surface);
  margin: 1px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-expo), opacity var(--dur-fast) var(--ease-expo);
}
.laso-palace:hover {
  background: var(--ink-surface-2);
}
.laso-palace-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
}
.laso-pname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}
.laso-pname .laso-ms {
  color: var(--gold-ink);
}
.laso-palace-dh {
  font-size: 10px;
  color: var(--muted);
}
.laso-palace-cc {
  font-size: 11px;
  color: var(--muted-dim);
  margin-bottom: 3px;
}
.laso-palace-stars {
  display: flex;
  flex-wrap: wrap;
  gap: 0 7px;
  align-content: flex-start;
  font-size: 11.5px;
  line-height: 1.3;
  flex: 1;
  overflow: hidden;
}
.laso-col {
  display: flex;
  flex-direction: column;
}
.laso-star {
  white-space: nowrap;
}
.laso-star--chinh-tinh {
  font-weight: 700;
  font-family: var(--font-display);
}
/* Ngũ hành — tái dùng token có sẵn thay vì thêm hex mới (xem tokens.css). */
.laso-nh-Kim {
  color: var(--muted);
}
.laso-nh-Mộc {
  color: var(--hoa-loc);
}
.laso-nh-Thủy {
  color: var(--hoa-quyen);
}
.laso-nh-Hỏa {
  color: var(--vermilion-bright);
}
.laso-nh-Thổ {
  color: var(--gold-deep);
}

.laso-star--vong {
  opacity: 0.65;
  font-size: 0.9em;
}
.laso-bright {
  font-size: 0.78em;
  opacity: 0.85;
}
.laso-bottombar {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
  border-top: 1px dashed var(--ink-glass-border);
  padding-top: 2px;
}
.laso-bottombar .laso-ts {
  color: var(--ceramic-ivory-dim);
  font-weight: 500;
}
.laso-hanh-cung {
  font-size: 10px;
  font-weight: 700;
}

.laso-legend-bar {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--ceramic-ivory-dim);
}
.laso-nh-legend,
.laso-hoa-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.laso-tuhoa-mark {
  font-size: 0.82em;
  font-weight: 700;
  color: var(--ceramic-ivory-dim);
}

.laso-danhgia {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-full);
  border: 1px solid currentColor;
}
.laso-danhgia--tot {
  color: var(--hoa-loc);
}
.laso-danhgia--kha {
  color: var(--hoa-quyen);
}
.laso-danhgia--binh {
  color: var(--gold-deep);
}
.laso-danhgia--xau {
  color: var(--vermilion-bright);
}

/* Tứ Hóa — badge màu theo loại, dùng token --hoa-* (xem tokens.css). */
.laso-hoa {
  font-size: 0.82em;
  font-weight: 700;
}
.laso-hoa--Lộc {
  color: var(--hoa-loc);
}
.laso-hoa--Quyền {
  color: var(--hoa-quyen);
}
.laso-hoa--Khoa {
  color: var(--hoa-khoa);
}
.laso-hoa--Kỵ {
  color: var(--hoa-ky);
}
/* Tự Hóa — viền rỗng quanh badge để phân biệt với Hóa sinh niên (chỉ tô chữ). */
.laso-hoa--tuhoa {
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  padding: 0 3px;
}

.laso-ft {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 3px;
}
.laso-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--r-full);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.laso-tag--than {
  color: var(--ceramic-ivory-dim);
}
.laso-tag--dh {
  color: var(--hoa-loc);
}
.laso-tag--th {
  color: var(--gold-deep);
}
.laso-tag--tt {
  color: var(--hoa-ky);
}
.laso-tag--tuan {
  color: var(--hoa-quyen);
}
.laso-tag--triet {
  color: var(--gold-ink);
}

.laso-palace.is-menh {
  box-shadow: inset 0 0 0 2px var(--gold);
}
.laso-palace.is-dh::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--hoa-loc);
  pointer-events: none;
}
.laso-palace.is-th::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 4px rgba(91, 127, 168, 0.25);
  pointer-events: none;
}
.laso-palace.is-dim {
  opacity: 0.32;
}
.laso-palace.is-active {
  background: var(--ink-surface-2);
  box-shadow: inset 0 0 0 3px var(--gold);
  z-index: 6;
}
.laso-palace.is-proj-xung {
  box-shadow: inset 0 0 0 3px var(--hoa-ky);
}
.laso-palace.is-proj-tam {
  box-shadow: inset 0 0 0 3px var(--hoa-loc);
}

.laso-thienban {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: var(--ink-surface-2);
  margin: 1px;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.laso-thienban h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold-ink);
}
.laso-kv {
  font-size: 13px;
  color: var(--ceramic-ivory-dim);
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 1px 0;
}
.laso-kv b {
  color: var(--ceramic-ivory);
  font-weight: 500;
  text-align: right;
}
.laso-div {
  border-top: 1px dashed var(--ink-glass-border);
  margin: 6px 0;
}
@media (max-width: 600px) {
  .laso-thienban h2 {
    font-size: 0.85rem;
  }
  .laso-thienban .laso-kv {
    font-size: 10px;
  }
  .laso-pname {
    font-size: 0.7rem;
  }
  .laso-palace-stars {
    font-size: 10px;
  }
}

/* ==================== PANEL SAO CHIẾU + PHI HÓA ==================== */
.laso-proj-panel {
  font-size: var(--fs-small);
}
.laso-proj-panel h3 {
  margin: 0 0 var(--s-3);
  font-size: 1rem;
  color: var(--gold-ink);
}
.laso-proj-panel .laso-proj-meta {
  color: var(--muted);
  font-size: 12px;
}
.laso-proj-section {
  margin-top: var(--s-3);
}
.laso-proj-section > b {
  display: block;
  margin-bottom: var(--s-2);
}
.laso-chip {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  margin: 2px;
  border: 1px solid var(--ink-glass-border);
}
.laso-chip--xung {
  border-color: var(--hoa-ky);
  color: var(--hoa-ky);
}
.laso-chip--tam {
  border-color: var(--hoa-loc);
  color: var(--hoa-loc);
}
.laso-chip--ban {
  border-color: var(--gold-ink);
  color: var(--gold-ink);
}
.laso-phihoa-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ceramic-ivory-dim);
}
.laso-phihoa-list li {
  margin: 4px 0;
}
.laso-phihoa-list .laso-hoa {
  font-size: 1em;
}

/* ==================== VẬN THÁNG (thẻ lật) ==================== */
.laso-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
@media (max-width: 760px) {
  .laso-months {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .laso-months {
    grid-template-columns: 1fr;
  }
}
.laso-flip {
  perspective: 1200px;
  height: 248px;
  cursor: pointer;
}
.laso-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.laso-flip.is-flipped .laso-flip-inner {
  transform: rotateY(180deg);
}
.laso-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--ink-glass-border);
  border-radius: var(--r-md);
  padding: 11px 12px;
  font-size: 12px;
  background: var(--ink-surface);
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.laso-flip-front b {
  font-size: 14px;
}
.laso-flip-back {
  transform: rotateY(180deg);
  background: var(--ink-surface-2);
}
.laso-flip-back b {
  font-size: 13px;
  color: var(--gold-ink);
}
.laso-flip-hint {
  margin-top: auto;
  font-size: 10.5px;
  color: var(--muted);
  padding-top: 6px;
  text-align: right;
}
.laso-bk-chude {
  font-size: 11.5px;
  color: var(--ceramic-ivory-dim);
  margin: 5px 0 7px;
  line-height: 1.45;
}
.laso-bk-sec {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.45;
}
.laso-bk-sec > b {
  display: block;
  margin-bottom: 2px;
  font-size: 11.5px;
}
.laso-bk-sec--good > b {
  color: var(--hoa-loc);
}
.laso-bk-sec--bad > b {
  color: var(--vermilion-bright);
}
.laso-bk-sec div {
  margin: 2px 0;
  color: var(--ceramic-ivory-dim);
}
.laso-bk-loi {
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--ink-surface);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  color: var(--ceramic-ivory);
}
.laso-quote {
  font-style: italic;
  color: var(--gold-ink);
  font-size: var(--fs-small);
  line-height: 1.6;
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 10px;
  margin-top: auto;
  white-space: pre-line;
}

/* ==================== TỔNG HỢP NĂM ==================== */
.laso-ys-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold-ink);
  margin-bottom: 6px;
}
.laso-ys-story {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ceramic-ivory);
  margin-bottom: var(--s-4);
}
.laso-ys-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 600px) {
  .laso-ys-cols {
    grid-template-columns: 1fr;
  }
}
.laso-ys-sec {
  background: var(--ink-surface-2);
  border: 1px solid var(--ink-glass-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
}
.laso-ys-sec > b {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}
.laso-ys-sec--good {
  border-left: 3px solid var(--hoa-loc);
}
.laso-ys-sec--good > b {
  color: var(--hoa-loc);
}
.laso-ys-sec--bad {
  border-left: 3px solid var(--vermilion-bright);
}
.laso-ys-sec--bad > b {
  color: var(--vermilion-bright);
}
.laso-ys-sec div {
  margin: 3px 0;
  color: var(--ceramic-ivory-dim);
}
.laso-ys-loi {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--ink-surface);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  color: var(--ceramic-ivory);
}

/* ==================== TỔNG QUAN CUỘC ĐỜI ==================== */
.laso-life-summary {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ceramic-ivory-dim);
  margin: 0;
}
.laso-life-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (max-width: 680px) {
  .laso-life-grid {
    grid-template-columns: 1fr;
  }
}
.laso-lc-flip {
  perspective: 1400px;
  height: 300px;
  cursor: pointer;
}
@media (max-width: 560px) {
  .laso-lc-flip {
    height: 380px;
  }
}
.laso-life-card {
  background: var(--ink-surface);
  border: 1px solid var(--ink-glass-border);
  border-radius: var(--r-md);
  padding: 13px 15px;
  border-left: 3px solid var(--gold-ink);
}
.laso-life-card--nguoi {
  border-left-color: var(--vermilion);
}
.laso-life-card--back {
  background: var(--ink-surface-2);
}
.laso-lc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 3px;
}
.laso-lc-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--gold-ink);
}
.laso-lc-dom {
  font-size: 11.5px;
  color: var(--muted);
}
.laso-lc-stars {
  font-size: 12px;
  color: var(--ceramic-ivory-dim);
  margin: 2px 0 6px;
}
.laso-lc-row {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ceramic-ivory);
  margin-top: 4px;
}
.laso-lc-row b {
  color: var(--gold-ink);
}
.laso-lc-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ceramic-ivory-dim);
  margin-top: 4px;
}
.laso-lc-sub b {
  color: var(--ceramic-ivory);
}
.laso-lc-story {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ceramic-ivory);
  margin: 6px 0 10px;
}
.laso-lc-evi {
  font-size: 11.5px;
  color: var(--ceramic-ivory-dim);
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--ink-glass-border);
}
.laso-lc-evi b {
  color: var(--ceramic-ivory);
}
.laso-lc-verdict {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--r-full);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.laso-v-tot {
  color: var(--hoa-loc);
}
.laso-v-kha {
  color: var(--hoa-quyen);
}
.laso-v-binh {
  color: var(--gold-deep);
}
.laso-v-tracro {
  color: var(--vermilion-bright);
}

/* ==================== CTA cuối ==================== */
.laso-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  border-top: 3px solid var(--gold);
}
.laso-cta p {
  margin: var(--s-2) 0 0;
  color: var(--ceramic-ivory-dim);
  max-width: 46ch;
}