.
Đây là chữa TRIỆU CHỨNG. Gốc bệnh là chọn tử thẻ trần + `!important`: thẻ
nào mang lớp tự quản lề cũng sẽ dính lại. Muốn chữa gốc thì phải
bó luật này vào riêng trang chủ, mà trang chủ lại là trang duy nhất có
KHÔNG mang lớp nào — cần đặt một lớp mốc cho nó trước đã. */
/* Dải chip điểm đến là phần ĐUÔI của hộp tìm kiếm, không phải một mục riêng —
nó được `patchHomeNav` chèn vào đầu `.flash-sale .container` chỉ vì đó là
khối kế tiếp, chứ không phải vì nó thuộc về "Ưu đãi giờ chót".
Hệ quả: nó ăn HAI khoảng cộng lại — 2.5rem đệm trên của ở luật
ngay trên đây, cộng 2rem lề trên của chính `.home-nav` = 72px trắng trơn
nằm giữa banner và hàng chip. Trên màn 390px đó là gần một phần mười chiều
cao trang, đúng ngay chỗ khách vừa gõ xong điểm đến và đang tìm bước tiếp.
Phải `!important` vì luật `section:not(.hero)` bên trên cũng `!important`;
không có mức đặc hiệu nào thắng được nó.
`:has(.home-nav)` để chỉ bóp khi dải chip thật sự có mặt — chưa cấu hình
chip nào thì `patchHomeNav` không chèn gì, lúc đó tấm "Ưu đãi giờ chót" đỏ
cần nguyên khoảng đệm để không dán vào đáy banner. */
#flash-sale:has(.home-nav) {
padding-top: 1rem !important;
}
.home-nav {
margin-top: 0;
margin-bottom: 1.5rem;
}
}
.tours-section__cta {
margin: 1.75rem auto 0;
text-align: center
}
/* Ba nút "Xem tất cả …", một cho mỗi tab — chỉ nút của tab đang mở được hiện.
Ẩn bằng `display: none` chứ không bằng `visibility`/opacity: ba nút cùng một
ô, còn chiếm chỗ là hai nút vô hình vẫn ăn chiều cao và vẫn tab tới được. */
.tours-section__cta [data-tour-cta] {
display: none;
}
.tours-section__cta [data-tour-cta].is-active {
/* inline-block, đúng giá trị của .btn--outline — đổi sang flex là padding và
đường cơ sở của chữ lệch đi so với mọi nút khác cùng kiểu trên trang. */
display: inline-block;
}
/* ======= RESPONSIVE — SECTION MỚI (flash-sale / hot-deal / press / footer) ======= */
@media (max-width: 1024px) {
.flash-sale__panel {
padding: 2rem 1.75rem 2.25rem;
}
.flash-card,
.combo-card,
.press-card,
.mice__track>.tour-card,
.tours-track>.tour-card {
flex-basis: calc((100% - 1.5rem) / 2);
}
/* flex-basis ở trên không tới được băng hai hàng (nó là grid) — bề ngang cột
phải khai riêng, cùng công thức 2 thẻ/màn. */
.home-rail--rows-2 .tours-track {
grid-auto-columns: calc((100% - 1.5rem) / 2);
}
.blog__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 680px) {
.flash-sale {
background: #f7f8fa;
}
.flash-sale__panel {
padding: 1.5rem 1rem 1.75rem;
border-radius: 1rem;
box-shadow: 0 0.75rem 2rem rgba(134, 13, 20, 0.12);
}
/* Nút "Xem tour ưu đãi" xuống DƯỚI băng thẻ (yêu cầu 28/08/2026).
*
* Trên điện thoại nó là một nút rộng cả màn nằm giữa tiêu đề và băng thẻ:
* khách phải lướt qua một nút "xem tất cả" trước khi nhìn thấy dù chỉ một ưu
* đãi nào. Đưa xuống cuối thì nó thành bước tiếp theo tự nhiên sau khi đã vuốt
* hết mấy thẻ.
*
* `display: contents` ở `.flash-sale__head` để tiêu đề và nút trở thành con
* trực tiếp của `.flash-sale__panel`, nhờ vậy `order` xếp chúng chung một
* hàng dọc với băng thẻ — mà markup trong index.html không phải đổi. */
.flash-sale__panel {
display: flex;
flex-direction: column;
padding: 1.5rem 1rem 1.75rem;
}
.flash-sale__head {
display: contents;
}
.flash-sale__title-wrap {
order: 1;
margin-bottom: 1.25rem;
}
.flash-sale__panel .hcarousel {
order: 2;
}
.flash-sale__title-wrap {
align-items: flex-start;
gap: 0.625rem;
}
.flash-sale__bolt {
display: inline-flex;
margin-top: 0.125rem;
}
.flash-sale__bolt svg {
width: 2.5rem;
height: 2.5rem;
}
.flash-sale__subtitle {
max-width: 18rem;
font-size: 0.875rem;
}
.flash-sale__more {
order: 3;
width: 100%;
justify-content: space-between;
min-height: 2.75rem;
margin-top: 1.25rem;
}
.flash-card,
.combo-card,
.press-card,
.mice__track>.tour-card,
.tours-track>.tour-card {
flex-basis: 84%;
}
/* Dưới 680px giữ nguyên hai hàng chứ không gộp về một: gộp lại thì dải nước
ngoài thành tám lượt vuốt liên tiếp. */
.home-rail--rows-2 .tours-track {
grid-auto-columns: 84%;
}
/* Banner dải ngang 3.4:1 xếp hai cột trên điện thoại thì cao chưa tới 50px,
chữ trên ảnh không đọc nổi. Một cột. */
.rail-banners {
grid-template-columns: 1fr;
}
/* Mosaic bốn cột trên điện thoại thì tấm nhỏ còn chưa tới 80px — bỏ hẳn
kiểu mosaic, mọi tấm về lưới hai cột như bố cục còn lại. Ảnh mosaic vuông
hơn nên hai cột vẫn đọc được. */
.rail-banners--mosaic {
grid-template-columns: repeat(2, 1fr);
}
.rail-banners--mosaic .rail-banner--lead {
grid-column: span 2;
grid-row: auto;
}
.rail-banners--mosaic .rail-banner--lead img {
aspect-ratio: 1.74;
}
/* .blog__grid không còn luật một cột ở đây: từ 768px xuống nó đã là băng vuốt
ngang (display:flex), mà grid-template-columns thì vô hiệu trên flex
container — để lại chỉ khiến người đọc sau tưởng nó còn tác dụng. */
.flash-sale__title {
font-size: 1.625rem;
}
.hotdeal__title,
.mice__title {
font-size: 1.5rem;
}
.hcarousel__arrow {
display: none;
}
}
/* ======= RESPONSIVE — FOOTER =======
*
* Ba mốc, mỗi mốc gỡ một chiều của bố cục desktop:
* 1200px — khối tổng đài thôi nằm ngang, tiêu đề lên trên bốn số.
* 1024px — cột thương hiệu chiếm cả hàng, ba cột link xuống hàng dưới.
* 768px — ba cột link gập thành accordion (xem .footer__col-toggle).
*/
@media (max-width: 1200px) {
.footer__support {
flex-direction: column;
align-items: flex-start;
}
.footer__hotlines {
width: 100%;
}
}
@media (max-width: 1024px) {
/* Cột thương hiệu cần chừng 26rem cho dòng địa chỉ và bốn nút liên hệ; dưới
mốc này chia bốn thì nó hẹp hơn thế. Cho nó cả hàng rồi để ba cột link chia
đều hàng dưới — vẫn là bốn cột, chỉ xếp thành hai hàng. */
.footer__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
}
.footer__col--brand {
grid-column: 1 / -1;
}
.footer__desc {
padding-right: 0;
max-width: 34rem;
}
.footer__hotlines {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 1.5rem;
}
/* Vạch chỉ còn nghĩa giữa hai số cùng hàng; ở cuối hàng thì nó là một nét dọc
lơ lửng ngoài mép khối. */
.footer__hotline-item:nth-child(2)::after {
display: none;
}
}
@media (max-width: 768px) {
/* gap: 0 để các cột gập lại xếp sát nhau — đường kẻ dưới mỗi tiêu đề đã là thứ
tách chúng, thêm khoảng hở 2.5rem nữa thì bốn hàng accordion rời rạc. */
.footer__grid {
grid-template-columns: 1fr;
gap: 0;
}
.footer__col--brand {
margin-bottom: 2.5rem;
}
.footer__col h4 {
display: block;
width: 100%;
margin-bottom: 0;
font-size: 0.9375rem;
}
.footer__col h4 label {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.875rem 0;
border-bottom: 0.0625rem solid var(--footer-line);
cursor: pointer;
}
/* Gạch chân hổ phách là chỉ báo hover của desktop; ở đây mỗi tiêu đề đã có
đường kẻ riêng, để cả hai là hai nét chồng nhau. */
.footer__col h4::after {
display: none;
}
.footer__col-chevron {
display: block;
}
.footer__col-list {
max-height: 0;
margin: 0;
overflow: hidden;
transition: max-height 0.4s ease, margin 0.4s ease;
}
/* Không dùng `none` vì transition cần một số cụ thể; 31.25rem đủ cho cột dài
nhất (7 mục). */
.footer__col-toggle:checked~.footer__col-list {
max-height: 31.25rem;
margin: 1rem 0 1.25rem;
}
.footer__col-toggle:checked~h4 .footer__col-chevron {
transform: rotate(180deg);
color: var(--footer-amber);
}
.footer__col-toggle:focus-visible~h4 label {
outline: 0.125rem solid var(--footer-amber);
outline-offset: 0.125rem;
}
#footer-col-outbound~h4,
#footer-col-domestic~h4 {
margin-top: 1.625rem;
margin-bottom: 0.75rem;
font-size: 1.25rem;
font-weight: 800;
text-transform: none;
letter-spacing: 0;
}
#footer-col-outbound~h4 label,
#footer-col-domestic~h4 label {
justify-content: flex-start;
padding: 0;
border-bottom: 0;
cursor: default;
}
#footer-col-outbound~h4 .footer__col-chevron,
#footer-col-domestic~h4 .footer__col-chevron {
display: none;
}
#footer-col-outbound~.footer__col-list,
#footer-col-domestic~.footer__col-list,
#footer-col-outbound:checked~.footer__col-list,
#footer-col-domestic:checked~.footer__col-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.75rem 1rem;
max-height: none;
margin: 0 0 1.875rem;
overflow: visible;
}
#footer-col-outbound~.footer__col-list li,
#footer-col-domestic~.footer__col-list li {
display: contents;
}
#footer-col-outbound~.footer__col-list a,
#footer-col-domestic~.footer__col-list a {
display: inline-flex;
font-size: 1rem;
font-weight: 400;
line-height: 1.35;
color: rgba(255, 255, 255, 0.72);
transform: none;
}
#footer-col-outbound~.footer__col-list a::before,
#footer-col-domestic~.footer__col-list a::before {
display: none;
}
.footer__support {
gap: 2rem;
margin: 2.5rem 0 2rem;
padding: 1.5rem;
border-radius: 0.75rem;
}
.footer__support-icon {
width: 3rem;
height: 3rem;
border-radius: 0.75rem;
}
.footer__support-icon svg {
width: 1.25rem;
height: 1.25rem;
}
.footer__support-title {
font-size: 1rem;
}
.footer__hotlines {
gap: 1rem 1.5rem;
}
.footer__hotline-item::after {
display: none !important;
}
.footer__hotline-label {
font-size: 0.6875rem;
}
.footer__hotline-number {
font-size: 1.125rem;
}
/* Nhãn tin cậy giữ mép trái như mọi thứ phía trên nó (accordion, địa chỉ,
thanh bản quyền). Bản thiết kế canh giữa dải này, nhưng bốn nhãn dài không
đều nhau canh giữa trên màn hẹp thì thành bốn dòng thụt ra thụt vào. */
.footer__badges {
gap: 0.625rem 1.25rem;
}
}
@media (max-width: 480px) {
.footer__logo img {
height: 2.375rem;
}
.footer__logo {
padding: 0.625rem 0.875rem;
border-radius: 0.625rem;
}
/* Vẫn hai số một hàng như trên tablet, không xuống một cột: bốn số xếp dọc
kéo khối tổng đài cao gần bằng cả màn hình điện thoại, đẩy dải nhãn tin cậy
và thanh bản quyền ra khỏi tầm nhìn.
*
Chỗ hẹp nhất là điện thoại 20rem: trừ 1.25rem đệm .container mỗi bên và
1.5rem đệm .footer__support mỗi bên còn 14.5rem, chia hai trừ khe 0.75rem
là 6.875rem một cột. Số 13 ký tự ở cỡ 1rem chiếm ~6.7rem — vừa khít, nên
cỡ chữ ở đây là con số đã tính, không phải chọn cho đẹp. */
.footer__hotlines {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.125rem 0.75rem;
}
.footer__hotline-label {
font-size: 0.625rem;
letter-spacing: 0.03125rem;
}
.footer__hotline-number {
font-size: 1rem;
}
}
/* Dưới 20rem (Galaxy Fold gập lại) cỡ 1rem bắt đầu tràn vì `white-space: nowrap`
không cho số xuống dòng. Hạ thêm một bậc thay vì cho xuống dòng: số điện thoại
bị ngắt giữa dòng là đọc sai số. */
@media (max-width: 20rem) {
.footer__hotline-number {
font-size: 0.875rem;
}
}
/* Ảnh đại diện của thẻ được bọc trong link chi tiết (xem linkCardTarget trong
templates.ts). Phải display:block + height:100% vì .flash-card__img và
.combo-card__img đều lấy chiều cao 100% của .*__media — thẻ inline cao
auto thì ảnh sập xuống 0. */
.card-media-link {
display: block;
height: 100%;
}
.combo-card__title a:hover {
color: var(--accent);
}
/* ======= THANH LIÊN HỆ NỔI BÊN PHẢI =======
*
* HAI nút tròn xếp dọc: Zalo trên, Gọi dưới. Bản trước là MỘT nút bật/tắt bung
* ra bốn kênh — checkbox ẩn, danh sách trượt, hai bố cục riêng cho desktop và
* di động. Bỏ hết: giờ chỉ còn hai thẻ thật, bấm là đi, không trạng thái
* nào để đồng bộ (xem components/public/social-rail.tsx).
*
* Không có viên thuốc bọc ngoài như bản thiết kế: nút lên-đầu-trang là phần tử
* riêng nằm ngoài component này, nên có hộp thì cụm thành một cái trong hộp hai
* cái ngoài hộp. Bỏ hộp đi thì cả cột là những hình tròn rời cùng cỡ — mỗi nút
* tự có nền đặc và bóng nên vẫn đọc được khi đè lên ảnh hero.
*/
.social-rail {
position: fixed;
/* Nút Gọi sát đáy; Zalo, ô chat và lên-đầu-trang xếp lên trên nó. Mốc này ăn
khớp với `bottom` của .back-to-top và của ô chat Subiz — cả ba tính từ cùng
bộ biến `--float-rail-*`, nên sửa một chỗ là phải xem lại cả ba. */
bottom: calc(var(--float-rail-base) + var(--float-rail-lift, 0px));
right: 0.75rem;
/* Dưới header dính (z-index 1000) nhưng trên nội dung thường. */
z-index: 900;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--float-rail-gap);
}
/* Cùng --float-rail-size và cùng cột với .back-to-top: ba nút nổi là một cụm,
lệch cỡ là mắt đọc thành ba thứ không liên quan. */
.social-rail__btn {
display: grid;
place-items: center;
width: var(--float-rail-size);
height: var(--float-rail-size);
border-radius: var(--radius-full);
color: #fff;
box-shadow: var(--shadow-md);
cursor: pointer;
transition: var(--transition);
}
.social-rail__btn svg {
width: 1.375rem;
height: 1.375rem;
}
.social-rail__btn:hover {
transform: translateY(-0.1875rem);
}
.social-rail__btn:focus-visible {
outline: 0.125rem solid var(--primary);
outline-offset: 0.125rem;
}
/* Xanh Zalo (#0068FF) chứ không phải navy của site: nút này dẫn ra một ứng dụng
khác, và người Việt nhận ra Zalo bằng đúng màu đó trước khi kịp đọc chữ. Để
navy thì nó chìm vào nút Gọi ngay dưới, thành hai vòng tròn giống hệt nhau
khác mỗi ruột. */
.social-rail__btn--zalo {
background: #0068ff;
}
.social-rail__btn--zalo:hover {
background: #0055d4;
}
/* Logo Zalo là logo chữ — xem chú thích trong social-rail.tsx. */
.social-rail__text {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: -0.025rem;
}
.social-rail__btn--call {
background: var(--primary);
}
.social-rail__btn--call:hover {
background: var(--accent);
}
/* Trên di động thanh này VẪN HIỆN, và .back-to-top vẫn xếp cặp với nó ở mép
phải — không còn `display: none` như bản trước.
*
* Lý do bản trước ẩn nó là sợ đè lên thanh CTA dính đáy (.td-bookbar,
* .bt-mobilebar). Nhưng cả cụm neo ở `top: 50%`, tức giữa màn hình, còn thanh
* CTA nằm sát đáy: lúc bung hết bốn nút cụm cao thêm ~14rem tính từ giữa, vẫn
* hụt so với mép dưới trên mọi màn cao từ 36rem. Không có chỗ nào chồng nhau.
*
* Mép phải là của CẢ BA nút nổi, kể cả ô chat Subiz — nó được kéo về đúng cột
* này bằng SUBIZ_RAIL_ON_MOBILE trong app/layout.tsx. Sửa vị trí cột ở đây thì
* xem lại cả đoạn đó. */
/* Trên màn hẹp, cột nút nổi cần thoáng hơn: ngón tay to hơn con trỏ chuột, và
đáy màn còn có thanh cố định của trang danh sách tour / trang đặt tour.
*
* Thứ tự từ dưới lên đúng như bản mobile của travel.com.vn: nút gọi sát đáy, ô
* chat ở giữa, nút lên-đầu-trang trên cùng — nên KHÔNG còn đảo thứ tự riêng cho
* di động như bản trước (nút gọi ở trên, lên-đầu-trang ở dưới). Cả ba khoảng
* cách đáy đều tính từ cùng bộ biến nên chèn ô chat vào giữa không phải sửa gì
* ở đây. */
@media (max-width: 768px) {
:root {
--float-rail-base: 3.25rem;
--float-rail-gap: 1rem;
}
}
/* ===========================================================================
iOS Safari: font ô nhập ≥ 16px trên di động để trang không tự phóng to.
Safari trên iPhone phóng to cả trang khi con trỏ vào một ô nhập có
`font-size` dưới 16px, rồi KHÔNG thu lại sau khi rời ô — khách gõ xong là
mắc kẹt trong bản phóng to, phải tự chụm hai ngón mới về được. Đây là hành vi
cố định của hệ điều hành, không tắt được bằng thuộc tính nào của ô nhập.
Cách chữa duy nhất không gây hại là nâng cỡ chữ. Cách còn lại — thêm
`maximum-scale=1` vào thẻ viewport — chặn luôn cả thao tác chụm-để-phóng của
người dùng trên toàn trang, tức lấy khả năng đọc của người mắt kém ra đổi.
Ba trang tour đã có khối tương đương trong CSS riêng của chúng
(tour-list.css, tour-details.css, book-tour.css); đây là phần còn thiếu:
thanh tìm kiếm đầu trang chủ, lớp phủ tìm kiếm và ô chọn nơi khởi hành trên
thanh trên cùng — cả ba đều xuất hiện ở MỌI trang công khai qua index.css.
Đặt cuối file để thắng khối `@media (max-width: 768px)` phía trên đang đặt
`.top-bar__depart select` ở 0.8125rem: hai quy tắc cùng độ đặc hiệu thì quy
tắc đứng sau thắng.
======================================================================== */
@media (max-width: 640px) {
.hero__search-field input,
.hero__search-field select,
.search-overlay__form input,
.top-bar__depart select {
font-size: 1rem;
}
}
/* ===== Popup chào khách ===== */
/* Dựng sẵn ở máy chủ nhưng mang `hidden`; index.js mới quyết định có mở không —
khách đã đóng thì trong `cookie_hours` giờ tiếp theo không thấy lại. */
.site-popup[hidden] {
display: none;
}
.site-popup {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
}
.site-popup__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 22, 51, 0.6);
}
.site-popup__panel {
position: relative;
width: min(34rem, 100%);
max-height: 90vh;
overflow-y: auto;
padding: 2rem 1.75rem 1.75rem;
border-radius: var(--radius-lg);
background: #fff;
color: var(--text-main);
box-shadow: var(--shadow-hover);
}
.site-popup__close {
position: absolute;
top: 0.5rem;
right: 0.75rem;
width: 2rem;
height: 2rem;
border: 0;
border-radius: var(--radius-full);
background: transparent;
color: var(--text-muted, #64748b);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.site-popup__close:hover {
background: var(--gold-light);
color: var(--text-main);
}
.site-popup__title {
margin: 0 0 0.75rem;
font-size: 1.25rem;
font-weight: 800;
}
.site-popup__image {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md, 0.75rem);
}
.site-popup__body {
margin-top: 0.875rem;
font-size: 0.9375rem;
line-height: 1.6;
}
.site-popup__link {
display: block;
color: inherit;
}
/* ======= CÂU HỎI THƯỜNG GẶP =======
*
* Dùng chung cho zone, chi tiết tour và chi tiết bài viết — `faqSectionHtml`
* trong lib/public/templates.ts dựng đúng một bộ thẻ cho cả ba.
*
* Để ở index.css chứ không tour-details.css vì khối này còn xuất hiện trên các
* trang dựng từ tours.html (chuyên mục tin, trang thẻ) — những trang KHÔNG nạp
* tour-details.css. index.css là file duy nhất trang công khai nào cũng có.
*
* `` mở/đóng bằng chính HTML, không có JS nào ở đây cả: bản trước ghi
* style thẳng vào thẻ và trỏ vào --gray-200 / --navy-900 / --gray-700 — ba biến
* không tồn tại trong bộ này, nên viền biến mất và chữ mất màu.
*/
.td-faqs__list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
.td-faq-item {
border: 0.0625rem solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-surface);
overflow: hidden;
}
.td-faq-item[open] {
border-color: var(--primary-light);
box-shadow: var(--shadow-md);
}
.td-faq-item__q {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.125rem;
cursor: pointer;
font-size: 1rem;
font-weight: 700;
line-height: 1.45;
color: var(--primary);
/* Bỏ tam giác mặc định: `list-style` lo Firefox, `::-webkit-details-marker`
lo Safari — thiếu vế thứ hai là Safari hiện cả tam giác lẫn mũi chevron. */
list-style: none;
}
.td-faq-item__q::-webkit-details-marker {
display: none;
}
.td-faq-item__text {
flex: 1;
min-width: 0;
}
.td-faq-item__chevron {
flex: none;
transition: transform 0.2s ease;
}
.td-faq-item[open] .td-faq-item__chevron {
transform: rotate(180deg);
}
.td-faq-item__a {
padding: 0 1.125rem 1rem;
color: var(--text-main);
font-size: 0.9375rem;
line-height: 1.7;
/* Biên tập viên gõ câu trả lời trong ô textarea thuần: xuống dòng của họ là
ký tự \A thật, không phải thẻ
. Không giữ khoảng trắng thì cả đoạn dồn
thành một dòng liền. */
white-space: pre-wrap;
}
/* ======= BANNER CỘT PHẢI BÀI VIẾT =======
*
* Vị trí `news-detail-aside` trong /admin/banners, chen giữa "Tin mới nhất" và
* "Tin xem nhiều nhất". Đặt ở index.css vì cùng lý do với `.nl-widget` ngay
* trên: trang chi tiết bài viết chỉ nạp index.css + tour-details.css, để trong
* zone-layouts.css là mất sạch kiểu.
*
* Không có tiêu đề khối. Đây là banner của chính công ty, không phải quảng cáo
* bên thứ ba, nên không cần nhãn "Quảng cáo"; mà thêm một dòng tiêu đề nữa vào
* cột đã có hai khối cùng cỡ chữ thì banner đọc ra như khối gợi ý thứ ba. */
.nl-banner {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nl-banner__item {
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--bg-subtle);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
a.nl-banner__item:hover {
transform: translateY(-0.125rem);
box-shadow: var(--shadow-md);
}
/* `auto 4 / 3` chứ không phải `4 / 3` trần, và cũng không phải `height: auto`.
*
* Bỏ trống chiều cao là ô co về 0 trước khi ảnh tải xong rồi bung ra đẩy cả cột
* xuống — đúng lỗi đã đo ở banner dải ngang trang chủ (592x0 ở khổ 1440px).
* Nhưng ép cứng một tỉ lệ như `.rail-banner` thì ở đây lại sai: dải ngang có
* sẵn bộ banner đúng khổ 1988x584 để bám theo, còn vị trí này mới mở, biên tập
* tải lên tấm nào là tấm ấy — cắt hai mép một tấm có chữ là hỏng nội dung.
*
* `auto 4 / 3` lấy 4:3 để GIỮ CHỖ khi trình duyệt chưa biết khổ ảnh, rồi nhường
* cho tỉ lệ thật ngay khi ảnh về. Nên khổ đề nghị là 800x600: đúng khổ đó thì
* không xê dịch một pixel nào. */
.nl-banner__item img {
display: block;
width: 100%;
height: auto;
aspect-ratio: auto 4 / 3;
object-fit: cover;
}
/* ======= LỀ NGANG TRÊN ĐIỆN THOẠI: MỌI TRANG THEO TRANG CHI TIẾT TOUR =======
Trang chi tiết tour từ trước đã kéo thẻ nội dung ra ngoài lề của `.container`
(`@media (max-width: 720px) { .td-section { margin-left/right: -0.75rem } }`
trong tour-details.css), nên mép thẻ nằm ở 8px thay vì 20px. Các trang còn
lại thì không — đo 09/09/2026 ở khổ 390px: chi tiết tour 8px, còn /tours,
chuyên mục, đặt tour, thị thực và tin tức đều 20px. Đi từ danh sách vào chi
tiết là khối nội dung nhảy ngang 12px, đọc ra như hai trang của hai site.
Kéo THẺ chứ không nới `.container`: nới container thì tiêu đề trang và chữ
chạy thẳng trong container cũng dạt ra 8px — sát mép quá để đọc. Giữ nguyên
20px cho chữ, chỉ thẻ nội dung mới bám ra, đúng như chi tiết tour đang làm.
Kéo VỎ LƯỚI (`.tl-grid`, `.nl-list`) thay vì từng thẻ con: lưới còn chạy hai
cột ở khoảng 600–720px, kéo từng thẻ ở đó là hai cột chồng lên nhau. Vỏ lưới
nở ra 24px thì mọi cột bên trong tự rộng theo, đúng ở cả một lẫn hai cột.
Đặt ở index.css vì luật này bắc qua bốn khuôn trang khác nhau (tour-list,
book-tour, visa, news) — mỗi khuôn nạp một tệp CSS riêng, để trong tệp nào
cũng chỉ đúng một phần. Chọn tử không khớp gì trên trang đang mở thì vô hại. */