/* ==========================================================================
   Giờ mặt trời (/mat-troi/) — mọc/lặn, giờ vàng, Điểm ráng, Trời đêm
   Tiền tố mt- để không đụng style cũ. Màu nhãn điểm: Rực rỡ → Khó.
   ========================================================================== */

.mt-main { min-height: calc(100vh - 200px); padding: 20px 0 48px; background: #fbf7f1; color: #1f2937; }
.mt-container { max-width: 860px; margin: 0 auto; padding: 0 16px; }

.mt-breadcrumb { margin-bottom: 14px; font-size: 13px; color: #6b7280; }
.mt-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.mt-breadcrumb li { display: flex; align-items: center; }
.mt-breadcrumb li + li::before { content: '›'; margin: 0 8px; color: #d1d5db; }
.mt-breadcrumb a { color: #4b5563; }
.mt-breadcrumb a:hover { color: #c2410c; text-decoration: underline; }
.mt-breadcrumb [aria-current="page"] { color: #111827; font-weight: 500; }

.mt-h1 { font-size: 28px; line-height: 1.25; font-weight: 800; color: #111827; margin-bottom: 8px; }
.mt-intro { font-size: 15px; line-height: 1.7; color: #4b5563; margin-bottom: 18px; }
.mt-intro strong { color: #111827; }

#mt-homnay { scroll-margin-top: 72px; }
.mt-the { background: #fff; border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.07); margin-bottom: 20px; overflow: hidden; }
.mt-khoi { margin-bottom: 8px; }
.mt-khoi > h2, .mt-h2 { font-size: 20px; font-weight: 800; color: #111827; margin: 26px 0 8px; }
.mt-giaithich { font-size: 14px; line-height: 1.65; color: #4b5563; margin-bottom: 12px; }
.mt-cho { font-size: 14px; color: #6b7280; padding: 14px 0; }

/* ---------- Tìm địa điểm (trang công cụ) ---------- */
.mt-tim-khung { background: #fff; border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 14px; margin-bottom: 16px; }
.mt-tim-hang { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-tim-o { position: relative; flex: 1 1 220px; min-width: 0; }
.mt-tim-o input { width: 100%; font: inherit; font-size: 16px; padding: 11px 14px; border: 1.5px solid #e5d9c8; border-radius: 12px; background: #fffdf9; color: #111827; }
.mt-tim-o input:focus { outline: none; border-color: #ea580c; box-shadow: 0 0 0 3px rgba(234,88,12,.15); }
.mt-tim-kq { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #eee3d3; border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.12); list-style: none; max-height: 340px; overflow-y: auto; }
.mt-tim-kq li { padding: 10px 14px; cursor: pointer; font-size: 15px; color: #111827; border-bottom: 1px solid #f5efe6; }
.mt-tim-kq li:last-child { border-bottom: 0; }
.mt-tim-kq li small { display: block; font-size: 12px; color: #6b7280; }
.mt-tim-kq li[aria-selected="true"], .mt-tim-kq li:hover { background: #fff4e8; }
.mt-tim-kq .mt-kq-trong { cursor: default; color: #6b7280; font-size: 13px; }
.mt-nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 15px; font-weight: 600; padding: 11px 16px; border-radius: 12px; background: #ea580c; color: #fff; white-space: nowrap; }
.mt-nut:hover { background: #c2410c; }
.mt-nut-phu { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #fff1e6; color: #c2410c; border: 1px solid #fed7aa; }
.mt-nut-phu:hover { background: #ffe4cc; }
.mt-gps-bao { font-size: 13px; color: #b45309; margin-top: 8px; min-height: 0; }
.mt-gps-bao:empty { display: none; }
.mt-noi-dang { margin: 6px 0 12px; font-size: 14px; color: #4b5563; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.mt-noi-dang strong { font-size: 18px; color: #111827; }
.mt-noi-dang a { color: #c2410c; font-weight: 600; }
.mt-noi-dang #mt-noi-gps { font-size: 13px; color: #6b7280; }

/* ---------- Thẻ "hôm nay" ---------- */
.mt-chonngay { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 14px; background: #fff; border-bottom: 1px solid #f3ece2; }
.mt-chonngay button.mt-mui { width: 36px; height: 36px; border-radius: 10px; background: #fff4e8; color: #c2410c; font-size: 18px; font-weight: 700; border: 1px solid #fed7aa; }
.mt-chonngay input[type="date"] { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid #e5d9c8; border-radius: 10px; color: #111827; background: #fffdf9; min-width: 0; }
.mt-chonngay .mt-nut-phu { margin-left: auto; }

.mt-hn-dau { padding: 18px 20px 20px; color: #fff; background: linear-gradient(135deg, #1e3a8a 0%, #6d28d9 48%, #f97316 100%); }
.mt-hn-noi { font-size: 22px; font-weight: 800; line-height: 1.2; }
.mt-hn-ngay { font-size: 14px; opacity: .9; margin-top: 2px; }
.mt-hn-lon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.mt-hn-o { background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 12px; }
.mt-hn-o span { display: block; font-size: 13px; opacity: .9; }
.mt-hn-o b { display: block; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.mt-hn-o small { display: block; font-size: 12px; opacity: .88; }

.mt-dai-khung { padding: 14px 20px 4px; }
.mt-dai { position: relative; height: 18px; border-radius: 9px; }
.mt-dai-bay { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: #dc2626; border-radius: 2px; box-shadow: 0 0 0 2px #fff; }
.mt-dai-truc { display: flex; justify-content: space-between; font-size: 11px; color: #9ca3af; margin-top: 3px; }
.mt-chu-giai { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 2px 20px 0; font-size: 11px; color: #6b7280; }
.mt-chu-giai i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

.mt-hn-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 20px 4px; }
.mt-hn-buoi h3 { font-size: 13px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.mt-dong { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; font-size: 14px; }
.mt-dong b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-dong-vang { background: #fff4dc; color: #92400e; }
.mt-dong-xanh { background: #e5edff; color: #1e3a8a; }
.mt-hn-phu { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 20px 16px; font-size: 14px; color: #4b5563; }
.mt-hn-phu b { color: #111827; font-variant-numeric: tabular-nums; }

/* ---------- Bình minh đầu năm ---------- */
.mt-tet { display: flex; gap: 12px; align-items: flex-start; background: #fff7ed; border: 1px solid #fdba74; border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; line-height: 1.6; color: #7c2d12; }
.mt-tet[hidden] { display: none; }
.mt-tet-ky { font-size: 26px; line-height: 1; }

/* ---------- Nhãn và thanh điểm ---------- */
.mt-nhan { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mt-nhan-rucro { background: #c2410c; color: #fff; }
.mt-nhan-dep { background: #f97316; color: #fff; }
.mt-nhan-kha { background: #fde68a; color: #78350f; }
.mt-nhan-nhat { background: #e5e7eb; color: #374151; }
.mt-nhan-kho { background: #f3f4f6; color: #6b7280; }
.mt-nhan-qua { background: #f3f4f6; color: #6b7280; font-weight: 600; }
.mt-dem-tuyet { background: #3730a3; color: #fff; }
.mt-dem-tot { background: #4f46e5; color: #fff; }
.mt-dem-kha { background: #c7d2fe; color: #312e81; }
.mt-dem-kem { background: #e5e7eb; color: #374151; }
.mt-dem-kho { background: #f3f4f6; color: #6b7280; }
.mt-thanh { height: 6px; background: #f3ece2; border-radius: 3px; margin: 8px 0 6px; overflow: hidden; }
.mt-thanh i { display: block; height: 100%; border-radius: 3px; }
.mt-thanh-rucro { background: #c2410c; } .mt-thanh-dep { background: #f97316; } .mt-thanh-kha { background: #f59e0b; }
.mt-thanh-nhat { background: #9ca3af; } .mt-thanh-kho { background: #d1d5db; }

/* ---------- Thẻ 3 ngày (Điểm ráng, Trời đêm) ---------- */
.mt-luoi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mt-the-nho { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 12px 14px; min-width: 0; }
.mt-the-nho h3 { font-size: 15px; font-weight: 800; color: #111827; margin-bottom: 6px; }
.mt-buoi { padding: 8px 0; border-top: 1px solid #f3ece2; }
.mt-buoi-dau { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-buoi-ten { font-size: 14px; color: #374151; }
.mt-buoi-ten b { color: #111827; font-variant-numeric: tabular-nums; }
.mt-buoi-qua .mt-buoi-ten { color: #9ca3af; }
.mt-buoi-phu { font-size: 12px; color: #6b7280; margin-top: 4px; }
.mt-lydo { list-style: none; margin: 4px 0 0; }
.mt-lydo li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5; color: #4b5563; }
.mt-lydo li::before { content: '•'; position: absolute; left: 3px; color: #f59e0b; }
.mt-dem-dau { margin: 2px 0 4px; }
.mt-dem-ct { margin-top: 8px; display: grid; gap: 6px; }
.mt-dem-ct div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; font-size: 13px; }
.mt-dem-ct dt { color: #6b7280; }
.mt-dem-ct dd { color: #111827; font-variant-numeric: tabular-nums; }

/* ---------- Dải mây 3 tầng ---------- */
.mt-may { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 12px 14px 10px; margin-bottom: 12px; }
.mt-may-tieude { font-size: 15px; font-weight: 800; color: #111827; margin-bottom: 4px; }
.mt-may-khung { display: flex; gap: 6px; }
.mt-may-nhan { flex: 0 0 34px; display: flex; flex-direction: column; padding-top: 16px; }
.mt-may-nhan span { height: 16px; margin-bottom: 2px; font-size: 11px; line-height: 16px; color: #6b7280; }
.mt-may-luoi { flex: 1; min-width: 0; position: relative; }
.mt-may-moc-hang { position: relative; height: 16px; }
.mt-may-moc { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 800; color: #ea580c; line-height: 16px; }
.mt-may-o { position: relative; }
.mt-may-hang { display: flex; gap: 1px; height: 16px; margin-bottom: 2px; }
.mt-o { flex: 1; border-radius: 2px; background: #f5f2ec; cursor: pointer; min-width: 0; }
.mt-o-trong { background: repeating-linear-gradient(45deg, #f3f4f6 0 3px, #e5e7eb 3px 5px); cursor: default; }
.mt-o-thua { opacity: .75; }
.mt-o-chon { outline: 2px solid #ea580c; outline-offset: -1px; }
.mt-may-vang { position: absolute; top: -2px; bottom: -2px; border: 2px solid #f59e0b; border-radius: 4px; background: rgba(245,158,11,.10); pointer-events: none; }
.mt-may-truc { position: relative; height: 14px; margin-top: 2px; }
.mt-may-truc span { position: absolute; font-size: 10px; color: #9ca3af; transform: translateX(-2px); }
.mt-may-ct { font-size: 13px; color: #4b5563; margin-top: 6px; min-height: 20px; }
.mt-may-ct b { color: #111827; }
.mt-may-chu { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: #6b7280; margin: -4px 0 10px; }
.mt-may-chu i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* ---------- Ghi nguồn, tải app ---------- */
.mt-nguon { font-size: 12px; color: #6b7280; margin: 6px 0 18px; line-height: 1.6; }
.mt-nguon a { color: #c2410c; text-decoration: underline; }
.mt-app { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, #065f46, #047857); color: #fff; border-radius: 16px; padding: 16px 18px; margin: 22px 0; }
.mt-app img.mt-app-icon { width: 56px; height: 56px; border-radius: 14px; flex: 0 0 auto; background: #fff; padding: 6px; }
.mt-app-chu { flex: 1 1 220px; }
.mt-app-chu b { display: block; font-size: 17px; }
.mt-app-chu span { font-size: 14px; opacity: .9; }
.mt-app-nut { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-app-nut img { height: 40px; width: auto; display: block; }

/* ---------- Bảng ---------- */
.mt-bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.mt-bang { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mt-bang th, .mt-bang td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #f3ece2; white-space: nowrap; }
.mt-bang th { font-size: 12px; color: #6b7280; font-weight: 700; background: #fffaf3; }
.mt-bang td small { display: block; font-size: 11px; color: #9ca3af; white-space: normal; }
.mt-bang tr:last-child td { border-bottom: 0; }
.mt-bang a { color: #c2410c; font-weight: 600; }
.mt-phu-bang { font-size: 13px; color: #6b7280; margin: 6px 0 0; }

/* ---------- Câu hỏi, liên kết ---------- */
.mt-hoi { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 4px 16px; }
.mt-hoi details { border-bottom: 1px solid #f3ece2; padding: 10px 0; }
.mt-hoi details:last-child { border-bottom: 0; }
.mt-hoi summary { cursor: pointer; font-weight: 700; color: #111827; font-size: 15px; }
.mt-hoi p { font-size: 14px; line-height: 1.7; color: #4b5563; margin-top: 6px; }
.mt-lienket h3 { font-size: 14px; font-weight: 700; color: #6b7280; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .4px; }
.mt-lienket ul { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-lienket a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #eee3d3; font-size: 14px; color: #374151; }
.mt-lienket a:hover, .mt-lienket a[aria-current="page"] { border-color: #f97316; color: #c2410c; }

/* ---------- Thẻ công cụ chụp ảnh ---------- */
.mt-congcu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mt-congcu-the { display: grid; grid-template-columns: 36px 1fr; gap: 2px 10px; background: #fff; border: 1px solid #eee3d3; border-radius: 14px; padding: 12px 14px; color: #374151; }
.mt-congcu-the:hover { border-color: #f97316; }
.mt-congcu-ky { grid-row: span 2; font-size: 26px; line-height: 1.2; }
.mt-congcu-the b { color: #111827; font-size: 15px; }
.mt-congcu-the span:last-child { font-size: 13px; color: #6b7280; line-height: 1.45; }

/* ---------- Bản đồ (/mat-troi/ban-do/, /mat-troi/ke-hoach-chup/) ---------- */
.bd-dieukhien { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 4px 0 10px; }
.bd-ngay, .bd-buoi { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bd-ngay::-webkit-scrollbar, .bd-buoi::-webkit-scrollbar { display: none; }
.bd-ngay button, .bd-buoi button { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 10px; background: #fff; color: #374151; border: 1px solid #eee3d3; line-height: 1.2; }
.bd-ngay button small { display: block; font-size: 11px; font-weight: 500; color: #6b7280; }
.bd-ngay button[aria-pressed="true"], .bd-buoi button[aria-pressed="true"] { background: #ea580c; color: #fff; border-color: #ea580c; }
.bd-ngay button[aria-pressed="true"] small { color: #ffe4cc; }
.bd-buoi button[hidden] { display: none; }
.bd-lop { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: #374151; }
.bd-lop label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bd-lop label[hidden] { display: none; }
.bd-khung { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.1); background: #e8ece6; }
.bd-map { width: 100%; height: min(68vh, 640px); min-height: 380px; }
.bd-duoi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: #4b5563; }
.bd-chugiai { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.bd-chugiai i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; }
.bd-tt { color: #6b7280; }
.bd-chon { background: #fff; border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 14px 16px; margin: 6px 0 14px; }
.bd-chon[hidden] { display: none; }
.bd-chon-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bd-chon-dau b { font-size: 17px; color: #111827; }
.bd-chon-dau small { display: block; font-size: 12px; color: #6b7280; }
.bd-dong { width: 32px; height: 32px; border-radius: 50%; background: #f3f4f6; color: #374151; font-size: 14px; flex: 0 0 auto; }
.bd-chon-diem { margin: 8px 0 2px; font-size: 14px; color: #374151; }
.bd-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #f3f4f6; color: #374151; white-space: nowrap; }
.bd-tia-ngay { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 6px; font-size: 14px; color: #4b5563; }
.bd-tia-ngay input { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid #e5d9c8; border-radius: 10px; }
.bd-tia-ngay .mt-mui, .kh-ngay .mt-mui { width: 32px; height: 32px; border-radius: 10px; background: #fff4e8; color: #c2410c; font-size: 18px; font-weight: 700; border: 1px solid #fed7aa; }
.bd-tia-ds { list-style: none; display: grid; gap: 4px; font-size: 14px; color: #374151; }
.bd-tia-ds i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; margin-right: 8px; vertical-align: 3px; }
.bd-tia-ds b { font-variant-numeric: tabular-nums; }
.bd-tia-ds small { color: #9ca3af; }
.bd-tia-phu { color: #6b7280; font-size: 13px; padding-left: 24px; }
.bd-hanh-dong { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.bd-gan, .bd-toi { border-top: 1px solid #f3ece2; margin-top: 12px; padding-top: 12px; }
.bd-gan-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.bd-gan-dau b { font-size: 15px; color: #111827; }
.bd-gan-dau select { font: inherit; font-size: 14px; padding: 4px 6px; border-radius: 8px; border: 1px solid #e5d9c8; }
.bd-gan-dau .mt-nut { padding: 7px 14px; font-size: 14px; }
.bd-gan-ds { list-style: none; margin-top: 8px; display: grid; gap: 6px; }
.bd-gan-ds button { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; text-align: left; font: inherit; padding: 8px 10px; border-radius: 12px; background: #fffaf3; border: 1px solid #f3e8d8; color: #374151; }
.bd-gan-ds button:hover { border-color: #f97316; }
.bd-gan-ds b { display: block; font-size: 14px; color: #111827; }
.bd-gan-ds small { font-size: 12px; color: #6b7280; }
.bd-so { width: 24px; height: 24px; border-radius: 50%; background: #be123c; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.bd-moi-app { font-size: 13px; color: #6b7280; margin-top: 8px; }
.bd-moi-app a, .bd-pop a { color: #c2410c; font-weight: 600; }
.bd-toi-so { font-size: 14px; color: #374151; margin-top: 8px; }
.bd-toi-so small, .bd-toi-phu { color: #6b7280; font-size: 12px; }
.bd-toi-ds { list-style: none; display: grid; gap: 4px; margin-top: 4px; }
.bd-toi-ds button { font: inherit; font-size: 13px; color: #4338ca; text-align: left; padding: 2px 0; }
.bd-pop { font-size: 13px; line-height: 1.5; color: #374151; }
.bd-pop b { font-size: 14px; color: #111827; }
.bd-pop-loai, .dc-loai { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.bd-pop-loai span, .dc-loai span { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #ecfdf5; color: #047857; }
.bd-pop-nut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.bd-pop-nut button { font: inherit; font-size: 12px; font-weight: 600; color: #374151; background: #f3f4f6; padding: 3px 8px; border-radius: 8px; }
.maplibregl-popup-content { border-radius: 12px; padding: 10px 12px; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* Kế hoạch chụp */
.kh-noi { margin: 4px 0 8px; font-size: 14px; color: #4b5563; }
.kh-noi b { font-size: 17px; color: #111827; margin-right: 6px; }
.kh-dieu { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 10px 14px; margin-bottom: 10px; display: grid; gap: 8px; }
.kh-ngay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kh-ngay input { font: inherit; font-size: 15px; padding: 5px 8px; border: 1px solid #e5d9c8; border-radius: 10px; }
.kh-khung { font-size: 12px; color: #6b7280; }
.kh-gio { display: flex; align-items: center; gap: 10px; }
.kh-gio label { font-size: 14px; color: #4b5563; }
.kh-gio input[type="range"] { flex: 1; min-width: 0; accent-color: #ea580c; height: 28px; }
.kh-gio output { font-size: 20px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; min-width: 56px; }
.kh-map { height: min(52vh, 480px); min-height: 300px; }
.kh-chugiai { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: #4b5563; margin: 8px 0; }
.kh-chugiai i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.kh-bieudo { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 6px; margin-bottom: 10px; cursor: crosshair; }
.kh-bieudo svg { display: block; width: 100%; height: auto; }
.kh-bieudo text { font-size: 11px; fill: #4b5563; font-family: inherit; }
.kh-luc { font-size: 15px; color: #374151; margin: 6px 0 8px; }
.kh-luc b { font-size: 18px; color: #111827; }
.kh-bang th i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.kh-bang th small { font-weight: 500; color: #6b7280; }
.kh-bang tbody th { text-align: left; font-size: 14px; color: #111827; background: none; font-weight: 700; }
.kh-duoi { color: #9ca3af; }
.kh-tom { list-style: none; margin: 10px 0 18px; display: grid; gap: 4px; font-size: 14px; color: #4b5563; }
.kh-tom b { color: #111827; }

/* Điểm chụp */
.dc-the { background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.07); padding: 12px 16px; margin-bottom: 16px; }
.dc-tt { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; margin: 6px 0 2px; }
.dc-tt div { font-size: 14px; }
.dc-tt dt { font-size: 12px; color: #6b7280; }
.dc-tt dd { color: #111827; font-weight: 600; }
.dc-tt a { color: #c2410c; }
.dc-loc { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.dc-loc button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #eee3d3; color: #374151; }
.dc-loc button[aria-pressed="true"] { background: #0f766e; border-color: #0f766e; color: #fff; }
.dc-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dc-luoi[hidden], .mt-h2[hidden], .dc-o[hidden] { display: none; }
.dc-o { display: block; background: #fff; border: 1px solid #eee3d3; border-radius: 14px; padding: 12px 14px; color: #374151; }
.dc-o:hover { border-color: #0f766e; }
.dc-o b { display: block; color: #111827; font-size: 15px; }
.dc-o small { display: block; color: #6b7280; font-size: 12px; }
.dc-mua { display: block; font-size: 12px; color: #92400e; margin-top: 2px; }

@media (max-width: 760px) {
  .mt-luoi3 { grid-template-columns: 1fr; }
}
/* Menu ☰: style.css ẩn .nav dưới 768px; bấm nút thì mở cột menu như trang chủ. */
@media (max-width: 768px) {
  .nav.mt-nav-mo { display: flex; flex-direction: column; position: absolute; top: 60px; right: 0; background: var(--green-dark); padding: 8px; border-radius: 0 0 8px 8px; z-index: 200; }
}
@media (max-width: 560px) {
  .mt-h1 { font-size: 22px; }
  .mt-hn-dau { padding: 14px 14px 16px; }
  .mt-hn-o b { font-size: 28px; }
  .mt-dai-khung, .mt-hn-phu { padding-left: 14px; padding-right: 14px; }
  .mt-chu-giai { padding-left: 14px; padding-right: 14px; }
  .mt-hn-luoi { grid-template-columns: 1fr; padding: 10px 14px 0; gap: 4px; }
  .mt-may { padding: 10px 10px 8px; }
  .mt-may-nhan { flex-basis: 30px; }
  .mt-dem-ct div { grid-template-columns: 100px 1fr; }
  .mt-bang th, .mt-bang td { padding: 7px 8px; font-size: 13px; }
  .mt-bang-thang th:nth-child(5), .mt-bang-thang td:nth-child(5) { display: none; }
}

/* ---------- Lịch trăng rằm, lịch thiên văn ---------- */
.tr-dieu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 6px; font-size: 14px; color: #374151; }
.tr-chon select { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid #e5d9c8; border-radius: 10px; background: #fff; margin-left: 4px; }
.tr-nam { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-nam a, .tr-nam b { padding: 4px 12px; border-radius: 999px; border: 1px solid #eee3d3; background: #fff; font-size: 14px; }
.tr-nam a { color: #c2410c; }
.tr-nam b { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.tr-the-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tr-the { display: grid; gap: 2px; background: linear-gradient(135deg, #1e293b, #312e81); color: #e0e7ff; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.tr-the b { color: #fff; font-size: 15px; }
.tr-the strong { color: #fde68a; }
.tr-the a { color: #c7d2fe; text-decoration: underline; font-size: 12px; margin-top: 4px; }
.tr-le { font-size: 12px; font-weight: 700; color: #fcd34d; text-transform: uppercase; letter-spacing: .4px; }
.tr-bang td small { display: block; }
.tr-bang a { font-variant-numeric: tabular-nums; }
.tr-noi td { background: #fffaf0; }
.tv-ds { list-style: none; display: grid; gap: 8px; }
.tv-ds li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 10px 14px; }
.tv-ds li[hidden] { display: none; }
.tv-ky { font-size: 24px; line-height: 1.2; }
.tv-ds b { color: #111827; font-size: 15px; }
.tv-ngay { display: block; font-size: 13px; color: #4b5563; }
.tv-ngay small { color: #9ca3af; }
.tv-ds p { font-size: 14px; color: #4b5563; line-height: 1.6; margin-top: 2px; }
.tv-ds p a { color: #c2410c; font-weight: 600; }
.tv-noi { border-left: 4px solid #f97316; }
.tv-trangNon, .tv-trangTron { background: #fbfaf7 !important; }
.tv-luc-dung { font-size: 12px; font-weight: 500; color: #9ca3af; }
@media (max-width: 560px) {
  .tr-bang th:nth-child(5), .tr-bang td:nth-child(5) { display: none; }
  .tv-ds li { grid-template-columns: 28px 1fr; padding: 10px 12px; }
}
.bd-loi { padding: 40px 20px; text-align: center; color: #6b7280; font-size: 14px; }

/* Bảng hẹp: cho chữ xuống dòng thay vì cuộn ngang */
.kh-bang td small { display: block; font-size: 11px; color: #6b7280; }
.tr-bang td:nth-child(4), .tr-bang td:nth-child(6) { white-space: normal; min-width: 88px; }
@media (max-width: 560px) {
  .kh-bang th, .kh-bang td { padding: 7px 6px; }
  .tr-bang th:nth-child(6), .tr-bang td:nth-child(6) { min-width: 110px; }
}

/* Phiếu "Chiều nay ráng thế nào?", nơi đã lưu, số liệu sau điểm */
.mt-phieu { background: #fff7ed; border: 1px solid #fdba74; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; color: #7c2d12; }
.mt-phieu[hidden] { display: none; }
.mt-phieu small { display: block; color: #9a3412; font-size: 12px; margin-top: 2px; }
.mt-phieu-nut { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mt-phieu-nut button { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #fdba74; color: #9a3412; }
.mt-phieu-nut button:hover { background: #ffedd5; }
.mt-phieu-nut .mt-phieu-sau { background: none; border-color: transparent; color: #9ca3af; font-weight: 500; }
.mt-da-luu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: #6b7280; }
.mt-da-luu[hidden] { display: none; }
.mt-luu-o { display: inline-flex; border: 1px solid #eee3d3; border-radius: 999px; overflow: hidden; background: #fff; }
.mt-luu-o button { font: inherit; font-size: 13px; padding: 4px 10px; color: #374151; }
.mt-luu-o button + button { padding: 4px 8px; color: #9ca3af; border-left: 1px solid #f3ece2; }
#mt-luu[hidden] { display: none; }
#mt-luu[aria-pressed="true"] { background: #fff1e6; color: #c2410c; }
.mt-buoi-so { font-size: 12px; color: #6b7280; margin-top: 4px; }