/* Trang 4 – Lập lá số tử vi + kết quả lá số (luangiaiphongthuy.com) */

  /* Trang 4 (dịch vụ tử vi) là khối HTML riêng, đặt ngay dưới khối trang 3. Mọi style nằm trong .ldd4 */
  @font-face {
    font-family: "UTM ThuPhap Thien An";
    src: url("https://luangiaiphongthuy.com/wp-content/fonts/THU%20PHAP/UTM-ThuPhap-Thien-An-dzwj7m.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  .ldd4 {
    --ldd4-bg: #f6eddb;            /* nền giấy = màu giấy đáy trang 3 (ảnh nền v4 cũng đã kéo về màu này ở mép trên) */
    --ldd4-p3: #f6ecd8;            /* màu giấy trang 3 – mép trên tan từ màu này */
    --ldd4-forest: #1d4a3a;
    --ldd4-forest-soft: #3d7560;
    --ldd4-sun: #f2a21b;
    --ldd4-sun-deep: #c9780a;
    --ldd4-heading: "UTM ThuPhap Thien An", "Playfair Display", Georgia, serif;
    --ldd4-para: "Playfair Display", Georgia, serif;
    --ldd4-sans: "Be Vietnam Pro", system-ui, sans-serif;

    /* Ảnh nền 1920×1080, tâm vòng tử vi gốc ở (1370, 540). p/q = object-position của ảnh,
       dùng chung cho cả ảnh lẫn vòng 3D để vòng luôn nằm đúng tâm các tia sáng trong ảnh */
    --ldd4-p: 0.95;
    --ldd4-q: 0.5;
    /* mobile/tablet: chiều cao vùng ảnh + vòng tử vi, xếp dưới chữ */
    --ldd4-img: min(108vw, 62vh, 820px);
    /* chiều cao header Flatsome đè lên khối (header trong suốt); JS cuối file tự đo lại, đây là giá trị dự phòng */
    --ldd4-top: 90px;

    position: relative;
    z-index: 1;                    /* bảng chọn ngày/giờ mở xuống có thể tràn qua mép dưới khối */
    overflow: hidden;
    background: var(--ldd4-bg);
    box-shadow: 0 2px 0 var(--ldd4-bg);   /* chiều cao khối là số lẻ → dòng pixel cuối bị hoà nền trắng; bóng 2px lấp kín chỗ nối */
    color: var(--ldd4-forest);
    font-family: var(--ldd4-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  @supports (height: 100svh) {
    .ldd4 { --ldd4-img: min(108vw, 62svh, 820px); }
  }
  @supports (overflow: clip) {
    .ldd4 { overflow: visible; overflow-x: clip; }   /* chỉ cắt 2 bên, để bảng chọn ngày/giờ tràn xuống được */
  }
  .ldd4 *, .ldd4 *::before, .ldd4 *::after { box-sizing: border-box; margin: 0; padding: 0; }
  .ldd4 img { display: block; max-width: none; }
  .ldd4 a { text-decoration: none; }

  /* ----- Sân khấu: ảnh nền + vòng tử vi (mobile: neo đáy, dưới chữ) ----- */
  .ldd4__stage {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ldd4-img);
    /* KHÔNG cắt: bóng đổ + quầng sáng của vòng tử vi tan tự nhiên qua mép dưới khối (trước bị cắt thành vệt xám thẳng).
       Cắt ngang do .ldd4 { overflow-x: clip } lo; phần ảnh tràn xuống dưới đã trong suốt nhờ mask theo đáy khối */
    overflow: visible;
    container-type: size;          /* để vòng 3D tính đúng tỉ lệ ảnh (đơn vị cqw/cqh) */
  }
  .ldd4__stage > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: calc(var(--ldd4-p) * 100%) calc(var(--ldd4-q) * 100%);
    /* mobile: đáy ảnh = đáy khối → tan về màu giấy, nối liền khối Chuyên gia bên dưới */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
  }
  /* mobile: mép trên ảnh tan vào màu giấy */
  .ldd4__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--ldd4-bg) 0%, rgba(246, 237, 219, 0.6) 10%, rgba(246, 237, 219, 0) 26%);
  }

  /* ----- Vòng tử vi 3D ----- */
  .ldd4__wheel {
    /* s = tỉ lệ ảnh nền đang hiển thị (object-fit: cover); d = đường kính khối vòng (ảnh vòng 884px) */
    --s: max(100cqw / 1920, 100cqh / 1080);
    --d: calc(884 * var(--s));
    position: absolute;
    width: var(--d);
    height: var(--d);
    left: calc((100cqw - 1920 * var(--s)) * var(--ldd4-p) + 1370 * var(--s) - var(--d) / 2);
    top: calc((100cqh - 1080 * var(--s)) * var(--ldd4-q) + 540 * var(--s) - var(--d) / 2);
    pointer-events: none;
  }
  .ldd4__halo {
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 140, 0.34), rgba(255, 214, 140, 0) 62%);
  }
  .ldd4__tilt {
    position: absolute;
    inset: 0;
    /* nghiêng sang trái (đối xứng với La Kinh trang 1), JS cộng thêm --rx/--ry theo chuột */
    transform: perspective(calc(var(--d) * 2))
      rotateX(calc(20deg + var(--rx, 0) * 1deg))
      rotateY(calc(-16deg + var(--ry, 0) * 1deg))
      rotateZ(-4deg);
    transition: transform 0.6s ease-out;
  }
  /* Khung vuông + hình thoi phía sau: vẽ lại bằng SVG, nằm trong lớp nghiêng → nghiêng cùng vòng.
     Toạ độ SVG = pixel ảnh gốc tính từ tâm vòng; viewBox ±560 so với vòng ±442 → tràn ra 118/884 = 13.35% */
  .ldd4__frame {
    position: absolute;
    inset: -13.35%;
    width: 126.7%;
    height: 126.7%;
    overflow: visible;
  }
  /* Thân vòng bằng đồng: các lớp bóng chồng xuống dưới tạo độ dày 3D + bóng đổ trên nền */
  .ldd4__body {
    --t: calc(var(--d) * 0.003);
    position: absolute;
    inset: 0.9%;
    border-radius: 50%;
    background: #4a3210;
    box-shadow:
      0 calc(var(--t) * 1) 0 #d3a653,
      0 calc(var(--t) * 2) 0 #c0913f,
      0 calc(var(--t) * 3) 0 #a87b30,
      0 calc(var(--t) * 4) 0 #8f6626,
      0 calc(var(--t) * 5) 0 #78531e,
      0 calc(var(--t) * 6) 0 #634418,
      0 calc(var(--t) * 7) 0 #523813,
      0 calc(var(--t) * 8) 0 #45300f,
      /* bóng đổ nằm trong lớp nghiêng → nghiêng đúng theo vòng (ảnh nền v3 đã bỏ bóng phẳng của ảnh gốc) */
      0 calc(var(--d) * 0.04) calc(var(--d) * 0.05) rgba(40, 28, 8, 0.34),
      0 calc(var(--d) * 0.09) calc(var(--d) * 0.12) rgba(40, 28, 8, 0.22);
  }
  .ldd4__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
  }
  /* Tách 1 ảnh thành các vòng bằng mask (bán kính tính theo ảnh 884px: 100% = 442px).
     Thứ tự: lõi đứng yên ở dưới → vòng 12 con giáp → vòng Thiên can → bát quái ở trên cùng */
  .ldd4__ring--zodiac {
    -webkit-mask-image: radial-gradient(circle closest-side, transparent 34.8%, #000 35%);
            mask-image: radial-gradient(circle closest-side, transparent 34.8%, #000 35%);
  }
  .ldd4__ring--can {
    -webkit-mask-image: radial-gradient(circle closest-side, transparent 29.4%, #000 29.6%, #000 35%, transparent 35.2%);
            mask-image: radial-gradient(circle closest-side, transparent 29.4%, #000 29.6%, #000 35%, transparent 35.2%);
  }
  .ldd4__ring--bagua {
    -webkit-mask-image: radial-gradient(circle closest-side, transparent 14.9%, #000 15.2%, #000 29.6%, transparent 29.8%);
            mask-image: radial-gradient(circle closest-side, transparent 14.9%, #000 15.2%, #000 29.6%, transparent 29.8%);
  }
  /* Mặt kính: ánh sáng góc trên trái, tối nhẹ góc dưới phải + viền vát */
  .ldd4__glass {
    position: absolute;
    inset: 0.9%;
    border-radius: 50%;
    background:
      radial-gradient(ellipse 60% 40% at 30% 18%, rgba(255, 250, 235, 0.3), rgba(255, 250, 235, 0) 70%),
      linear-gradient(135deg, rgba(255, 250, 235, 0.16) 0%, rgba(255, 250, 235, 0) 38%, rgba(60, 40, 10, 0) 62%, rgba(60, 40, 10, 0.26) 100%);
    box-shadow: inset 0 0 0 calc(var(--d) * 0.003) rgba(255, 240, 200, 0.45);
  }

  /* ----- Nội dung ----- */
  .ldd4__inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    /* trên: chừa chiều cao header (--ldd4-top) để chữ không bị header đè; dưới: chừa vùng ảnh + vòng tử vi */
    padding: calc(3.5rem + var(--ldd4-top)) 1.25rem calc(var(--ldd4-img) * 0.97 + 1rem);
  }
  .ldd4__content { position: relative; max-width: 36rem; }
  .ldd4__eyebrow {
    display: flex;
    font-family: inherit;                  /* là h2: không nhận font/giãn dòng tiêu đề của Flatsome */
    line-height: inherit;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ldd4-sun-deep);
  }
  .ldd4__eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
  .ldd4 .ldd4__title {
    margin-top: 0.9rem;
    font-family: var(--ldd4-para);
    font-size: clamp(1.7rem, 6.4vw, 2.2rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--ldd4-forest);
  }
  .ldd4 .ldd4__title em {
    font-family: var(--ldd4-heading);       /* thư pháp – giống trang 2, 3 */
    font-size: 1.4em;
    font-style: normal;
    font-weight: 400;
    line-height: 0;                          /* font thư pháp đệm trên/dưới lớn → không kéo giãn dòng */
    white-space: nowrap;
    margin: 0 0.1em 0 0.2em;
    color: var(--ldd4-sun-deep);
  }
  .ldd4__lead {
    margin-top: 2rem;                        /* chừa chỗ cho nét thư pháp thả xuống */
    font-family: var(--ldd4-para);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(29, 74, 58, 0.85);
  }

  /* 4 dịch vụ */
  .ldd4__services {
    list-style: none;
    margin-top: 1.75rem;
    display: grid;
    gap: 1.1rem;
  }
  .ldd4__service {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: 0.85rem;
    align-items: start;
  }
  .ldd4__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgba(201, 120, 10, 0.4);
    background: rgba(255, 251, 242, 0.7);
  }
  .ldd4__icon svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: var(--ldd4-sun-deep);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ldd4 .ldd4__service-title {
    margin-top: 0.1rem;
    font-family: var(--ldd4-sans);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ldd4-forest);
  }
  .ldd4__service-text {
    margin-top: 0.2rem;
    font-family: var(--ldd4-para);
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(29, 74, 58, 0.78);
    font-variant-numeric: lining-nums;
  }

  /* ----- Form lập lá số ----- */
  .ldd4 .ldd4__form {
    margin: 1.75rem 0 0;
    padding: 1.25rem 1.1rem 1.15rem;
    background: rgba(255, 251, 242, 0.82);
    border: 1px solid rgba(176, 132, 52, 0.25);
    border-radius: 18px;
    box-shadow: 0 24px 48px -32px rgba(29, 74, 58, 0.5);
  }
  .ldd4__form-title {
    font-family: var(--ldd4-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ldd4-sun-deep);
  }
  .ldd4__fields {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.8rem;
  }
  .ldd4__field { min-width: 0; }
  .ldd4 .ldd4__label {                       /* chặn style label/legend của Flatsome (đậm, in hoa, gạch chân, margin) */
    display: block;
    margin: 0 0 0.35rem;
    border: 0;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--ldd4-sans);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(29, 74, 58, 0.85);
  }
  .ldd4 .ldd4__form .ldd4__input {           /* chặn style input của Flatsome (viền xám, bóng trong, chiều cao) */
    display: block;
    width: 100%;
    max-width: none;
    height: 2.9rem;
    margin: 0;
    padding: 0 0.9rem;
    font-family: var(--ldd4-sans);
    font-size: 16px;                          /* ≥16px: iPhone không tự phóng to khi chạm vào ô */
    line-height: normal;
    color: var(--ldd4-forest);
    background: #fffdf7;
    border: 1px solid rgba(176, 132, 52, 0.35);
    border-radius: 10px;
    box-shadow: none;
    -webkit-appearance: none;
            appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .ldd4 .ldd4__form .ldd4__input:focus {
    outline: none;
    background: #fffdf7;
    color: var(--ldd4-forest);
    border-color: var(--ldd4-sun);
    box-shadow: 0 0 0 3px rgba(242, 162, 27, 0.2);
  }
  .ldd4 .ldd4__form .ldd4__input[aria-invalid="true"] { border-color: #b4532a; }
  .ldd4 .ldd4__form .ldd4__input::placeholder { color: rgba(29, 74, 58, 0.4); }

  /* Giới tính: 2 nút chọn dạng viên thuốc (radio thật vẫn còn để đọc màn hình + bàn phím) */
  .ldd4 .ldd4__gender { margin: 0; padding: 0; border: 0; min-width: 0; }
  .ldd4 .ldd4__gender legend { padding: 0; float: left; width: 100%; }
  .ldd4__seg {
    clear: both;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    height: 2.9rem;
  }
  .ldd4__seg input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  .ldd4 .ldd4__seg label {
    display: grid;
    place-items: center;
    margin: 0;
    height: 100%;
    font-family: var(--ldd4-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(29, 74, 58, 0.8);
    background: #fffdf7;
    border: 1px solid rgba(176, 132, 52, 0.35);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }
  .ldd4 .ldd4__seg input:checked + label { background: var(--ldd4-forest); border-color: var(--ldd4-forest); color: #faf6ea; }
  .ldd4 .ldd4__seg input:focus-visible + label { box-shadow: 0 0 0 3px rgba(242, 162, 27, 0.35); }
  .ldd4__gender.is-invalid .ldd4__seg label { border-color: #b4532a; }

  .ldd4__error {
    margin-top: 0.7rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #a3471f;
  }
  .ldd4__error:empty { display: none; }
  .ldd4__error.is-ok { color: var(--ldd4-forest-soft); }
  .ldd4__form-foot {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
  }
  .ldd4 .ldd4__btn {                         /* nút gửi – chặn style button của Flatsome */
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    min-height: 0;
    padding: 0.8rem 0.8rem 0.8rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--ldd4-forest);
    color: #faf6ea !important;
    font-family: var(--ldd4-sans);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 14px 28px -14px rgba(29, 74, 58, 0.6);
    transition: background-color 0.3s;
  }
  .ldd4 .ldd4__btn:hover { background: var(--ldd4-forest-soft); }
  .ldd4__btn-arrow {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ldd4-sun);
    color: var(--ldd4-forest);
    transition: transform 0.3s;
  }
  .ldd4 .ldd4__btn:hover .ldd4__btn-arrow { transform: translateX(3px); }
  .ldd4 .ldd4__btn:focus-visible { outline: 2px solid var(--ldd4-sun); outline-offset: 3px; }

  /* ----- Ô chọn ngày / giờ tự thiết kế (thay lịch mặc định của trình duyệt) ----- */
  .ldd4__control { position: relative; }
  .ldd4 .ldd4__form .ldd4__control .ldd4__input { padding-right: 2.7rem; font-variant-numeric: tabular-nums; }
  /* chặn style button của Flatsome cho mọi nút trong bộ chọn */
  .ldd4 .ldd4__trigger,
  .ldd4 .ldd4__pop button {
    margin: 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-family: var(--ldd4-sans);
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
  }
  .ldd4 .ldd4__trigger {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-top: -1.1rem;
    color: var(--ldd4-sun-deep);
  }
  .ldd4 .ldd4__trigger:hover,
  .ldd4 .ldd4__trigger[aria-expanded="true"] { background: rgba(242, 162, 27, 0.14); }
  .ldd4__trigger svg,
  .ldd4__pop svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ldd4 .ldd4__trigger:focus-visible,
  .ldd4 .ldd4__pop button:focus-visible { outline: 2px solid var(--ldd4-sun); outline-offset: 1px; }

  .ldd4__pop {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.45rem);
    left: 0;
    width: min(19.5rem, calc(100vw - 2.5rem));
    padding: 0.85rem;
    background: #fffdf7;
    border: 1px solid rgba(176, 132, 52, 0.25);
    border-radius: 16px;
    box-shadow: 0 28px 56px -20px rgba(29, 74, 58, 0.42), 0 2px 8px rgba(29, 74, 58, 0.08);
    color: var(--ldd4-forest);
    font-family: var(--ldd4-sans);
    animation: ldd4-pop 0.18s ease-out;
  }
  .ldd4__pop[hidden] { display: none; }
  .ldd4.is-picking { z-index: 3; }        /* đang mở bảng: nằm trên footer (footer z-index 1 đứng sau, chồng lên mép dưới) */
  .ldd4__picker.is-right .ldd4__pop { left: auto; right: 0; }
  @keyframes ldd4-pop { from { opacity: 0; transform: translateY(-6px); } }

  .ldd4__pop-head {
    display: grid;
    grid-template-columns: 2.1rem 1fr 2.1rem;
    align-items: center;
    gap: 0.25rem;
  }
  .ldd4 .ldd4__pop .ldd4__nav {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    color: var(--ldd4-forest);
  }
  .ldd4 .ldd4__pop .ldd4__nav:hover:not(:disabled) { background: rgba(29, 74, 58, 0.07); }
  .ldd4 .ldd4__pop .ldd4__nav:disabled { opacity: 0.25; cursor: default; }
  .ldd4 .ldd4__pop .ldd4__pop-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 2.1rem;
    padding: 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ldd4-forest);
  }
  .ldd4 .ldd4__pop .ldd4__pop-title:hover:not(:disabled) { background: rgba(242, 162, 27, 0.12); }
  .ldd4 .ldd4__pop .ldd4__pop-title:disabled { cursor: default; }
  .ldd4__pop-title svg { width: 0.85rem; height: 0.85rem; color: var(--ldd4-sun-deep); }

  .ldd4__grid {
    margin-top: 0.6rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .ldd4__grid--3 { grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
  .ldd4__grid--6 { grid-template-columns: repeat(6, 1fr); gap: 0.25rem; margin-top: 0.35rem; }
  .ldd4__wd {
    display: grid;
    place-items: center;
    height: 1.7rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(29, 74, 58, 0.5);
  }
  .ldd4 .ldd4__pop .ldd4__cell {
    display: grid;
    place-items: center;
    height: 2.3rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ldd4-forest);
    font-variant-numeric: tabular-nums;
  }
  .ldd4 .ldd4__pop .ldd4__grid--3 .ldd4__cell { height: 2.7rem; font-size: 0.86rem; }
  .ldd4 .ldd4__pop .ldd4__grid--6 .ldd4__cell { height: 2.05rem; font-size: 0.84rem; }
  .ldd4 .ldd4__pop .ldd4__cell:hover:not(:disabled) { background: rgba(242, 162, 27, 0.16); }
  .ldd4 .ldd4__pop .ldd4__cell.is-now { box-shadow: inset 0 0 0 1px rgba(201, 120, 10, 0.55); }
  .ldd4 .ldd4__pop .ldd4__cell.is-sel {
    background: var(--ldd4-forest);
    color: #faf6ea;
    box-shadow: 0 6px 14px -6px rgba(29, 74, 58, 0.7);
  }
  .ldd4 .ldd4__pop .ldd4__cell:disabled { opacity: 0.28; cursor: default; }
  .ldd4 .ldd4__pop .ldd4__cell--chi { height: 2.6rem; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; }
  .ldd4__cell--chi small { font-size: 0.6rem; font-weight: 400; opacity: 0.7; }

  .ldd4__pop-foot {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(176, 132, 52, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .ldd4__hint { font-size: 0.74rem; color: rgba(29, 74, 58, 0.6); }
  .ldd4 .ldd4__pop .ldd4__ghost {
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(29, 74, 58, 0.7);
  }
  .ldd4 .ldd4__pop .ldd4__ghost:hover { background: rgba(29, 74, 58, 0.07); color: var(--ldd4-forest); }
  .ldd4 .ldd4__pop .ldd4__done {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--ldd4-forest);
    color: #faf6ea;
    font-size: 0.8rem;
    font-weight: 500;
  }
  .ldd4 .ldd4__pop .ldd4__done:hover { background: var(--ldd4-forest-soft); }

  /* Bộ chọn giờ: ô hiển thị lớn + canh giờ */
  .ldd4__clock {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0.2rem 0.55rem;
    border-bottom: 1px solid rgba(176, 132, 52, 0.18);
  }
  .ldd4__clock b {
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ldd4-forest);
  }
  .ldd4__clock span { font-size: 0.75rem; text-align: right; color: var(--ldd4-sun-deep); }
  .ldd4__sec {
    margin-top: 0.7rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(29, 74, 58, 0.55);
  }
  @media (prefers-reduced-motion: reduce) {
    .ldd4__pop { animation: none; }
  }
  .ldd4__note {
    margin-top: 0.8rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(29, 74, 58, 0.6);
  }

  /* ========== TABLET ========== */
  @media (min-width: 600px) {
    .ldd4 { --ldd4-p: 1; }
    .ldd4__services { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
    /* Họ tên trọn dòng; ngày sinh | giờ sinh; giới tính trọn dòng */
    .ldd4__fields { grid-template-columns: 1fr 1fr; column-gap: 0.75rem; }
    .ldd4__field--full { grid-column: 1 / -1; }
    .ldd4 .ldd4__form { padding: 1.4rem 1.4rem 1.3rem; }
  }

  /* ========== DESKTOP: chữ bên trái, vòng tử vi bên phải ==========
     Chỉ khi màn đủ rộng và đủ "dẹt" (≥ 3:2); màn vuông hơn thì vòng sẽ đè lên chữ → giữ bố cục xếp chồng */
  @media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
    .ldd4 { min-height: 100vh; }
    @supports (height: 100svh) {
      .ldd4 { min-height: 100svh; }
    }
    .ldd4__stage { top: 0; height: auto; }
    .ldd4__veil {                            /* bên trái sáng giấy hơn cho chữ dễ đọc */
      background: linear-gradient(90deg, rgba(246, 237, 219, 0.72) 0%, rgba(246, 237, 219, 0.45) 30%, rgba(246, 237, 219, 0) 46%);
    }
    .ldd4__inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: inherit;
      padding: clamp(4rem, 10vh, 7rem) clamp(1.25rem, 4vw, 3rem);
    }
    .ldd4__content { max-width: min(32rem, 31vw); }   /* chừa chỗ cho hạt trang trí ở đỉnh trái hình thoi */
    /* Quầng giấy mềm sau khối chữ (mờ hết trước mép khung) */
    .ldd4__content::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -5rem -8rem -5rem -8rem;
      background: radial-gradient(closest-side, rgba(246, 237, 219, 0.85) 0%, rgba(246, 237, 219, 0.7) 55%, rgba(246, 237, 219, 0) 100%);
      pointer-events: none;
    }
    .ldd4 .ldd4__title { font-size: clamp(1.9rem, 2.7vw, 2.6rem); }
    .ldd4__lead { margin-top: 2.4rem; font-size: 16px; }

    /* Gọn để cả khối chữ + form vừa 1 màn hình: dịch vụ chỉ còn tiêu đề, form 1 hàng ngày | giờ | giới tính */
    .ldd4__inner {
      /* trên: chừa chiều cao header để chữ không bị header đè */
      padding-top: calc(clamp(2.5rem, 6vh, 5rem) + var(--ldd4-top));
      padding-bottom: clamp(2.5rem, 6vh, 5rem);
    }
    .ldd4__services { margin-top: 1.5rem; gap: 0.7rem 1.25rem; }
    .ldd4__service { grid-template-columns: 2rem 1fr; column-gap: 0.65rem; align-items: center; }
    .ldd4__icon { grid-row: auto; width: 2rem; height: 2rem; }
    .ldd4__icon svg { width: 1rem; height: 1rem; }
    .ldd4 .ldd4__service-title { margin: 0; font-size: 0.74rem; }
    .ldd4__service-text { display: none; }
    .ldd4 .ldd4__form { margin-top: 1.5rem; padding: 1.2rem 1.25rem 1.1rem; }
    .ldd4__fields { grid-template-columns: 1.45fr 1fr 0.95fr; gap: 0.7rem 0.6rem; }
    .ldd4 .ldd4__form .ldd4__input { padding: 0 0.6rem; }
    .ldd4__gender.ldd4__field--full { grid-column: auto; }
    .ldd4__form-foot { margin-top: 0.9rem; }
    .ldd4__note { margin-top: 0.65rem; }

    /* Ảnh nền + vòng: kích thước theo chiều cao MÀN HÌNH (không theo chiều cao khối) → khối có cao thêm
       vì chữ dài thì vòng cũng không phình to đè lên chữ; ảnh nằm giữa khối, mép trên/dưới tan vào nền */
    .ldd4__stage > img,
    .ldd4__wheel { --s: max(100cqw / 1920, min(100cqh, 100vh) / 1080); }
    /* Vòng không cao quá 74% màn hình → màn rộng thấp (VD 1905×880 có thanh admin) vẫn thấy trọn vòng + khung,
       tâm vẫn trùng tâm tia sáng của ảnh */
    .ldd4__wheel { --d: min(884 * var(--s), min(100cqh, 100vh) * 0.74); }
    .ldd4__stage > img {
      right: auto;
      bottom: auto;
      width: calc(1920 * var(--s));
      height: calc(1080 * var(--s));
      left: calc((100cqw - 1920 * var(--s)) * var(--ldd4-p));
      /* neo mép trên: không cắt hàng trăng ở đầu ảnh (mép trên ảnh v4 đã cùng màu giấy khối phía trên → không cần làm mờ);
         phần thừa (màn rộng thấp) chỉ cắt ở dưới, mép dưới tan vào nền */
      top: 0;
      object-fit: fill;
      /* mép trên tan rất ngắn (~40px, chưa tới hàng trăng ở ~60px) để không lộ đường kẻ chỗ kết cấu ảnh bắt đầu;
         mép dưới tan theo ĐÁY KHỐI (100cqh), không theo đáy ảnh – màn rộng thấp ảnh dài hơn khối nên trước đây
         bị cắt ngang ở đáy khối → lộ mép với khối Chuyên gia bên dưới (nền giấy cùng màu) */
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100cqh - 170px), transparent calc(100cqh - 6px));
              mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100cqh - 170px), transparent calc(100cqh - 6px));
    }
  }
  @supports (height: 100svh) {
    @media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
      .ldd4__stage > img,
      .ldd4__wheel { --s: max(100cqw / 1920, min(100cqh, 100svh) / 1080); }
      .ldd4__wheel { --d: min(884 * var(--s), min(100cqh, 100svh) * 0.74); }
    }
  }

  /* Trình duyệt cũ chưa có cqw/cqh (Safari < 16): tính gần đúng theo khung nhìn */
  @supports not (width: 1cqw) {
    .ldd4__wheel {
      --s: max(100vw / 1920, var(--ldd4-img) / 1080);
      left: calc((100vw - 1920 * var(--s)) * var(--ldd4-p) + 1370 * var(--s) - var(--d) / 2);
      top: calc((var(--ldd4-img) - 1080 * var(--s)) * var(--ldd4-q) + 540 * var(--s) - var(--d) / 2);
    }
    @media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
      .ldd4__wheel {
        --s: max(100vw / 1920, 100vh / 1080);
        top: calc((100vh - 1080 * var(--s)) * var(--ldd4-q) + 540 * var(--s) - var(--d) / 2);
      }
    }
  }

  /* ========== ANIMATIONS ========== */
  @keyframes ldd4-cw { to { transform: rotate(360deg); } }
  @keyframes ldd4-ccw { to { transform: rotate(-360deg); } }
  @keyframes ldd4-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
  }
  .ldd4__ring--zodiac { animation: ldd4-cw 180s linear infinite; will-change: transform; }
  .ldd4__ring--can { animation: ldd4-ccw 90s linear infinite; will-change: transform; }
  .ldd4__ring--bagua { animation: ldd4-cw 120s linear infinite; will-change: transform; }
  .ldd4__halo { animation: ldd4-pulse 6s ease-in-out infinite; }
  .ldd4 .is-off, .ldd4 .is-off * { animation-play-state: paused !important; }

  @media (prefers-reduced-motion: reduce) {
    .ldd4__ring, .ldd4__halo { animation: none; }
  }

  .ldd4 .ldd4__btn:disabled { opacity: 0.6; cursor: wait; }

  /* ================= KẾT QUẢ LÁ SỐ (ngay dưới hero) ================= */
  .ldls {
    --ls-bg: #f6eddb;
    --ls-card: rgba(255, 251, 242, 0.88);
    --ls-forest: #1d4a3a;
    --ls-forest-soft: #3d7560;
    --ls-sun: #f2a21b;
    --ls-sun-deep: #c9780a;
    --ls-line: rgba(176, 132, 52, 0.28);
    --ls-heading: "UTM ThuPhap Thien An", "Playfair Display", Georgia, serif;
    --ls-para: "Playfair Display", Georgia, serif;
    --ls-sans: "Be Vietnam Pro", system-ui, sans-serif;

    position: relative;
    background:
      radial-gradient(ellipse 60% 40% at 90% 8%, rgba(242, 162, 27, 0.12), rgba(242, 162, 27, 0) 70%),
      var(--ls-bg);
    color: var(--ls-forest);
    font-family: var(--ls-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .ldls *, .ldls *::before, .ldls *::after { box-sizing: border-box; margin: 0; padding: 0; }
  .ldls a { text-decoration: none; }
  .ldls__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
  }

  /* ----- Đầu trang ----- */
  .ldls__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: inherit;
    line-height: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ls-sun-deep);
  }
  .ldls__eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
  .ldls .ldls__title {
    margin-top: 0.8rem;
    font-family: var(--ls-para);
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--ls-forest);
  }
  .ldls .ldls__title em {                  /* tên khách: chữ thường dễ đọc (thư pháp dễ khó đọc với tên dài) */
    font-family: var(--ls-para);
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    margin-left: 0.15em;
    color: var(--ls-sun-deep);
  }
  .ldls__sub {
    margin-top: 1.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .ldls__pill {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 251, 242, 0.8);
    border: 1px solid var(--ls-line);
    font-size: 0.82rem;
    color: rgba(29, 74, 58, 0.85);
  }
  .ldls__pill b { font-weight: 600; color: var(--ls-forest); }

  /* ----- Thông tin cơ bản ----- */
  .ldls__h2 {
    margin-top: 2.2rem;
    font-family: var(--ls-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ls-sun-deep);
  }
  /* ----- Banner con giáp (mini hero, ảnh nền con giáp năm sinh) ----- */
  .ldls__giap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 0.9rem;
    min-height: 260px;
    display: flex;
    align-items: center;
    border-radius: 22px;
    background:
      radial-gradient(ellipse 60% 120% at 0% 100%, rgba(242, 162, 27, 0.12), rgba(242, 162, 27, 0) 60%),
      linear-gradient(100deg, #123227 0%, #1d4a3a 55%, #163a2d 100%);
    box-shadow: 0 8px 18px -14px rgba(18, 46, 36, 0.55);   /* bóng ngắn, không lan xuống các ô bên dưới */
    color: #f3ead6;
  }
  .ldls__giap + .ldls__cards { margin-top: 1.1rem; }
  .ldls__giap[hidden] { display: none; }
  .ldls__giap::before {                    /* viền vàng mảnh bên trong */
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(242, 162, 27, 0.35);
    border-radius: 14px;
    pointer-events: none;
    z-index: 2;
  }
  .ldls__giap::after {                     /* hình thoi giữa cạnh dưới */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(242, 162, 27, 0.7);
    background: #1d4a3a;
    transform: translateX(-50%) rotate(45deg);
    z-index: 2;
  }
  .ldls .ldls__giap-img {
    position: absolute;
    top: 0;
    right: 0;
    width: min(62%, 700px);
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 100% var(--giap-y, 35%);
    z-index: -1;
    /* chỉ làm mờ dải nền nối thêm bên trái ảnh (≈30% bề ngang), không phủ lên con giáp */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
  }
  .ldls__giap-txt { position: relative; z-index: 1; max-width: 56%; padding: 44px 48px; }
  .ldls__giap-k {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ls-sun);
  }
  .ldls__giap-k::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
  .ldls .ldls__giap-ten {
    margin-top: 0.7rem;
    font-family: var(--ls-para);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 400;
    line-height: 1.15;
    color: #fbf4e4;
  }
  .ldls__giap-ten b { font-weight: 400; color: var(--ls-sun); }
  .ldls__giap-sub { margin-top: 0.4rem; }
  .ldls__giap-sub span {
    display: inline-block;
    margin: 0.35rem 0.35rem 0 0;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(242, 162, 27, 0.35);
    border-radius: 999px;
    font-size: 0.8rem;
    color: rgba(243, 234, 214, 0.85);
  }
  @media (max-width: 640px) {
    .ldls__giap { min-height: 300px; align-items: flex-end; }
    .ldls .ldls__giap-img {
      width: 100%;
      object-position: 72% var(--giap-y, 35%);
      -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.25) 75%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.25) 75%, transparent 100%);
    }
    .ldls__giap-txt { max-width: none; padding: 24px 24px 28px; }
  }
  .ldls__cards {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
  }
  .ldls__card {
    padding: 1rem 1.1rem;
    background: var(--ls-card);
    border: 1px solid var(--ls-line);
    border-radius: 16px;
  }
  .ldls__card--dark { background: var(--ls-forest); border-color: var(--ls-forest); color: #f3ead6; }
  .ldls__k {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(29, 74, 58, 0.55);
  }
  .ldls__card--dark .ldls__k { color: rgba(243, 234, 214, 0.6); }
  .ldls__v {
    margin-top: 0.3rem;
    font-family: var(--ls-para);
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--ls-forest);
  }
  .ldls__card--dark .ldls__v { color: #fbf4e4; }
  .ldls__note {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(29, 74, 58, 0.7);
  }
  .ldls__card--dark .ldls__note { color: rgba(243, 234, 214, 0.75); }
  .ldls__card--dark .ldls__v b { color: var(--ls-sun); font-weight: 400; }

  /* ----- Lá số ----- */
  .ldls__chart-wrap {
    margin-top: 0.9rem;
    padding: 0.75rem;
    background: var(--ls-card);
    border: 1px solid var(--ls-line);
    border-radius: 18px;
    box-shadow: 0 30px 60px -40px rgba(29, 74, 58, 0.6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ldls__chart { min-width: 980px; }
  @media (max-width: 600px) { .ldls__chart-wrap { padding: 0.35rem; border-radius: 12px; } }
  .ldls__chart-wrap { background: var(--ls-card); }

  /* ===== LÁ SỐ – kiểu lá số truyền thống, có logo Phong Thủy Đông Dương =====
     HTML do engine vẽ; JS (trangTri) gắn class + dựng lại ô giữa, CSS này lo phần nhìn. */
  .ldls__chart .lsv {
    /* tone thương hiệu: xanh rêu + vàng nắng + nền kem */
    --lv-ink: #1d4a3a;
    --lv-line: rgba(29, 74, 58, 0.55);
    --lv-navy: #1d4a3a;
    --lv-red: #c9780a;
    --lv-hoa: #c0392b;
    --lv-moc: #2f7d4a;
    --lv-tho: #c9780a;
    --lv-kim: #7b8089;
    --lv-thuy: #1b2a24;
    --lv-phu: #3f5a4f;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, minmax(232px, auto));
    max-width: none;
    margin: 0 auto;
    border: 2px solid var(--ls-forest);
    border-radius: 0;
    overflow: visible;
    background:
      radial-gradient(ellipse 70% 50% at 20% 10%, rgba(0, 0, 0, 0.018), rgba(0, 0, 0, 0) 70%),
      radial-gradient(ellipse 60% 60% at 85% 90%, rgba(0, 0, 0, 0.022), rgba(0, 0, 0, 0) 70%),
      repeating-linear-gradient(115deg, rgba(176, 132, 52, 0.025) 0 2px, rgba(176, 132, 52, 0) 2px 7px),
      #fffaf0;
    color: var(--lv-ink);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  }

  /* ----- ô cung ----- */
  .ldls__chart .lsv .c {
    position: relative;
    padding: 6px 8px 28px;
    border: 1px solid var(--lv-line);
    background: transparent;
    font-size: 12px;
    line-height: 1.38;
    cursor: pointer;
    transition: background-color 0.15s;
  }
  .ldls__chart .lsv .c.hl { background: transparent; }
  .ldls__chart .lsv .c:hover { background: rgba(242, 162, 27, 0.05); }
  .ldls__chart .lsv .c.lv-th { background: rgba(242, 162, 27, 0.1); }
  .ldls__chart .lsv .c.lv-on { background: rgba(242, 162, 27, 0.18); }
  .ldls__chart .lsv .c.lv-xung { background: rgba(29, 74, 58, 0.06); }

  .ldls__chart .lsv .h { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 700; }
  .ldls__chart .lsv .h .cc { padding: 0; background: none; border-radius: 0; font-size: 12.5px; color: var(--lv-navy); }
  .ldls__chart .lsv .h .cc .lv-chi { font-weight: 700; }
  .ldls__chart .lsv .h .cn { flex: 1; text-align: center; color: var(--lv-navy); font-size: 12.5px; letter-spacing: 0; }
  .ldls__chart .lsv .h .th {
    order: 3;
    padding: 0;
    background: none;
    border-radius: 0;
    color: var(--lv-red);
    font-size: 12.5px;
    letter-spacing: 0;
  }
  .ldls__chart .lsv .h .dh {
    order: 4;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    color: var(--lv-ink);
    font-size: 12.5px;
    font-weight: 700;
  }
  .ldls__chart .lsv .lv-chi.lv-hoa { color: var(--lv-hoa); } .ldls__chart .lsv .lv-chi.lv-moc { color: var(--lv-moc); }
  .ldls__chart .lsv .lv-chi.lv-tho { color: var(--lv-tho); } .ldls__chart .lsv .lv-chi.lv-kim { color: var(--lv-kim); }
  .ldls__chart .lsv .lv-chi.lv-thuy { color: var(--lv-thuy); }

  /* chính tinh */
  .ldls__chart .lsv .ct {
    margin: 9px 0 10px;
    text-align: center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
  }
  .ldls__chart .lsv .ct:empty { min-height: 20px; }

  /* phụ tinh */
  .ldls__chart .lsv .cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .ldls__chart .lsv .cols > div > div { white-space: nowrap; }
  .ldls__chart .lsv .lv-hoa { color: var(--lv-hoa); }
  .ldls__chart .lsv .lv-moc { color: var(--lv-moc); }
  .ldls__chart .lsv .lv-tho { color: var(--lv-tho); }
  .ldls__chart .lsv .lv-kim { color: var(--lv-kim); }
  .ldls__chart .lsv .lv-thuy { color: var(--lv-thuy); }
  .ldls__chart .lsv .lv-phu { color: var(--lv-phu); }
  .ldls__chart .lsv .lv-dam { font-weight: 700; }

  /* chân ô */
  .ldls__chart .lsv .f {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0;
    border: 0;
    font-size: 11.5px;
    color: var(--lv-ink);
  }
  .ldls__chart .lsv .f b { font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ls-sun-deep); }

  /* Tuần / Triệt */
  .ldls__chart .lsv .tt {
    z-index: 3;
    padding: 1px 14px;
    border-radius: 0;
    background: var(--ls-forest);
    color: var(--ls-sun);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: none;
    pointer-events: none;
  }

  /* ----- ô giữa ----- */
  .ldls__chart .lsv .center {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--lv-line);
    background: transparent;
    color: var(--lv-ink);
    font-size: 14px;
  }
  .ldls__chart .lsv .lv-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
  .ldls__chart .lsv .lv-lines line { stroke: rgba(201, 120, 10, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .ldls__chart .lsv .lv-lines line.lv-x { stroke-dasharray: 5 5; stroke: rgba(29, 74, 58, 0.4); }
  .ldls__chart .lsv .lv-wm {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62%;
    transform: translate(-50%, -50%);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
  }
  .ldls__chart .lsv .lv-mid {
    position: relative;
    z-index: 1;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 160px;
    grid-template-rows: 1fr auto;
    column-gap: 10px;
    padding: 18px 20px 14px 22px;
  }
  .ldls__chart .lsv .center table { width: 100%; border-collapse: collapse; align-self: start; }
  .ldls__chart .lsv .center td { padding: 2px 10px 2px 0; vertical-align: top; border: 0; font-size: 14px; line-height: 1.4; }
  .ldls__chart .lsv .center .k { width: 24%; color: rgba(29, 74, 58, 0.6); font-size: 14px; letter-spacing: 0; white-space: nowrap; }
  .ldls__chart .lsv .center .v { color: var(--lv-navy); }
  .ldls__chart .lsv .center .v b { font-family: inherit; font-size: 14px; font-weight: 400; color: var(--lv-navy); }
  .ldls__chart .lsv .center tr.lv-gap td { height: 12px; padding: 0; border: 0; }

  .ldls__chart .lsv .lv-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
    text-align: center;
  }
  .ldls__chart .lsv .lv-logo { width: 118px; height: 118px; object-fit: contain; }
  .ldls__chart .lsv .lv-brand {
    font-family: var(--ls-heading);
    font-size: 27px;
    line-height: 1.05;
    color: var(--ls-forest);
  }
  .ldls__chart .lsv .lv-brand small {
    display: block;
    margin-top: 5px;
    font-family: var(--ls-para);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ls-sun-deep);
  }
  .ldls__chart .lsv .lv-seal {
    padding: 3px 6px;
    border: 1.5px solid var(--lv-red);
    border-radius: 3px;
    color: var(--lv-red);
    font-family: var(--ls-para);
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 0.06em;
  }
  .ldls__chart .lsv .lv-qr { width: 88px; height: 88px; padding: 4px; background: #fff; }
  .ldls__chart .lsv .lv-qr path { fill: #1d4a3a; }
  .ldls__chart .lsv .lv-qr-cap { margin-top: -6px; font-size: 10px; color: rgba(29, 74, 58, 0.65); }
  .ldls__chart .lsv .lv-lh {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(176, 132, 52, 0.35);
    color: var(--ls-sun-deep);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
  }
  .ldls__chart .lsv .lv-lh span { display: block; }

  /* ----- chú giải ----- */
  .ldls__legend {
    margin-top: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.2rem;
    font-size: 0.78rem;
    color: rgba(29, 74, 58, 0.75);
  }
  .ldls__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
  .ldls__legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
  .ldls__legend .lg-hoa { background: #c0392b; } .ldls__legend .lg-moc { background: #2f7d4a; }
  .ldls__legend .lg-tho { background: #c9780a; } .ldls__legend .lg-kim { background: #7b8089; }
  .ldls__legend .lg-thuy { background: #1b2a24; }
  .ldls__legend b { font-weight: 600; color: var(--ls-forest); }
  .ldls__luan-body {
    margin-top: 0.9rem;
    padding: 1.4rem 1.6rem;
    background: var(--ls-card);
    border: 1px solid var(--ls-line);
    border-left: 3px solid var(--ls-sun);
    border-radius: 16px;
    font-family: var(--ls-para);
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(29, 74, 58, 0.92);
  }
  .ldls__luan-body p + p { margin-top: 0.8rem; }
  .ldls__luan-body b { font-family: var(--ls-sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ls-sun-deep); }
  .ldls__luan-body .ldls__luan-end {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--ls-line);
    font-family: var(--ls-sans);
    font-size: 0.86rem;
    line-height: 1.6;
    font-style: italic;
    color: rgba(29, 74, 58, 0.7);
  }
  @media (max-width: 600px) { .ldls__luan-body { padding: 1.1rem 1.1rem; font-size: 0.96rem; } }
  .ldls__hint { margin-top: 0.4rem; font-size: 0.78rem; color: rgba(29, 74, 58, 0.6); }
  /* Màn hẹp: lá số thu nhỏ vừa khung (JS đặt zoom); bấm "Phóng to" để xem cỡ thật và vuốt ngang */
  .ldls__chart-wrap.is-fit { overflow: hidden; }
  .ldls__fit { margin-top: 0.7rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
  .ldls__fit[hidden] { display: none !important; }
  .ldls .ldls__fit .ldls__btn { padding: 0.55rem 1rem; font-size: 0.82rem; }
  .ldls__swipe { font-size: 0.78rem; color: rgba(29, 74, 58, 0.6); }
  .ldls__swipe[hidden] { display: none; }

  .ldls__tools { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .ldls .ldls__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(29, 74, 58, 0.3);
    background: transparent;
    color: var(--ls-forest);
    font-family: var(--ls-sans);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .ldls .ldls__btn:hover { background: rgba(29, 74, 58, 0.06); }
  .ldls .ldls__btn--fill { background: var(--ls-forest); border-color: var(--ls-forest); color: #faf6ea; }
  .ldls .ldls__btn--fill:hover { background: var(--ls-forest-soft); }
  .ldls__btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* ----- Mời luận giải ----- */
  .ldls__cta {
    margin-top: 2.5rem;
    padding: 1.6rem 1.4rem;
    border-radius: 20px;
    background: var(--ls-forest);
    color: #f3ead6;
    display: grid;
    gap: 1rem;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .ldls__cta::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 162, 27, 0.35), rgba(242, 162, 27, 0) 70%);
    pointer-events: none;
  }
  .ldls__cta p:first-child { font-family: var(--ls-para); font-size: 1.35rem; line-height: 1.35; color: #fbf4e4; }
  .ldls__cta p + p { margin-top: 0.4rem; font-size: 0.9rem; line-height: 1.6; color: rgba(243, 234, 214, 0.8); }
  .ldls .ldls__cta .ldls__btn { position: relative; z-index: 1; background: var(--ls-sun); border-color: var(--ls-sun); color: var(--ls-forest); }
  .ldls .ldls__cta .ldls__btn:hover { background: #ffb53a; }
  @media (min-width: 760px) {
    .ldls__cta { grid-template-columns: 1fr auto; padding: 1.8rem 2rem; }
  }

  /* ----- Trạng thái chờ / lỗi ----- */
  .ldls__state {
    margin-top: 2rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--ls-card);
    border: 1px solid var(--ls-line);
    border-radius: 20px;
  }
  .ldls__state p { margin-top: 0.8rem; font-family: var(--ls-para); font-size: 1.05rem; color: rgba(29, 74, 58, 0.85); }
  .ldls__state .ldls__btn { margin-top: 1.2rem; }
  .ldls__spin {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid rgba(201, 120, 10, 0.2);
    border-top-color: var(--ls-sun);
    animation: ls-spin 1s linear infinite;
  }
  @keyframes ls-spin { to { transform: rotate(360deg); } }
  .ldls [hidden], .ldls[hidden] { display: none !important; }
  .ldls { scroll-margin-top: var(--ldls-offset, 80px); }

  @media print {
    body * { visibility: hidden; }
    .ldls, .ldls * { visibility: visible; }
    .ldls { position: absolute; left: 0; top: 0; width: 100%; background: #fff; }
    .ldls__inner { padding: 0; max-width: none; }
    .ldls__tools, .ldls__cta, .ldls__swipe, .ldls__fit { display: none !important; }
    .ldls__chart { zoom: 1 !important; }
    .ldls__chart-wrap { overflow: visible; box-shadow: none; border: 0; padding: 0; }
    .ldls__chart { min-width: 0; }
    .ldls__chart .lsv, .ldls__chart .lsv * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ldls__chart .lsv .c.lv-th, .ldls__chart .lsv .c.lv-on, .ldls__chart .lsv .c.lv-xung { background: transparent; }
    .ldls__hint { display: none; }
  }