/* =========================================================== VietTrip — stylesheet Light / dark theme via CSS variables + [data-theme] on Mobile-first, then tablet / desktop layout at 900px. =========================================================== */ /* ---------- Design tokens ---------- */ :root { --brand: #0d9488; --brand-600: #0f766e; --brand-100: #ccfbf1; --accent: #f59e0b; --danger: #e11d48; --ok: #16a34a; --bg: #f6f7f9; --bg-elev: #ffffff; --bg-soft: #eef1f5; --bg-hover: #e7ebf1; --text: #12181f; --text-dim: #5a6673; --line: #dde3ea; --line-soft: #eceff3; --shadow: 0 2px 8px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .08); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .10); --radius: 14px; --radius-sm: 10px; --panel-w: 400px; --topbar-h: 58px; --safe-b: env(safe-area-inset-bottom, 0px); --map-filter: none; color-scheme: light; } html[data-theme="dark"] { --brand: #2dd4bf; --brand-600: #14b8a6; --brand-100: #0b3b36; --accent: #fbbf24; --danger: #fb7185; --ok: #4ade80; --bg: #0b0f14; --bg-elev: #131a22; --bg-soft: #1a222c; --bg-hover: #222c38; --text: #e8eef5; --text-dim: #97a3b1; --line: #263141; --line-soft: #1c2531; --shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); color-scheme: dark; } @media (prefers-color-scheme: dark) { html[data-theme="auto"] { --brand: #2dd4bf; --brand-600: #14b8a6; --brand-100: #0b3b36; --accent: #fbbf24; --danger: #fb7185; --ok: #4ade80; --bg: #0b0f14; --bg-elev: #131a22; --bg-soft: #1a222c; --bg-hover: #222c38; --text: #e8eef5; --text-dim: #97a3b1; --line: #263141; --line-soft: #1c2531; --shadow: 0 2px 8px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45); --shadow-sm: 0 1px 3px rgba(0,0,0,.5); color-scheme: dark; } } /* ---------- Reset ---------- */ * { box-sizing: border-box; } /* thuộc tính hidden phải luôn thắng các quy tắc display bên dưới */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 15px; line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overscroll-behavior: none; } svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } a { color: var(--brand-600); } html[data-theme="dark"] a { color: var(--brand); } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ---------- Top bar ---------- */ .topbar { height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--bg-elev); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1200; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.2px; } .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: #fff; } .brand-mark svg { width: 18px; height: 18px; stroke-width: 2; } .brand-text { font-size: 16px; } @media (max-width: 560px) { .brand-text { display: none; } } @media (max-width: 480px) { #providerPill { display: none; } .topbar { gap: 6px; padding: 0 8px; } } .topbar-search { position: relative; flex: 1; max-width: 520px; } .topbar-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; background: var(--bg-soft); border: 1px solid transparent; border-radius: 999px; transition: border-color .15s, background .15s; } .topbar-search input:focus { background: var(--bg-elev); border-color: var(--brand); outline: none; } .ts-ico { position: absolute; left: 11px; top: 9px; width: 18px; height: 18px; color: var(--text-dim); pointer-events: none; } .suggest-list { position: absolute; top: 44px; left: 0; right: 0; z-index: 1400; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 60vh; overflow: auto; padding: 6px; } .suggest-item { display: flex; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; } .suggest-item:hover, .suggest-item.hl { background: var(--bg-hover); } .suggest-item .si-title { font-weight: 600; font-size: 14px; } .suggest-item .si-sub { font-size: 12px; color: var(--text-dim); } .suggest-empty { padding: 14px; color: var(--text-dim); font-size: 13px; text-align: center; } .topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .icon-btn { width: 38px; height: 38px; display: grid; place-items: center; background: transparent; border: none; border-radius: 10px; cursor: pointer; color: var(--text-dim); } .icon-btn:hover { background: var(--bg-hover); color: var(--text); } .pill { font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 4px 8px; border-radius: 999px; background: var(--brand-100); color: var(--brand-600); } html[data-theme="dark"] .pill { color: var(--brand); } .offline-pill { background: #fee2e2; color: #b91c1c; } html[data-theme="dark"] .offline-pill { background: #3b1416; color: #fca5a5; } /* theme icon swap */ #btnTheme svg { display: none; } html[data-theme="light"] #btnTheme .ico-sun, html[data-theme="dark"] #btnTheme .ico-moon, html[data-theme="auto"] #btnTheme .ico-auto { display: block; } /* ---------- Layout ---------- */ .layout { display: flex; height: calc(100dvh - var(--topbar-h)); } .map-wrap { position: relative; flex: 1; min-width: 0; } #map { position: absolute; inset: 0; background: var(--bg-soft); } /* ---------- Panel ---------- */ .panel { width: var(--panel-w); flex-shrink: 0; background: var(--bg-elev); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .panel-grip { display: none; } .tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--bg-elev); } .tab { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 11.5px; font-weight: 600; } .tab svg { width: 19px; height: 19px; } .tab.active { color: var(--brand-600); } html[data-theme="dark"] .tab.active { color: var(--brand); } .tab.active::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 2.5px; border-radius: 2px; background: currentColor; } .tab .badge { position: absolute; top: 4px; right: calc(50% - 24px); background: var(--accent); color: #14181d; font-style: normal; font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; } .panel-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; padding-bottom: calc(20px + var(--safe-b)); } .tabpane { display: none; } .tabpane.active { display: block; animation: fade .18s ease; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ---------- Form bits ---------- */ .field { margin-bottom: 14px; } .field > label, .field-head label { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; } .field-head { display: flex; align-items: center; justify-content: space-between; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .grid2 > div > label, .grid3 > div > label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 5px; } input[type=text], input[type=password], input[type=number], input[type=time], input[type=date], select { width: 100%; height: 38px; padding: 0 10px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); } input:focus, select:focus { border-color: var(--brand); outline: none; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; } .switch { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px !important; color: var(--text) !important; } .switch input { width: 17px; height: 17px; accent-color: var(--brand); } .muted { color: var(--text-dim); } .small { font-size: 12px; line-height: 1.45; } .hint { font-size: 12.5px; color: var(--text-dim); margin: 8px 0 10px; } .empty-note { font-size: 12.5px; color: var(--text-dim); padding: 12px; background: var(--bg-soft); border-radius: var(--radius-sm); border: 1px dashed var(--line); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); font-weight: 600; cursor: pointer; transition: background .15s, transform .06s; } .btn:hover { background: var(--bg-hover); } .btn:active { transform: scale(.985); } .btn svg { width: 17px; height: 17px; } .btn.primary { background: var(--brand); border-color: var(--brand); color: #04211e; } html[data-theme="dark"] .btn.primary { color: #04211e; } .btn.primary:hover { background: var(--brand-600); } .btn.big { width: 100%; height: 46px; font-size: 15px; } .btn.ghost { background: transparent; } .btn.sm { height: 34px; font-size: 13px; padding: 0 11px; } .btn.xs { height: 28px; font-size: 12px; padding: 0 9px; border: none; color: var(--danger); } .btn[disabled] { opacity: .5; pointer-events: none; } .row-tools { display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- Chips ---------- */ .chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .chip.active { background: var(--brand); border-color: var(--brand); color: #04211e; } /* ---------- Segmented ---------- */ .seg { display: flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; gap: 3px; } .seg button { flex: 1; height: 32px; border: none; background: transparent; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-dim); } .seg button.active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); } /* ---------- Place list ---------- */ .list { display: flex; flex-direction: column; gap: 8px; } .place-card { display: flex; gap: 10px; padding: 10px; cursor: pointer; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); transition: border-color .15s, background .15s; } .place-card:hover { border-color: var(--brand); } .place-card.in-trip { border-color: var(--brand); background: var(--brand-100); } html[data-theme="dark"] .place-card.in-trip { background: #0e2b28; } .pc-thumb { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 10px; background: var(--bg-hover); display: grid; place-items: center; overflow: hidden; font-size: 22px; } .pc-thumb img { width: 100%; height: 100%; object-fit: cover; } .pc-main { flex: 1; min-width: 0; } .pc-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-sub { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; } .stars { color: var(--accent); font-size: 12px; letter-spacing: -1px; } .pc-add { align-self: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--brand-600); display: grid; place-items: center; cursor: pointer; font-size: 19px; font-weight: 700; line-height: 1; } html[data-theme="dark"] .pc-add { color: var(--brand); } .pc-add.added { background: var(--brand); border-color: var(--brand); color: #04211e; } /* ---------- Base (accommodation) ---------- */ .base-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; background: var(--bg-soft); } .base-empty { font-size: 12.5px; color: var(--text-dim); } .base-set { display: flex; align-items: center; gap: 10px; } .base-set .bs-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #1a1206; display: grid; place-items: center; flex: 0 0 34px; } .base-set .bs-main { flex: 1; min-width: 0; } .base-set .bs-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .base-set .bs-sub { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Stops (drag reorder) ---------- */ .stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .stop { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .stop.dragging { opacity: .45; } .stop.over { border-color: var(--brand); border-style: dashed; } .stop-handle { cursor: grab; color: var(--text-dim); touch-action: none; } .stop-handle svg { width: 16px; height: 16px; } .stop-idx { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px; background: var(--brand); color: #04211e; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; } .stop-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stop-del { border: none; background: none; color: var(--text-dim); cursor: pointer; padding: 2px; } .stop-del:hover { color: var(--danger); } /* ---------- Route result ---------- */ .result { margin-top: 12px; padding: 12px; border-radius: var(--radius); background: var(--brand-100); border: 1px solid var(--brand); } html[data-theme="dark"] .result { background: #0e2b28; } .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; } .rv { font-size: 19px; font-weight: 800; color: var(--brand-600); line-height: 1.2; } html[data-theme="dark"] .rv { color: var(--brand); } .rl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; } .result-note { font-size: 12px; color: var(--text-dim); margin-top: 8px; text-align: center; } .saving { color: var(--ok); font-weight: 700; } .matrix-wrap { margin-top: 10px; } .leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 2px; border-bottom: 1px dashed var(--line-soft); } .leg .lg-i { width: 20px; height: 20px; border-radius: 999px; background: var(--bg-hover); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: 0 0 20px; } .leg .lg-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leg .lg-v { color: var(--text-dim); white-space: nowrap; } /* ---------- Plan / itinerary ---------- */ .plan-out { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; } .day-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); } .day-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--brand); color: #04211e; font-weight: 800; font-size: 14px; } .day-head .dh-sub { margin-left: auto; font-size: 11.5px; font-weight: 700; opacity: .8; } .timeline { padding: 10px 12px; } .tl-item { display: flex; gap: 10px; padding: 7px 0; } .tl-time { flex: 0 0 52px; font-size: 12px; font-weight: 700; color: var(--brand-600); padding-top: 1px; } html[data-theme="dark"] .tl-time { color: var(--brand); } .tl-body { flex: 1; min-width: 0; } .tl-title { font-size: 13.5px; font-weight: 600; } .tl-sub { font-size: 11.5px; color: var(--text-dim); } .tl-move { color: var(--text-dim); font-size: 11.5px; padding: 3px 0 3px 62px; display: flex; align-items: center; gap: 6px; } .tl-move svg { width: 13px; height: 13px; } .tl-warn { color: var(--danger); font-size: 11.5px; } .weather-strip { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; scrollbar-width: none; } .weather-strip::-webkit-scrollbar { display: none; } .wx { flex: 0 0 auto; min-width: 78px; text-align: center; padding: 8px 6px; border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--line-soft); } .wx .wx-d { font-size: 11px; color: var(--text-dim); font-weight: 700; } .wx .wx-i { font-size: 21px; line-height: 1.3; } .wx .wx-t { font-size: 12px; font-weight: 700; } .wx .wx-r { font-size: 10.5px; color: var(--text-dim); } .export-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } /* ---------- Map controls ---------- */ .map-fabs { position: absolute; right: 12px; bottom: calc(18px + var(--safe-b)); z-index: 900; display: flex; flex-direction: column; gap: 8px; } .fab { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text-dim); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); } .fab:hover { color: var(--text); } .fab.on { background: var(--brand); border-color: var(--brand); color: #04211e; } .map-legend { position: absolute; left: 12px; top: 12px; z-index: 900; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow-sm); max-width: 62%; } /* Leaflet skinning */ .leaflet-container { background: var(--bg-soft); font: inherit; } .leaflet-control-attribution { background: rgba(255,255,255,.75) !important; color: #333 !important; font-size: 10px !important; } html[data-theme="dark"] .leaflet-control-attribution { background: rgba(10,14,20,.72) !important; color: #98a3b0 !important; } html[data-theme="dark"] .leaflet-control-attribution a { color: #5eead4 !important; } .leaflet-bar a { background: var(--bg-elev) !important; color: var(--text) !important; border-color: var(--line) !important; } .leaflet-bar a:hover { background: var(--bg-hover) !important; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); } .leaflet-popup-content { margin: 10px 12px; font-size: 13px; } .picking .leaflet-container { cursor: crosshair; } /* markers */ .mk { display: grid; place-items: center; border-radius: 999px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 2px solid #fff; } html[data-theme="dark"] .mk { border-color: #0b0f14; } .mk-stop { width: 26px; height: 26px; background: var(--brand); color: #04211e; font-size: 12px; } .mk-base { width: 30px; height: 30px; background: var(--accent); color: #1a1206; font-size: 14px; } .mk-poi { width: 18px; height: 18px; background: #64748b; color: #fff; font-size: 10px; } .mk-poi.fav { background: var(--danger); } .mk-hl { transform: scale(1.25); z-index: 1000 !important; } /* ---------- Detail sheet ---------- */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1500; animation: fade .2s; } .sheet { position: fixed; z-index: 1600; background: var(--bg-elev); box-shadow: var(--shadow); left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 94vw); max-height: 86dvh; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } @media (max-width: 700px) { .sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 88dvh; border-radius: 18px 18px 0 0; animation: slideup .22s ease; } @keyframes slideup { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } } } .sheet-close { position: absolute; right: 10px; top: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 999px; border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } .sheet-body { overflow-y: auto; padding: 0 0 calc(16px + var(--safe-b)); } .sh-hero { height: 150px; background: var(--bg-hover); display: grid; place-items: center; font-size: 46px; } .sh-hero img { width: 100%; height: 100%; object-fit: cover; } .sh-pad { padding: 14px 16px; } .sh-title { font-size: 18px; font-weight: 800; margin: 0 0 3px; } .sh-sub { font-size: 12.5px; color: var(--text-dim); } .sh-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; } .tag { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text-dim); } .sh-desc { font-size: 13.5px; margin: 10px 0; } .sh-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .rating-big { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; } .rating-big b { font-size: 26px; } .review { padding: 10px 0; border-top: 1px solid var(--line-soft); } .rv-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .rv-av { width: 26px; height: 26px; border-radius: 999px; background: var(--bg-hover); display: grid; place-items: center; font-size: 12px; font-weight: 700; } .rv-txt { font-size: 13px; margin-top: 5px; } .rv-form textarea { width: 100%; min-height: 62px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-soft); resize: vertical; } .star-pick { display: flex; gap: 2px; font-size: 22px; color: var(--line); cursor: pointer; } .star-pick span.on { color: var(--accent); } .open-now { color: var(--ok); font-weight: 700; } .open-closed { color: var(--danger); font-weight: 700; } /* ---------- Toast / loader ---------- */ .toast-host { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { background: #12181f; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); animation: fade .18s; max-width: 90vw; } html[data-theme="dark"] .toast { background: #e8eef5; color: #0b0f14; } .toast.err { background: var(--danger); color: #fff; } .loader { position: fixed; inset: 0; z-index: 1900; background: rgba(0,0,0,.28); display: grid; place-items: center; gap: 10px; grid-auto-flow: row; color: #fff; font-size: 13.5px; } .spin { width: 34px; height: 34px; border-radius: 999px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: sp .8s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } } .key-status { font-size: 12px; margin-left: 8px; } .key-status.ok { color: var(--ok); } .key-status.bad { color: var(--danger); } /* ---------- Responsive: phone = bottom sheet panel ---------- */ .only-mobile { display: none; } @media (max-width: 899px) { .only-mobile { display: grid; } .layout { display: block; position: relative; height: calc(100dvh - var(--topbar-h)); } .map-wrap { position: absolute; inset: 0; } .panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000; width: 100%; height: 58dvh; max-height: 88dvh; border-right: none; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: var(--shadow); transform: translateY(calc(100% - 108px)); transition: transform .25s cubic-bezier(.2,.8,.3,1); } .panel.open { transform: translateY(0); } .panel.full { height: 88dvh; transform: translateY(0); } .panel-grip { display: block; width: 42px; height: 4px; border-radius: 999px; background: var(--line); margin: 8px auto 2px; } .map-fabs { bottom: calc(118px + var(--safe-b)); } } @media (min-width: 900px) and (max-width: 1180px) { :root { --panel-w: 340px; } } @media (min-width: 1500px) { :root { --panel-w: 440px; } } /* =========================================================== BẢN IN / XUẤT PDF =========================================================== */ #printRoot { display: none; } @media print { @page { size: A4; margin: 14mm 12mm; } html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; } .topbar, .layout, .map-fabs, .sheet, .sheet-backdrop, .toast-host, .loader, .panel { display: none !important; } #printRoot { display: block !important; font-family: "Times New Roman", Georgia, serif; font-size: 10.5pt; line-height: 1.42; color: #000; } .pr-head { border-bottom: 2.5pt solid #0d9488; padding-bottom: 6pt; margin-bottom: 10pt; } .pr-brand { font-size: 9pt; letter-spacing: 2pt; text-transform: uppercase; color: #0d9488; font-weight: bold; } .pr-logo { margin-right: 4pt; } .pr-title { font-size: 20pt; margin: 3pt 0 2pt; font-weight: bold; } .pr-sub { font-size: 9.5pt; color: #444; margin: 0; } .pr-stats { display: flex; gap: 0; border: 0.6pt solid #bbb; margin-bottom: 12pt; } .pr-stat { flex: 1; text-align: center; padding: 5pt 3pt; border-right: 0.6pt solid #ddd; } .pr-stat:last-child { border-right: none; } .pr-stat b { display: block; font-size: 13pt; color: #0f766e; } .pr-stat span { font-size: 8pt; text-transform: uppercase; letter-spacing: .6pt; color: #666; } .pr-day { margin-bottom: 12pt; break-inside: avoid-page; page-break-inside: avoid; } .pr-day-head { display: flex; align-items: baseline; gap: 8pt; background: #0d9488; color: #fff; padding: 4pt 7pt; font-size: 10.5pt; } .pr-day-head b { letter-spacing: 1pt; } .pr-day-x { margin-left: auto; font-size: 8.5pt; } .pr-wx { font-size: 9pt; font-style: italic; color: #444; padding: 3pt 7pt; border-bottom: 0.6pt dashed #ccc; } .pr-table { width: 100%; border-collapse: collapse; } .pr-table td { vertical-align: top; padding: 3.5pt 4pt; } .pr-visit { border-bottom: 0.6pt solid #e3e3e3; } .pr-visit td { break-inside: avoid; page-break-inside: avoid; } .pr-t { width: 40pt; font-weight: bold; font-size: 10pt; color: #0f766e; white-space: nowrap; } .pr-chk { width: 16pt; text-align: right; font-size: 13pt; color: #999; } .pr-name { font-weight: bold; font-size: 11pt; } .pr-meta { font-size: 8.5pt; color: #555; } .pr-addr { font-size: 8.5pt; color: #333; } .pr-link, .pr-link a { font-size: 8pt; color: #0f766e; text-decoration: none; } .pr-desc { font-size: 8.5pt; color: #333; font-style: italic; margin-top: 1.5pt; } .pr-warn { font-size: 8.5pt; color: #b3261e; font-weight: bold; } .pr-move td { font-size: 8.5pt; color: #777; padding: 1.5pt 4pt; } .pr-foot { margin-top: 14pt; break-inside: avoid; } .pr-foot h3 { font-size: 10pt; margin: 0 0 4pt; text-transform: uppercase; letter-spacing: 1pt; color: #666; } .pr-notes span { display: block; border-bottom: 0.6pt solid #ccc; height: 15pt; } .pr-fine { font-size: 7.5pt; color: #777; margin: 6pt 0 0; word-break: break-all; } .pr-fine a { color: #0f766e; text-decoration: none; } a[href]::after { content: none !important; } }