/* ═════════════════════════════════════════════════════════════
   LỊCH NGÀY TỐT 2026 — bản mới 10/07/2026 (thay hẳn bản 2019)
   Brand LIUGEMS: kem #FFFCF8 · mực #4A323E · hồng #C2566B
   Chuẩn: hệ 8px · bo 16/12 · bóng nhẹ · 1 màu nhấn
   ═════════════════════════════════════════════════════════════ */

.lm-main{background:#FFFCF8;color:#4A323E;font-family:'Helvetica Neue',Arial,'Avenir Next',sans-serif;}
.lm-main *,.lm-main *::before,.lm-main *::after{box-sizing:border-box;}
.lm-wrap{max-width:1080px;margin:0 auto;padding:0 16px;}

/* ── HERO ── */
.lm-hero{background:linear-gradient(135deg,#FFFCF8 0%,#FFF1EA 55%,#FFE6DE 100%);padding:112px 0 40px;text-align:center;}
.lm-hero h1{font-size:34px;font-weight:800;color:#4A323E;margin:0 0 8px;}
.lm-hero p{font-size:16px;color:#6E5560;max-width:620px;margin:0 auto;line-height:1.55;}

.lm-body{padding:24px 16px 48px;display:flex;flex-direction:column;gap:16px;}

/* ── CARD chung ── */
.lm-card{background:#FFFFFF;border:1px solid #F3E1DA;border-radius:16px;padding:24px;box-shadow:0 4px 16px rgba(74,50,62,.06);}
.lm-h2{font-size:17px;font-weight:700;color:#4A323E;margin:0 0 16px;}

/* ── TÌM NGÀY ── */
.lm-tim-hang{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.lm-tim-o{flex:1 1 220px;display:flex;flex-direction:column;gap:6px;}
.lm-tim-o label{font-size:13.5px;font-weight:600;color:#8A6F7B;}
.lm-tim-o select,.lm-tim-o input{height:48px;border:1px solid #EAD9D2;border-radius:12px;padding:0 12px;font-size:15.5px;color:#4A323E;background:#FFFCF8;width:100%;}
/* 21/8/2026 đợt 2 (Huệ) — ô năm sinh + kết quả lọc theo tuổi */
.lm-tim-ghichu{font-size:12.5px;color:#8A6F7B;}
.lm-chip-ngay .lm-hop-tuoi{font-size:12px;color:#2b8049;font-weight:700;font-style:normal;}
.lm-tranh-tuoi{margin-top:12px;padding-top:10px;border-top:1px dashed #F3D9CE;}
.lm-tranh-tuoi-nhan{font-size:13.5px;color:#8A6F7B;margin:0 0 8px;}
.lm-chip-ngay.lm-chip-mo{background:#F6F0F2;border-color:#E8DCE1;opacity:.78;}
.lm-chip-ngay.lm-chip-mo b{color:#8A6F7B;}
.lm-tim-tk{font-size:12.5px;color:#8A6F7B;margin:10px 0 0;}
.lm-btn-chinh{height:48px;padding:0 28px;border:0;border-radius:12px;font-size:15.5px;font-weight:700;color:#FFF;cursor:pointer;background:linear-gradient(92deg,#7B4FA6,#B5459A 55%,#C2566B);transition:transform .15s ease,box-shadow .15s ease;}
.lm-btn-chinh:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(194,86,107,.35);}
.lm-tim-kq{margin-top:16px;padding-top:16px;border-top:1px solid #F7EAE4;}
.lm-tim-kq-nhan{font-size:14px;color:#6E5560;margin:0 0 10px;}
.lm-tim-chips{display:flex;flex-wrap:wrap;gap:8px;}
.lm-chip-ngay{display:inline-flex;flex-direction:column;align-items:center;min-width:64px;padding:8px 12px;border-radius:12px;background:#FFF1EA;border:1px solid #F3D9CE;cursor:pointer;transition:all .15s ease;}
.lm-chip-ngay:hover{background:#FFE6DE;transform:translateY(-1px);}
.lm-chip-ngay b{font-size:17px;color:#C2566B;}
.lm-chip-ngay span{font-size:12px;color:#8A6F7B;}
.lm-tim-trong{font-size:14.5px;color:#6E5560;}
.lm-tim-trong a{color:#C2566B;font-weight:600;cursor:pointer;text-decoration:underline;}

/* ── DẢI TUẦN ── */
.lm-tuan{display:flex;align-items:center;gap:8px;padding:16px;}
.lm-tuan-nav{width:44px;height:44px;flex:0 0 44px;border:1px solid #EAD9D2;border-radius:12px;background:#FFFCF8;color:#C2566B;font-size:22px;line-height:1;cursor:pointer;transition:all .15s ease;}
.lm-tuan-nav:hover{background:#FFE6DE;}
.lm-tuan-luoi{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.lm-o-ngay{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 12px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:all .15s ease;min-height:76px;}
.lm-o-ngay:hover{background:#FFF8F2;}
.lm-o-thu{font-size:12px;font-weight:700;color:#8A6F7B;text-transform:uppercase;letter-spacing:.4px;}
.lm-o-thu.lm-cn{color:#C2566B;}
.lm-o-duong{font-size:19px;font-weight:700;color:#4A323E;line-height:1.1;}
.lm-o-am{font-size:12px;color:#B39AA5;}
.lm-o-dau{position:absolute;top:6px;right:8px;font-size:12px;}
.lm-o-ngay.lm-dangchon{background:#FFE6DE;border-color:#C2566B;}
.lm-o-ngay.lm-homnay::after{content:'';position:absolute;bottom:5px;left:50%;margin-left:-3px;width:6px;height:6px;border-radius:50%;background:#C2566B;}
.lm-o-ngay.lm-timthay{background:#FFF1EA;}
.lm-o-ngay.lm-timthay .lm-o-duong{color:#C2566B;}
.lm-o-ngay.lm-ngoainam{opacity:.35;cursor:default;pointer-events:none;}

/* ── TỜ LỊCH ── */
.lm-to{text-align:center;padding:32px 24px;position:relative;background:
    radial-gradient(circle at 12% 18%, rgba(255,230,222,.55) 0 56px, transparent 57px),
    radial-gradient(circle at 88% 14%, rgba(255,241,234,.8) 0 44px, transparent 45px),
    radial-gradient(circle at 90% 82%, rgba(255,230,222,.45) 0 62px, transparent 63px),
    #FFFFFF;}
.lm-to-badge{display:inline-block;padding:6px 16px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.5px;margin-bottom:12px;}
.lm-muc-verygood{background:linear-gradient(92deg,#7B4FA6,#B5459A 55%,#C2566B);color:#FFF;}
.lm-muc-good{background:#FFE6DE;color:#B04A5F;}
.lm-muc-normal{background:#FFF3E6;color:#9A7040;}
.lm-muc-bad{background:#F1ECEE;color:#7A6A72;}
.lm-muc-verybad{background:#5C4A54;color:#FFF;}
.lm-to-thu{font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#8A6F7B;}
.lm-to-so{font-size:104px;font-weight:800;line-height:1.02;margin:2px 0;}
.lm-so-verygood,.lm-so-good{color:#C2566B;}
.lm-so-normal{color:#4A323E;}
.lm-so-bad,.lm-so-verybad{color:#7A6A72;}
.lm-to-thang{font-size:19px;font-weight:700;color:#4A323E;}
.lm-to-am{font-size:15px;color:#8A6F7B;margin:6px 0 14px;}
.lm-to-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.lm-chip{padding:6px 14px;border-radius:999px;background:#FFF8F2;border:1px solid #F3E1DA;font-size:13.5px;color:#6E5560;}
.lm-to-the4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:640px;margin:0 auto;}
.lm-the{background:#FFFCF8;border:1px solid #F3E1DA;border-radius:12px;padding:10px 8px;display:flex;flex-direction:column;gap:2px;}
.lm-the-nhan{font-size:12px;color:#B39AA5;text-transform:uppercase;letter-spacing:.4px;}
.lm-the-gt{font-size:14.5px;font-weight:700;color:#4A323E;}
.lm-the-tot{background:#FFF6EC;border-color:#F0DAB8;}
.lm-the-tot .lm-the-gt{color:#C9822F;}
.lm-the-xau{background:#F5F2F3;}
.lm-the-xau .lm-the-gt{color:#7A6A72;}
.lm-homnay-btn{margin-top:16px;padding:10px 20px;border:1px solid #C2566B;border-radius:12px;background:#FFF;color:#C2566B;font-size:14px;font-weight:600;cursor:pointer;}
.lm-homnay-btn:hover{background:#FFF1EA;}

/* ── LƯỚI 2 CỘT ── */
.lm-luoi2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ── VIỆC NÊN/TRÁNH ── */
.lm-viec-nhom{margin-bottom:16px;}
.lm-viec-nhom:last-child{margin-bottom:0;}
.lm-viec-tieude{font-size:14px;font-weight:700;margin-bottom:10px;}
.lm-viec-tieude.lm-nen{color:#3E7D52;}
.lm-viec-tieude.lm-tranh{color:#8A6F7B;}
.lm-viec-chips{display:flex;flex-wrap:wrap;gap:8px;}
.lm-vchip{display:inline-block;padding:8px 14px;border-radius:999px;font-size:13.5px;line-height:1.3;}
.lm-vchip-nen{background:#EFF7F0;border:1px solid #D3E8D8;color:#2F5E3F;font-weight:600;}
.lm-vchip-tranh{background:#F7F4F5;border:1px solid #EBE3E6;color:#8A7B82;}
.lm-vchip-trong{font-size:14px;color:#8A6F7B;}

/* ── GIỜ TỐT XẤU ── */
.lm-gio-chugiai{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#8A6F7B;margin-bottom:12px;}
.lm-cg{width:12px;height:12px;border-radius:4px;display:inline-block;margin-left:10px;}
.lm-cg:first-child{margin-left:0;}
.lm-cg-tot{background:linear-gradient(180deg,#D97A93,#C2566B);}
.lm-cg-tb{background:#EDD9B8;}
.lm-cg-xau{background:#B7A8B0;}
.lm-gio-bieudo{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:190px;}
.lm-gio-cot{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.lm-gio-bar{width:100%;max-width:26px;border-radius:8px 8px 4px 4px;transition:height .3s ease;}
.lm-bar-5{height:88%;background:linear-gradient(180deg,#D97A93,#C2566B);}
.lm-bar-4{height:64%;background:linear-gradient(180deg,#E6A3B4,#D97A93);}
.lm-bar-3{height:42%;background:#EDD9B8;}
.lm-bar-2{height:30%;background:#CBBFC6;}
.lm-bar-1{height:18%;background:#B7A8B0;}
.lm-gio-chi{font-size:12px;font-weight:700;color:#6E5560;}
.lm-gio-khung{font-size:9.5px;color:#B39AA5;white-space:nowrap;}

/* ── HƯỚNG XUẤT HÀNH ── */
.lm-huong-hang{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.lm-huong-o{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:12px;background:#FFFCF8;border:1px solid #F3E1DA;}
.lm-huong-ten{font-size:13px;font-weight:700;color:#4A323E;text-align:center;}
.lm-huong-gt{font-size:15px;font-weight:800;color:#C2566B;}
.lm-huong-o.lm-huong-xau .lm-huong-gt{color:#7A6A72;}
.lm-laban{width:116px;height:116px;}

/* ── CON GIÁP ── */
.lm-congiap-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.lm-cg-o{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:12px;border:1px solid #F3E1DA;background:#FFFCF8;}
.lm-cg-o.lm-cg-tot2{background:#FFF1EA;border-color:#F3D9CE;}
.lm-cg-o.lm-cg-xau2{background:#F7F4F5;border-color:#EBE3E6;opacity:.85;}
.lm-cg-emoji{font-size:22px;line-height:1.2;}
.lm-cg-ten{font-size:12.5px;font-weight:700;color:#4A323E;}
.lm-cg-sao{font-size:10.5px;color:#C2566B;letter-spacing:1px;}
.lm-cg-sao .lm-sao-mo{color:#E4D2D9;}

/* ── Ý NGHĨA ── */
.lm-ynghia{background:#FFF8F2;}
.lm-ynghia-van{font-size:15px;line-height:1.65;color:#5C4550;}
.lm-ynghia-van p{margin:0 0 10px;}
.lm-ynghia-van p:last-child{margin-bottom:0;}

.lm-note{font-size:12.5px;color:#B39AA5;text-align:center;margin:0;}

/* focus brand (thay viền xanh mặc định) */
.lm-main button:focus-visible,.lm-main select:focus-visible,.lm-o-ngay:focus-visible{outline:2px solid #C2566B;outline-offset:2px;}
.lm-main button:focus:not(:focus-visible){outline:none;}

/* ── LOADING nhẹ khi đổi ngày ── */
.lm-doi .lm-to,.lm-doi #lm-viec-card,.lm-doi #lm-gio-card,.lm-doi #lm-huong-card,.lm-doi #lm-congiap-card,.lm-doi .lm-ynghia{opacity:.55;transition:opacity .2s;}

/* ═══ RESPONSIVE ═══ */
@media only screen and (max-width: 900px){
    .lm-luoi2{grid-template-columns:1fr;}
    .lm-hero h1{font-size:28px;}
    .lm-to-so{font-size:88px;}
}
@media only screen and (max-width: 600px){
    .lm-hero{padding:96px 0 28px;}
    .lm-hero h1{font-size:24px;}
    .lm-hero p{font-size:14.5px;}
    .lm-body{padding:16px 12px 110px;gap:12px;} /* chừa chỗ thanh CTA mobile của site */
    .lm-card{padding:16px;border-radius:14px;}
    .lm-tim-hang{flex-direction:column;align-items:stretch;}
    .lm-tim-o{flex:0 0 auto;} /* bỏ flex-basis 220px kẻo ô cao vống khi xếp dọc */
    .lm-btn-chinh{width:100%;}
    .lm-tuan{padding:10px 8px;gap:4px;}
    .lm-tuan-nav{width:44px;flex-basis:44px;height:64px;border-radius:10px;}
    .lm-tuan-luoi{gap:3px;}
    .lm-o-ngay{min-height:64px;padding:8px 2px 10px;}
    .lm-o-duong{font-size:16px;}
    .lm-o-thu{font-size:12px;}
    .lm-to{padding:24px 12px;}
    .lm-to-so{font-size:72px;}
    .lm-to-the4{grid-template-columns:repeat(2,1fr);}
    .lm-gio-bieudo{height:150px;gap:3px;}
    .lm-gio-khung{display:none;}
    .lm-huong-hang{grid-template-columns:1fr;gap:8px;}
    .lm-huong-o{flex-direction:row;justify-content:flex-start;gap:14px;padding:10px 14px;}
    .lm-laban{width:84px;height:84px;flex:0 0 84px;}
    .lm-congiap-luoi{grid-template-columns:repeat(3,1fr);}
}

/* 21/9/2026 — VÁ «TRANG LỊCH LÒI NGANG 18px TRÊN MÁY 360px» (đo thật: .lm-luoi2 rộng 378px ở khổ 360 và 375 ⟹
   trang vuốt ngang được, mép phải khối Việc + Giờ bị cắt; máy Android 360px rất phổ biến).
   Gốc: cột lưới 1fr KHÔNG chịu co nhỏ hơn chữ bên trong; biểu đồ giờ 12 cột cần 311px > 302px chỗ trống ⟹ kéo cả lưới.
   Cách vá: cho lưới + biểu đồ được co (minmax(0,1fr)); máy ≤400px thu nhãn giờ 10,5px + khe 2px.
   Đo thật sau vá: trang rộng đúng bằng màn ở 360/375/390 · 0 cặp nhãn giờ đè nhau · khe hẹp nhất 2,1px (360) · 3,4px (375).
   THỨ TỰ QUAN TRỌNG: luật chung đứng TRƯỚC luật màn nhỏ, không thì máy nhỏ bị ép về 2 cột. */
.lm-luoi2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.lm-gio-bieudo{grid-template-columns:repeat(12,minmax(0,1fr));}
@media only screen and (max-width: 900px){
    .lm-luoi2{grid-template-columns:minmax(0,1fr);}
}
@media only screen and (max-width: 400px){
    .lm-gio-bieudo{gap:2px;}
    .lm-gio-chi{font-size:10.5px;letter-spacing:-.2px;}
}

/* 21/9/2026 — VÁ «DẢI TUẦN LÒI NGANG trên màn DƯỚI 360px» (iPhone đời đầu 320px · Safari phóng to chữ): đo thật trang rộng 353px ở
   khổ 320 và 340 ⟹ nút «›» lòi ra ngoài, mọi thứ gắn cố định (nút Messenger…) lệch theo. Gốc: 7 cột ngày «1fr» không chịu co nhỏ
   hơn chữ âm lịch «11/8». Vá: cột được co + khe 2px + chữ ô ngày nhỏ lại CHỈ dưới 360px (nút ‹ › giữ 44px cho ngón cái).
   Đo sau vá: trang rộng đúng bằng màn ở 320/340/359 · 0 cặp chữ đè nhau · khe hẹp nhất 4,4px (320). */
.lm-tuan-luoi{grid-template-columns:repeat(7,minmax(0,1fr));}
@media only screen and (max-width: 359px){
    .lm-tuan{gap:3px;padding:10px 6px;}
    .lm-tuan-luoi{gap:2px;}
    .lm-o-ngay{padding:8px 0 10px;}
    .lm-o-thu{font-size:11px;letter-spacing:0;}
    .lm-o-duong{font-size:15px;}
    .lm-o-am{font-size:10.5px;}
}