:root{--cam:#ea5b0c;--nen:#f6f7f9;--the:#fff;--chu:#1c2430;--mo:#64748b;--vien:#e3e7ec; /* §159.47c — mau bao hieu gio THUC TE. Khai thanh BIEN vi con phai doi theo nen toi: to mau cung thi chu xanh dam / do dam tren nen #12161c doc khong ra. */ --som:#15803d;--dung:#1d4ed8;--tre:#b91c1c;--vua:#b45309; /* §159.57 — mau quan he dia ly trong khoi "ga khac". CUNG TINH dung luon mau thuong hieu: day la quan he gan nhat, va cam la mau site vẫn dung cho "cai dang o day". LIEN KE dung xanh mong ket: khac han cam nen phan biet duoc ngay, nhung van la mau tram — no la thong tin phu, khong duoc gianh mat voi noi dung. CO Y khong dung --som/--dung/--tre: ba mau do da mang nghia som/dung/muon o bang gio thuc te, muon nghia thu hai la day khach doan mo. */ --ganh:#0f766e;--nen-cung:rgba(234,91,12,.07);--nen-ganh:rgba(15,118,110,.07)} *{box-sizing:border-box} body{margin:0;background:var(--nen);color:var(--chu);line-height:1.55; font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif} a{color:var(--cam)} /* Dải cam ăn LÊN cả vùng thanh trạng thái iOS. Cần đủ ba thứ mới ra: thẻ `viewport-fit=cover` cho nội dung tràn qua vùng an toàn, `theme-color` để trình duyệt tô thanh của nó, và `env(safe-area-inset-top)` ở đây để chữ không chui xuống dưới đồng hồ với sóng pin. Hai bên cũng phải chừa: xoay ngang thì tai thỏ ăn vào cạnh trái/phải. */ .dau{background:var(--cam);color:#fff; padding:calc(14px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) 14px calc(18px + env(safe-area-inset-left,0px))} /* §159.49 — hàng thứ hai của header: đồng hồ + tài khoản. Sao nguyên bảng màu và hình khối từ `.topbar-row2` của trang đặt vé (viên thuốc nền trắng mờ trên dải cam) để hai nơi trông là MỘT sản phẩm, không phải hai site. */ .dau-hang2{display:flex;align-items:center;justify-content:space-between; gap:10px;min-width:0} .dong-ho{flex-shrink:0;font-family:"SF Mono","Consolas","Roboto Mono",monospace; font-size:12.5px;color:#fff;background:rgba(255,255,255,.16);border:0; border-radius:999px;padding:5px 12px;cursor:pointer;min-height:32px} .dong-ho:hover{background:rgba(255,255,255,.24)} .dong-ho:focus-visible{outline:2px solid #fff;outline-offset:2px} .dong-ho .ngay{color:rgba(255,255,255,.72);margin-right:6px} .dong-ho .gio{color:#fff;font-weight:700} .tai-khoan{font-size:12.5px;color:rgba(255,255,255,.92); background:rgba(255,255,255,.14);padding:4px 11px;border-radius:999px; max-width:min(56vw,230px);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .tai-khoan::before{content:"";display:inline-block;width:8px;height:8px; border-radius:50%;background:#4ade80;margin-right:7px;vertical-align:middle; box-shadow:0 0 6px rgba(74,222,128,.9)} /* §159.50 — chua dang nhap thi cho nay la loi moi dang ky. Nen TRANG DAC tren dai cam la tuong phan manh nhat co the dat o day: no phai la thu mat bat duoc, khong phai mot cai nhan nua giong o tai khoan. Nhap nhay NHE = vien sang phong ra roi tan, khong phai chop tat do mo: chu chop tat rat met mat, ma day la mot dong chu phai doc duoc. */ /* MOI luat duoi day phai boc trong `.dau`. Ngay tren kia co `.dau a{color:#fff;font-size:18px}` — do uu tien (0,1,1), CAO HON `.dang-ky` tran (0,1,0). De tran thi nut ra CHU TRANG TREN NEN TRANG, co chu 18px: da dung ra dung nhu vay mot lan, chi thay khi mo trang that va do mau tinh duoc. `.dau .dang-ky` la (0,2,0), thang. */ .dau .dang-ky{display:inline-flex;align-items:center;flex-shrink:0; font-size:12.5px;font-weight:700;color:var(--cam);background:#fff; padding:5px 13px;border-radius:999px;text-decoration:none;min-height:32px; line-height:1.45;gap:4px;animation:dk-tho 2.6s ease-in-out infinite} /* `display:inline-flex` se DE thuoc tinh `hidden` cua HTML neu khong chan — dung cai bay da ghi o dau tep, nen luat [hidden] phai di kem. */ .dau .dang-ky[hidden]{display:none} .dau .dang-ky:hover{background:#fff;color:var(--cam);text-decoration:none} .dau .dang-ky:focus-visible{outline:2px solid #fff;outline-offset:3px} /* Do that: nhan day du "Dang ky / Dang nhap" rong 151px. O 320px (iPhone SE) hang chi rong 284px, dong ho da an 154px + khe 10px -> chi con 120px cho nut. Nen o man hep phai rut, va rut con "Dang nhap" (90px) chu khong phai "Dang ky": link tro thang vao man DANG NHAP, de chu "Dang ky" tron thi cai nhan noi sai noi no dan toi. Khach chua co tai khoan bam vao van thay ngay "Chua co tai khoan? Dang ky ngay" ngay duoi o mat khau. Moc 359px chu khong phai 360px: do o 360px thi le phai vua dung 18px. `aria-label` giu nguyen ca hai ve de tro doc man hinh khong doc ra mot cai nhan cut theo be ngang man hinh. */ @media(max-width:359px){.dau .dang-ky .dk-them{display:none}} /* §159.51 — menu tai khoan (☰). Sao nguyen hinh khoi `.account-menu` cua trang dat ve: the bo 12px, muc bo 8px, ro chuot vao to cam nhat, muc Dang xuat to do. Bien mau dung o day (`--the`, `--vien`, `--chu`, `--mo`, `--tre`) deu tu lat theo nen toi nen KHONG can luat rieng cho nen toi. Moi khoi dat `display` o duoi deu phai co luat `[hidden]` di kem — cai bay ghi o dau tep, va no da can nguyen mot vong sua o §159.50. */ /* MOI luat duoi day PHAI boc trong `.dau` — menu nam trong
ma ngay tren co `.dau a{color:#fff;font-size:18px;display:inline-flex}` voi do uu tien (0,1,1), cao hon `.menu-tk-muc` tran (0,1,0). De tran thi cac muc la the dung ra CHI CON CAI ICON: chu trang tren nen trang, co chu 18px, muc cao gap doi. Da dung ra dung nhu vay mot lan — y het con loi cua §159.50, cach do hai tieng, o cung mot cai `.dau a`. */ .dau .menu-tk{position:absolute;z-index:50;top:calc(100% - 3px); right:calc(18px + env(safe-area-inset-right,0px)); width:max-content;min-width:214px;max-width:calc(100vw - 24px); background:var(--the);border:1px solid var(--vien);border-radius:12px; padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.22); /* `overflow:hidden` — `.account-menu` ben trang dat ve co, minh lam roi. Co no thi muc con KHONG THE ve ra ngoai the duoc nua du khau ve lai co truc trac. User da chup duoc canh nen the chi phu 4 muc dau, 3 muc con lai de ra ngoai dam len bang gio tau (khong tai hien duoc headless). */ overflow:hidden; animation:menu-hien .16s ease-out} .dau .menu-tk[hidden]{display:none} /* Mo dan bang opacity, KHONG transform: transform day phan tu len mot lop GPU rieng, ma anh chup cua lop do co the bi cu trong khi chu da ve lai dung — dung kieu hong user chup duoc. Nhin gan nhu y het. */ @keyframes menu-hien{from{opacity:0}to{opacity:1}} .dau .menu-tk-muc{display:flex;align-items:center;gap:10px;width:100%; text-align:left;background:transparent;border:0;border-radius:8px; padding:10px 12px;font-size:14.5px;font-weight:400;font-family:inherit; color:var(--chu);cursor:pointer;text-decoration:none;white-space:nowrap} .dau .menu-tk-muc[hidden]{display:none} .dau .menu-tk-muc:hover{background:rgba(234,91,12,.1);color:var(--cam)} .dau .menu-tk-muc.nguy:hover{background:rgba(185,28,28,.1);color:var(--tre)} .dau .menu-tk-muc:focus-visible{outline:2px solid var(--cam);outline-offset:-2px} .dau .menu-tk-vach{height:1px;background:var(--vien);margin:5px 4px} .dau .menu-tk-mui{margin-left:auto;color:var(--mo);font-size:17px;line-height:1; transition:transform .16s ease-out} .dau .menu-tk-muc[aria-expanded="true"] .menu-tk-mui{transform:rotate(90deg)} .dau .menu-tk-con{display:block;margin:2px 0 2px 10px;padding-left:8px; border-left:2px solid var(--vien)} .dau .menu-tk-con[hidden]{display:none} .dau .menu-tk-nho{font-size:14px;padding:9px 10px} @keyframes dk-tho{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.6)} 70%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}} /* --- Lịch âm · hoàng đạo (§159.49) --------------------------------------- Chỉ XEM, không chọn ngày: bản trong trang đặt vé là bộ CHỌN ngày đi nên mang theo nút chốt, `data-iso`, và cả luồng đặt vé. Ở đây không có gì để chọn — bê nguyên là chở theo một mớ trạng thái chết. Phần tính toán thì dùng LẠI y nguyên `lunar.js` của trang đặt vé, không chép thuật toán. */ .lich-nen{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:60; display:flex;align-items:flex-end;justify-content:center; animation:lich-mo .2s ease-out} .lich{background:var(--the);color:var(--chu);width:min(420px,calc(100% - 16px)); margin:0 8px 8px;border:1px solid var(--vien);border-radius:14px;padding:14px; box-shadow:0 12px 40px rgba(0,0,0,.22);max-height:calc(100dvh - 16px); overflow:auto;animation:lich-len .28s cubic-bezier(.32,.72,0,1)} .lich-dau{display:flex;align-items:center;justify-content:space-between; gap:8px;margin-bottom:10px} .lich-dau b{font-size:15px} .lich-nut{width:30px;height:30px;border:1px solid var(--vien); background:var(--nen);color:var(--cam);border-radius:8px;cursor:pointer; font-size:15px;line-height:1} .lich-nut:hover{background:var(--the)} .lich-thu{display:grid;grid-template-columns:repeat(7,1fr);gap:3px; font-size:11px;color:var(--mo);text-align:center;margin-bottom:4px} .lich-luoi{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .lich-o{position:relative;padding:5px 2px;border-radius:8px;text-align:center; border:1px solid transparent;cursor:pointer;background:var(--nen)} .lich-o.trong{background:none;cursor:default} .lich-o.nay{border-color:var(--cam)} .lich-o.chon{background:var(--cam);color:#fff} .lich-o.chon .am,.lich-o.chon .duong{color:#fff} .lich-o .duong{display:block;font-size:13px;line-height:1.2} .lich-o .am{display:block;font-size:9px;color:var(--mo);line-height:1} .lich-o.dau-thang .am{color:#d98a2b;font-weight:700} .lich-o.hoang::after{content:"";position:absolute;top:4px;right:4px;width:5px; height:5px;border-radius:50%;background:#16a34a} .lich-chi-tiet{margin-top:9px;padding:8px 10px;border-radius:8px; background:var(--nen);border:1px solid var(--vien);font-size:11.5px; line-height:1.55;color:var(--mo)} .lich-chi-tiet .cd-duong{color:var(--chu);font-weight:700;font-size:12px} .lich-chi-tiet .cd-hoang{color:#16a34a;font-weight:700} @keyframes lich-mo{from{opacity:0}to{opacity:1}} @keyframes lich-len{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .dau a{color:#fff;text-decoration:none;font-weight:800;font-size:18px; display:inline-flex;align-items:center;gap:10px} .dau-nut{display:flex;align-items:center;gap:8px;flex-shrink:0} /* Cụm chat góc TRÁI-dưới: góc phải-dưới đã có mục lục + lên đầu trang, chồng bốn nút một cột là che mất nội dung trên màn nhỏ. */ .chat{position:fixed;z-index:40; left:calc(14px + env(safe-area-inset-left,0px)); bottom:calc(14px + env(safe-area-inset-bottom,0px)); display:flex;flex-direction:column;align-items:flex-start;gap:10px} .chat[hidden]{display:none} .chat-bang{display:flex;flex-direction:column;gap:8px; transform-origin:bottom left;opacity:1;transform:none; transition:opacity .18s ease,transform .24s cubic-bezier(.32,.72,0,1), display .24s allow-discrete} .chat-bang[hidden]{display:none;opacity:0;transform:scale(.94) translateY(8px)} @starting-style{.chat-bang{opacity:0;transform:scale(.94) translateY(8px)}} .kenh{display:flex;align-items:center;gap:10px;text-decoration:none; background:var(--the);color:var(--chu);border:1px solid #cfd6de; border-radius:24px;padding:7px 15px 7px 7px;font-size:14.5px;font-weight:600; white-space:nowrap;box-shadow:0 3px 14px rgba(28,36,48,.22); transition:transform .18s cubic-bezier(.32,.72,0,1)} .kenh:active{transform:scale(.97)} .kenh-icon{width:34px;height:34px;border-radius:50%;flex-shrink:0;color:#fff; display:flex;align-items:center;justify-content:center} /* Zalo: nền tròn XANH, bong bóng vẽ bằng `currentColor` nên ra TRẮNG, chữ "Zalo" trong bong bóng màu xanh. Làm ngược lại (nền trắng + bong bóng xanh) là chữ xanh nằm trên bong bóng xanh — mất hút. Đã dựng thử và nhìn thấy đúng cảnh đó. Giống hệt `.support-channel--zalo` của web đặt vé. */ .kenh--zalo .kenh-icon{background:#0068ff;color:#fff} .kenh--telegram .kenh-icon{background:#229ed9} .kenh--messenger .kenh-icon{background:linear-gradient(45deg,#006aff 0%,#00b2ff 100%)} /* Logo lấy đúng bản dùng ở header web đặt vé. Ảnh phải nằm TRONG /giotaugiave/ (bộ sinh tự chép sang) — để ở web root là khách nước ngoài không tải được, đúng cái luật Cloudflare chỉ mở mỗi đường dẫn này. */ .dau img{height:34px;width:auto;display:block;flex-shrink:0} /* Câu tóm tắt: đây là đoạn Google AI Overview và featured snippet trích, nên nó phải dễ đọc chứ không phải chữ phụ mờ nhạt. */ .tomtat{font-size:15.5px;line-height:1.6;margin:2px 0 10px} /* Ảnh ga: lưới co giãn, KHÔNG cố định chiều cao — ảnh người vận hành tải lên có đủ tỉ lệ, ép cứng là méo. `aspect-ratio` + `object-fit` giữ khung đều mà không cắt sai trọng tâm quá đáng, và đặt sẵn khung nên KHÔNG gây nhảy bố cục (CLS) khi ảnh tải xong. */ .anh-ga{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px;margin:12px 0} .anh-ga img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover; border-radius:10px;border:1px solid var(--vien);display:block} .clip{position:relative;aspect-ratio:16/9;margin:12px 0;border-radius:10px; overflow:hidden;border:1px solid var(--vien)} .clip iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .khung{max-width:960px;margin:0 auto; padding:18px calc(18px + env(safe-area-inset-right,0px)) 18px calc(18px + env(safe-area-inset-left,0px))} .the{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:18px;margin-bottom:16px} h1{font-size:22px;margin:0 0 6px} h2{font-size:17px;margin:22px 0 10px} .phu{color:var(--mo);font-size:14px;margin:0 0 14px} table{border-collapse:collapse;width:100%;font-size:14.5px} th,td{border:1px solid var(--vien);padding:8px 10px;text-align:left} th{background:#f2f5f8;font-weight:700} .so{text-align:right;white-space:nowrap} .giua{text-align:center;white-space:nowrap} /* Tên loại chỗ dài ("Giường nằm khoang 6 — tầng 3"): không đặt chiều rộng tối thiểu thì trên màn hẹp nó gãy thành 4 dòng, hàng cao lêu nghêu. Bảng đã nằm trong .cuon nên tràn thì cuộn ngang, không vỡ trang. CHỈ áp cho bảng giá. Trước đây áp cho MỌI bảng, nên cột "Tàu" (chữ "SE8") và cột "#" (một chữ số) cũng bị ép 132px — phí chỗ của đúng những cột bên phải đang cần rộng. 110px chứ không phải 132px: đo trên màn 430px thì 132px làm bảng rộng 372px trong khung 356px ⇒ cột "Cao nhất" bị cắt, phải cuộn ngang mới đọc được giá. Hạ xuống 110px thì vừa khít, mà chiều cao hàng KHÔNG đổi (62px cả hai) — tên loại chỗ vẫn xuống đúng 2 dòng như cũ. */ table.gia td:first-child{min-width:110px} /* Cột co về đúng bề rộng nội dung. `width:1px` + `nowrap` là idiom của bảng HTML: trình duyệt nới lên vừa nội dung rồi dồn phần dư cho các cột còn lại. */ th.hep,td.hep{width:1px;white-space:nowrap} /* Cuộn ngang KHÔNG được im lặng. Render thật trên màn 390px: bảng giá bị cắt ngang cột "Cao nhất" mà không có dấu hiệu nào cho khách biết là vuốt được — họ chỉ thấy một bảng hỏng. Bóng đổ này hiện ở đúng phía CÒN nội dung và tự biến mất khi cuộn hết, nên không cần JS (CSP §139 cấm script nội tuyến) và cũng không hiện nhầm khi bảng vốn đã vừa màn. Cơ chế: hai lớp nền `local` cuộn theo nội dung che đi hai lớp `scroll` đứng yên — hết nội dung thì lớp che trùng lên lớp bóng. */ .cuon{overflow-x:auto;-webkit-overflow-scrolling:touch; background: linear-gradient(to right,var(--the) 40%,rgba(255,255,255,0)) left/28px 100% no-repeat local, linear-gradient(to left,var(--the) 40%,rgba(255,255,255,0)) right/28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%,rgba(28,36,48,.18),rgba(28,36,48,0)) left/12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgba(28,36,48,.18),rgba(28,36,48,0)) right/12px 100% no-repeat scroll} /* Màn hẹp: bảng giá có 4 cột tiền + cột tên, riêng padding ngang đã ăn 80px trong khung 356px. Bớt còn 6px thì số 7 chữ số (1.023.000đ) vừa đủ chỗ trên màn 430px mà KHÔNG phải thu nhỏ chữ — mà chữ số chính là thứ khách vào đây để đọc. Màn hẹp hơn nữa (360px) thì vẫn phải cuộn ngang: 4 cột tiền không thể vừa, và `.cuon` đã lo việc đó. */ @media(max-width:520px){th,td{padding:8px 6px}} /* --- Chuyển động (§159.22) ------------------------------------------------ Chuyển trang mượt bằng View Transitions API: CSS THUẦN, không thêm dòng JS nào — §139 cấm script nội tuyến và trang này vốn là HTML tĩnh. Trình duyệt chưa hỗ trợ thì điều hướng y như cũ, không mất gì (tăng cường dần). Nhịp và đường cong lấy theo lối Apple: nhanh, không nảy, ra nhanh vào chậm hơn một chút. `cubic-bezier(.32,.72,0,1)` là xấp xỉ của lò xo mà họ hay dùng. `.dau` mang tên chuyển cảnh riêng nên dải cam ở đầu trang ĐỨNG YÊN khi chuyển trang thay vì nhoè đi rồi hiện lại — đó mới là thứ tạo cảm giác liền mạch, không phải hiệu ứng mờ dần. */ @view-transition{navigation:auto} .dau{view-transition-name:dau} ::view-transition-old(root){animation:ra .16s cubic-bezier(.4,0,1,1) both} ::view-transition-new(root){animation:vao .3s cubic-bezier(.32,.72,0,1) both} @keyframes ra{to{opacity:0;transform:translateY(-5px)}} @keyframes vao{from{opacity:0;transform:translateY(9px)}} /* Thẻ nội dung trôi lên khi vào trang. `backwards` chứ KHÔNG `both`: nếu vì lý do nào đó hiệu ứng không chạy thì thẻ vẫn ở trạng thái tự nhiên — chứ để `both` mà hỏng là nội dung nằm im ở opacity 0, khách thấy trang trắng. */ .khung>.the{animation:the-vao .4s cubic-bezier(.32,.72,0,1) backwards} .khung>.the:nth-child(2){animation-delay:.04s} .khung>.the:nth-child(3){animation-delay:.08s} .khung>.the:nth-child(n+4){animation-delay:.12s} @keyframes the-vao{from{opacity:0;transform:translateY(10px)}} /* Phản hồi khi chạm. Chỉ đụng `transform`/màu — không đụng thứ gây dựng lại bố cục, vì trang chủ có tới 1.630 liên kết. */ .luoi a,.nut,.tron,.ml-bang a{ transition:transform .18s cubic-bezier(.32,.72,0,1), background-color .18s ease,border-color .18s ease,color .18s ease} .luoi a:active,.ml-bang a:active{transform:scale(.985)} .nut:hover{transform:translateY(-1px)} .nut:active{transform:scale(.97)} .tron:active{transform:scale(.9)} html{scroll-behavior:smooth} /* Bảng mục lục bung ra từ chính cái nút vừa bấm. `allow-discrete` để hiệu ứng ĐÓNG cũng chạy được dù `[hidden]` đặt display:none. */ .ml-bang{transform-origin:bottom right;opacity:1;transform:none; transition:opacity .18s ease,transform .24s cubic-bezier(.32,.72,0,1), display .24s allow-discrete} .ml-bang[hidden]{opacity:0;transform:scale(.94) translateY(8px)} @starting-style{.ml-bang{opacity:0;transform:scale(.94) translateY(8px)}} /* Ai đã tắt hiệu ứng trong hệ điều hành thì phải được tôn trọng — chuyển động không chỉ là thẩm mỹ, với một số người nó gây chóng mặt thật. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto} ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important} } /* Nút lên đầu trang + mục lục nổi (§159.22). `display:flex` sẽ ĐÈ thuộc tính `hidden` của HTML nếu không chặn — đã dính đúng bẫy này một lần ở web đặt vé, nên mọi khối đặt display ở đây đều phải có luật [hidden] đi kèm. */ /* `env(safe-area-inset-*)`: trên iPhone có thanh gạt ngang dưới đáy, để 14px trơ là nút nằm sát ngay trên nó. */ .noi{position:fixed;z-index:40; right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(14px + env(safe-area-inset-bottom,0px)); display:flex;flex-direction:column;align-items:flex-end;gap:10px} .noi[hidden]{display:none} /* Nút NỔI TRÊN thẻ trắng, nên viền nhạt như thẻ là nó tan vào nền — ảnh chụp iPhone thật cho thấy đúng cảnh đó: cái nút trông như một vệt méo chứ không ra hình nút. Cần viền chắc + bóng đổ rõ để tách khỏi thẻ. `-webkit-appearance:none` + `padding:0`: iOS Safari tự áp kiểu nút riêng, không dập là chữ lệch tâm và kích thước không đúng như khai. */ .tron{-webkit-appearance:none;appearance:none;padding:0;margin:0; flex:0 0 auto;box-sizing:border-box; width:44px;height:44px;aspect-ratio:1;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid #cfd6de;background:var(--the);color:var(--chu); font:inherit;font-size:19px;line-height:1;cursor:pointer; touch-action:manipulation;-webkit-tap-highlight-color:transparent; box-shadow:0 3px 14px rgba(28,36,48,.22)} /* Nút chính (lên đầu trang) tô màu hẳn — nó là việc khách hay làm nhất trên trang dài này, và màu đặc thì không bao giờ lẫn vào thẻ trắng. */ .tron.chinh{background:var(--cam);color:#fff;border-color:var(--cam); box-shadow:0 3px 14px rgba(234,91,12,.38)} /* CHỈ đổi màu trên thiết bị THẬT SỰ có con trỏ. Trên cảm ứng, `:hover` dính lại sau khi chạm — ảnh chụp của user có đúng cảnh một nút cam một nút trắng mà chẳng vì lý do gì. */ @media(hover:hover){ .tron:hover{background:var(--cam);color:#fff;border-color:var(--cam)} } .tron:focus-visible{outline:2px solid var(--cam);outline-offset:2px} .ml{display:flex;flex-direction:column;align-items:flex-end;gap:10px} .ml[hidden]{display:none} .ml-bang{display:flex;flex-direction:column;background:var(--the); border:1px solid var(--vien);border-radius:11px;padding:6px;max-width:74vw; box-shadow:0 4px 16px rgba(28,36,48,.18)} .ml-bang[hidden]{display:none} .ml-bang a{padding:8px 12px;border-radius:7px;text-decoration:none;font-size:14.5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ml-bang a:hover{background:var(--nen)} .ml-bang a[hidden]{display:none} .nut{display:inline-block;background:var(--cam);color:#fff;text-decoration:none; padding:11px 22px;border-radius:9px;font-weight:700;margin-top:6px} /* §159.67 — khối đặt vé: chọn ngày NGAY TRÊN TRANG TĨNH rồi mang sang trang đặt. Là
thuần, KHÔNG một dòng JS: CSP ở đây cấm script nội tuyến, mà form GET tự dựng đúng `/?ga_di=..&ga_den=..&ngay=..&mac=..`. Tắt JS vẫn chạy. `.nut` vốn dành cho thẻ ; nút submit là