nên quy tắc cũ `a.xgb-strip__item:hover` bỏ sót gần hết. */
.xgb-strip__item:hover .xgb-strip__icon,
.xgb-strip__item:focus-visible .xgb-strip__icon {
transform: translateZ(0) scale(1.08);
border-color: var(--xgb-strip-label);
background-color: oklch(100% 0 0 / 0.12);
}
.xgb-strip__item .xgb-strip__label {
transition: color var(--xgb-dur-short) var(--xgb-ease-out);
}
/* Nhãn giữ tông vàng, chỉ sáng lên một chút. Đổi hẳn sang trắng thì nó lẫn
với dòng nội dung trắng ngay bên dưới, mất luôn điểm nhấn. */
.xgb-strip__item:hover .xgb-strip__label,
.xgb-strip__item:focus-visible .xgb-strip__label { color: oklch(91% 0.095 88); }
.xgb-strip__text { min-width: 0; }
/* Dòng tiêu đề đổi màu để tạo điểm nhấn, khác hẳn dòng nội dung màu trắng */
.xgb-strip__label {
display: block;
color: var(--xgb-strip-label);
font-size: 0.75rem /*px:12px*/;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.xgb-strip__value {
display: block;
margin-top: 3px;
color: #fff;
font-size: 0.9063rem /*px:14.5px*/;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
/* Nút chuyển qua/lại */
.xgb-strip .owl-nav { position: static; }
.xgb-strip .owl-nav button.owl-prev,
.xgb-strip .owl-nav button.owl-next {
position: absolute;
top: 50%;
width: 30px;
height: 1.875rem /*px:30px*/;
margin-top: -15px;
border-radius: 50%;
background: oklch(100% 0 0 / 0.14) !important;
color: #fff !important;
font-size: 1.0625rem /*px:17px*/;
line-height: 1.75rem /*px:28px*/;
transition: background-color var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-strip .owl-nav button.owl-prev { left: -6px; }
.xgb-strip .owl-nav button.owl-next { right: -6px; }
.xgb-strip .owl-nav button:hover { background: var(--xgb-red) !important; }
/* =========================================================================
Bố cục: tiêu đề canh giữa, 3 ô trái · ảnh giữa · 3 ô phải (theo ảnh mẫu)
========================================================================= */
.xgb-why__head {
max-width: 780px;
margin: 0 auto 34px;
text-align: center;
}
.xgb-why__title { font-size: 2.375rem /*px:38px*/; }
.xgb-why__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr);
gap: 20px;
align-items: stretch;
}
.xgb-why__col {
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.xgb-why__grid .xgb-why__figure { min-height: 100%; }
/* =========================================================================
Màn hình nhỏ — kiểm tra ở 320 / 375 / 414 / 768px
========================================================================= */
@media only screen and (max-width: 991px) {
.xgb-why__grid { grid-template-columns: minmax(0, 1fr); }
.xgb-why__col { grid-template-rows: none; }
.xgb-why--mirror .xgb-why__figure { order: -1; min-height: 13.75rem /*px:220px*/; }
.xgb-why--offset .xgb-why__grid { grid-template-columns: minmax(0, 1fr); }
.xgb-why--offset .xgb-why__figure { min-height: 13.75rem /*px:220px*/; }
/* Thanh thông tin luôn là carousel (owl responsive 1/2/3/4 ô), nên chỉ
cần thu gọn ô lại cho vừa màn nhỏ. Mấy quy tắc grid ở đây trước kia là
tàn dư của bản dựng bằng lưới, owl bọc thêm .owl-item nên không ăn. */
.xgb-strip__item { padding: 0.25rem 0.875rem /*px:4px 14px*/; gap: 12px; }
.xgb-strip__icon { flex-basis: 40px; width: 40px; height: 2.5rem /*px:40px*/; font-size: 1.125rem /*px:18px*/; }
}
@media only screen and (max-width: 575px) {
.xgb-why { padding-top: 36px; }
.xgb-why__title { font-size: 1.625rem /*px:26px*/; }
.xgb-why__lead { font-size: 0.9375rem /*px:15px*/; }
.xgb-strip__item::before { display: none; }
}
/* Không để trang trượt ngang trên máy nhỏ */
html, body { overflow-x: clip; }
/* =========================================================================
Ai tắt hiệu ứng trong hệ điều hành: bỏ hết chuyển động không gian
========================================================================= */
@media (prefers-reduced-motion: reduce) {
/* Máy bật "Giảm chuyển động".
Theo yêu cầu của khách: hiệu ứng RÊ CHUỘT vẫn chạy bình thường ở mọi
trạng thái - khách chủ động rê chuột thì mới có, không phải chuyển động
tự phát nên không gây khó chịu.
Chỉ tắt phần chuyển động TỰ CHẠY, không do người dùng khởi động:
- nút gọi trong widget hỗ trợ đang lắc liên tục
- các carousel tự chuyển slide
Đây mới là loại gây chóng mặt cho người nhạy cảm với chuyển động. */
.xgb-support__item--phone > .xgb-support__icon { animation: none; }
}
/* =========================================================================
Dọn nốt các chỗ còn màu cũ
========================================================================= */
/* Menu sổ của Dịch vụ: bản gốc dùng ảnh nền images/bgmenu.png - ảnh đó là một
ô màu nâu #af7313 đặc, nên đổi màu bằng CSS không ăn. Bỏ ảnh, tô màu xanh. */
#xgb-nav__list .xgb-nav__item ul,
#xgb-nav__list li ul {
background-image: none !important;
background-color: var(--xgb-blue-deep);
}
/* Bảng giá cước: viền nâu #c48c1e và chữ đỏ nguyên bản #f00 */
.xgb-price { border-color: var(--xgb-blue-line) !important; }
.xgb-price__value,
.xgb-pricing__note--accent,
.xgb-pricing .xgb-price__value { color: var(--xgb-red) !important; }
.xgb-price__label { color: var(--xgb-blue) !important; }
/* Số trang trong phân trang: bản gốc dùng vàng #977a38 */
.xgb-pagination a { color: var(--xgb-blue); }
/* Ô Điểm đi / Điểm đến: bản gốc để width cố định nên ngắn hơn các ô bên dưới.
Cho ô nhập chiếm hết phần còn lại sau nhãn -> mép phải thẳng hàng. */
.xgb-booking .xgb-booking__form .xgb-field.xgb-field--inline { display: flex; align-items: stretch; }
.xgb-booking .xgb-booking__form .xgb-field.xgb-field--inline > label { flex: 0 0 auto; }
.xgb-booking .xgb-booking__form .xgb-field.xgb-field--inline .xgb-control-wrap { flex: 1 1 auto; min-width: 0; }
.xgb-booking .xgb-booking__form .xgb-field.xgb-field--inline input[type="text"] { width: 100%; }
/* Vài rule mà lần quét màu đầu bỏ nhầm vì có chú thích chen giữa */
.xgb-page-title h1 { color: var(--xgb-blue); }
/* Dùng background-COLOR chứ không phải `background`: viết tắt sẽ xoá luôn
background-image, đúng lỗi nút tìm kiếm trên mobile chỉ còn ô xanh trơn.
(Nút giờ chứa icon SVG nên không còn ảnh nền, nhưng vẫn giữ nguyên tắc.) */
.xgb-search__submit-icon { background-color: var(--xgb-blue); }
/* Panel menu mobile (menudd.css) - file đó chèn SAU nên cần thêm `body` */
body #xgb-drawer-nav ul ul li a { color: var(--xgb-blue) !important; }
body #xgb-drawer-nav ul ul li a span { color: var(--xgb-blue) !important; }
body .xgb-drawer-toggle--close { background: var(--xgb-blue); }
body .xgb-drawer__heading { background: var(--xgb-blue); }
body .xgb-drawer__hotline { background: var(--xgb-blue); }
body #xgb-drawer-panel ul { border-right: 1px solid var(--xgb-blue); }
body .xgb-clip .xgb-burger-bar { background: var(--xgb-blue); }
body .xgb-search__submit { background-color: var(--xgb-blue); }
/* Tiêu đề form đặt xe: bản gốc đổ gradient vàng cam */
.xgb-booking .xgb-booking__title,
.xgb-booking .des-contact {
background: var(--xgb-blue) !important;
color: #fff;
}
/* =========================================================================
Widget hỗ trợ nổi thứ 3: WhatsApp + thứ tự chồng lớp
(nội dung này vốn nằm ở xgb-form.css, giữ nguyên bên đó)
========================================================================= */
/* =========================================================================
Nền footer: bản gốc dùng ảnh images/bg-footer.jpg, đổi sang màu logo
========================================================================= */
.xgb-footer {
background-image: none;
background-color: var(--xgb-blue-deep);
}
.footer_line {
background-image: none;
background-color: oklch(100% 0 0 / 0.16);
height: 0.0625rem /*px:1px*/;
}
/* Bù đủ mọi rule còn dùng màu cũ (quét lại toàn bộ file css) */
.menutop ul li a:hover { color: var(--xgb-red); }
.header-top-right ul li a:hover { color: var(--xgb-red); }
.button_reset { background: var(--xgb-red); }
input:checked + label { background: var(--xgb-red); }
.xgb-card-grid h1 { color: var(--xgb-red); }
.pro1:hover { border: 1px solid var(--xgb-red); }
.footnav ul li .xgb-btn--primary { background: var(--xgb-blue); }
.scrollbottom { background: var(--xgb-blue); }
.thongtinhotro ul h4 { border: 1px solid var(--xgb-blue); }
.thongtinhotro ul h4 { color: var(--xgb-blue); }
.projecttitlel { background: var(--xgb-blue); }
.titleformlog h3 { color: var(--xgb-blue); }
.titleformlog h3 { border-bottom: 1px solid var(--xgb-blue); }
.formlogheader ul li .xgb-btn--primary { background: var(--xgb-blue); }
.input-submit { background-color: var(--xgb-red); }
.detail > h1 { color: var(--xgb-red); }
.them { background-color: var(--xgb-red); }
.trangchu-tab,.danhsachsanpham-tieude { border-bottom: 1px solid var(--xgb-red); }
.dstap { background: var(--xgb-red) !important; }
.nutpostlienheepc { background: var(--xgb-red); }
.quenmatkhausave { background: var(--xgb-red); }
.thanhtoan_next { background: var(--xgb-red); }
.blockmainnew ul li.lichildnews { color: var(--xgb-blue); }
.blockmainnew ul li.lichildnews a { color: var(--xgb-blue); }
.blockmainnew ul li.xgb-card .xgb-aside-news__row .xgb-aside-news__body a { border: 1px solid var(--xgb-blue); }
.blockmainnew ul li.xgb-card .xgb-aside-news__row .xgb-aside-news__body a { color: var(--xgb-blue); }
.model-pro { color: var(--xgb-blue); }
.detail-ts .detail-title h3 span { color: var(--xgb-blue); }
.slider-special .xgb-slide .xgb-card .name { background: var(--xgb-blue); }
.xgb-pricing ul li .xgb-price { border: 1px solid var(--xgb-blue-line); }
#xgb-nav__item--active { background: var(--xgb-blue-deep); }
.holder::after { border-top: 1px solid var(--xgb-blue); }
.holder::after { border-left: 1px solid var(--xgb-blue); }
#xgb-drawer-nav > ul > li > a:hover > span::after, #xgb-drawer-nav > ul > li.is-active > a > span::after, #xgb-drawer-nav > ul > li.open > a > span::after { border-color: var(--xgb-blue); }
.xgb-drawer__hotline { border-right: 1px solid var(--xgb-blue); }
.xgb-drawer__hotline { border-bottom: 1px solid var(--xgb-blue); }
/* =========================================================================
LỚP HOVER CHO TOÀN TRANG
Ý đồ: logo Xe Gia Bảo là một mũi tên hướng sang phải. Nên chữ ký của bộ
hiệu ứng này là VẠCH ĐỎ CHẠY TỪ TRÁI SANG - lặp lại đúng chuyển động đó.
Vạch dùng cho các khối KHÔNG có ảnh (bảng giá, phản hồi, mục footer).
Bộ từ vựng, mỗi phần tử đúng MỘT tín hiệu:
chữ / liên kết -> đổi sang màu đỏ thương hiệu
khối có ảnh -> ảnh phóng 1.04 trong khung đã cắt
khối không ảnh -> vạch đỏ chạy từ trái + viền xanh
icon tròn -> nền đổ đầy, icon trắng
nút điều hướng owl -> nền đỏ
Thời lượng 120ms (đổi màu) / 220ms (vạch, viền) / 420ms (phóng ảnh).
========================================================================= */
/* --- 1. Logo --------------------------------------------------------- */
.xgb-logo a {
display: inline-block;
transition: opacity var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-logo a:hover { opacity: .82; }
/* --- 2. Khối Email / Hotline / Giờ làm việc trên header ---------------
KHÔNG có hiệu ứng rê chuột ở đây (khách yêu cầu bỏ) - đây là khối thông tin
để đọc, không phải chỗ để bấm dạo. --- */
/* --- 3. Menu nhỏ góc trên trái ---------------------------------------- */
.menu-top li a {
transition: color var(--xgb-dur-micro) var(--xgb-ease-out);
}
.menu-top li a:hover { color: var(--xgb-red); }
/* --- 4. Chấm và nút điều hướng của mọi carousel ------------------------ */
.owl-dot span {
transition: background-color var(--xgb-dur-short) var(--xgb-ease-out),
width var(--xgb-dur-short) var(--xgb-ease-out);
}
.owl-dot:hover span { background: var(--xgb-red) !important; }
.owl-dot.is-active span { background: var(--xgb-blue) !important; }
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
transition: background-color var(--xgb-dur-short) var(--xgb-ease-out),
color var(--xgb-dur-short) var(--xgb-ease-out);
}
.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover { background-color: var(--xgb-red) !important; color: #fff !important; }
/* --- 5. Ô bảng giá cước ------------------------------------------------
Không có ảnh nên dùng vạch đỏ chạy từ trái - chữ ký của bộ hiệu ứng. */
.xgb-price {
position: relative;
overflow: hidden;
transition: border-color var(--xgb-dur-short) var(--xgb-ease-out),
box-shadow var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-price::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0.1875rem /*px:3px*/;
background: var(--xgb-red);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-price:hover {
border-color: var(--xgb-blue) !important;
box-shadow: 0 6px 18px oklch(42.3% 0.145 258 / 0.13);
}
.xgb-price:hover::after { transform: scaleX(1); }
.xgb-price .xgb-price__label { transition: color var(--xgb-dur-micro) var(--xgb-ease-out); }
.xgb-price:hover .xgb-price__label { color: var(--xgb-red) !important; }
/* --- 6. Ô phản hồi khách hàng ------------------------------------------ */
.xgb-review .xgb-review__inner {
position: relative;
transition: transform var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-review:hover .xgb-review__inner { transform: translateY(-3px); }
/* Ảnh khách: CHỈ đổi màu viền, không phóng to (khách yêu cầu bỏ) */
.xgb-review__avatar img {
transition: border-color var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-review__name { transition: color var(--xgb-dur-micro) var(--xgb-ease-out); }
.xgb-review:hover .xgb-review__name { color: var(--xgb-red); }
/* --- 7. Thẻ tin tức ở trang chủ ---------------------------------------- */
.xgb-post__media {
display: block;
overflow: hidden;
border-radius: 4px;
}
.xgb-post__media img {
display: block;
width: 100%;
transform: translateZ(0) scale(1);
will-change: transform;
backface-visibility: hidden;
transition: transform var(--xgb-dur-long) var(--xgb-ease-out);
}
.xgb-post__inner:hover .xgb-post__media img { transform: translateZ(0) scale(1.06); }
.xgb-post__body h3 a { transition: color var(--xgb-dur-micro) var(--xgb-ease-out); }
.xgb-post__body h3 a:hover { color: var(--xgb-red); }
/* --- 8. Logo đối tác ---------------------------------------------------
Bản gốc để logo màu xám nhạt; rê vào cho rõ nét lên. */
#owl-carousel3 .xgb-slide a {
display: block;
transition: transform var(--xgb-dur-short) var(--xgb-ease-out);
}
#owl-carousel3 .xgb-slide img {
filter: grayscale(1);
opacity: .68;
transition: filter var(--xgb-dur-short) var(--xgb-ease-out),
opacity var(--xgb-dur-short) var(--xgb-ease-out);
}
#owl-carousel3 .xgb-slide a:hover img { filter: grayscale(0); opacity: 1; }
/* --- 9. Footer --------------------------------------------------------- */
/* Bố cục cột: css.css chia cứng 38% + 15% + 15%... theo float. Thực tế chỉ có
menu "Dịch vụ" mới có menu con nên chỉ ra 2 cột, cột thứ hai chỉ rộng 176px
trong khi bên phải trống gần 450px - tên tuyến dài bị xuống hàng vô lý.
Chuyển sang flex: cột đầu (thông tin liên hệ) giữ 38%, các cột còn lại CHIA
ĐỀU phần trống. Thêm menu con cho mục khác thì tự cân lại, không phải sửa số. */
.xgb-footer__inner {
display: flex;
flex-wrap: wrap;
gap: 0 4%;
}
.xgb-footer__col {
float: none;
width: auto;
margin-right: 0;
flex: 1 1 0;
min-width: 0;
}
.xgb-footer__col:first-child { flex: 0 0 38%; }
/* Máy nhỏ: xếp dọc cho dễ đọc (mobile.css chia 46% theo float, nhưng file này
nạp sau nên phải khai lại ở đây, không thì flex ở trên đè mất). */
@media only screen and (max-width: 900px) {
.xgb-footer__inner { display: block; }
.xgb-footer__col,
.xgb-footer__col:first-child { width: auto; margin-bottom: 22px; }
}
.xgb-footer__col h3 a { transition: color var(--xgb-dur-micro) var(--xgb-ease-out); }
.xgb-footer__col h3 a:hover { color: var(--xgb-strip-label); }
/* Mục trong footer: vạch đỏ chạy từ trái, cùng chữ ký với ô bảng giá */
.xgb-footer__col ul li a {
position: relative;
display: inline-block;
padding-left: 0;
transition: color var(--xgb-dur-micro) var(--xgb-ease-out);
}
.xgb-footer__col ul li a::before {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 0.125rem /*px:2px*/;
background: var(--xgb-red);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-footer__col ul li a:hover { color: #fff; }
.xgb-footer__col ul li a:hover::before { transform: scaleX(1); }
/* Dòng địa chỉ / điện thoại: icon và chữ canh giữa theo chiều dọc.
Bản gốc để icon trong inline rộng 22px rồi canh bằng margin-top gán
tay cho từng icon - mỗi icon một cỡ nên cái cao cái thấp, rõ nhất ở icon
điện thoại. Dùng flex, cho ô icon cùng line-height với dòng chữ là mọi icon
tự nằm đúng giữa dòng đầu tiên, không phải chỉnh tay nữa. */
.xgb-footer__contact div,
.xgb-contact__info div {
display: flex;
align-items: flex-start; /* địa chỉ 2 dòng: icon bám dòng đầu */
gap: 9px;
}
.xgb-footer__contact div span,
.xgb-contact__info div span {
flex: 0 0 16px;
width: 16px;
height: 1.5rem /*px:24px*/; /* = line-height của dòng chữ */
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--xgb-dur-short) var(--xgb-ease-out),
transform var(--xgb-dur-short) var(--xgb-ease-out);
}
/* Bỏ mấy lề gán tay của bản gốc, giờ flex lo việc canh */
.xgb-footer__contact div span i,
.xgb-contact__info div span i {
margin: 0;
padding: 0;
font-size: 0.9375rem /*px:15px*/;
line-height: 1;
}
.xgb-footer__contact div:hover span {
color: var(--xgb-strip-label);
transform: translateY(-2px);
}
/* --- 10. Đường dẫn (breadcrumb) ---------------------------------------- */
.xgb-breadcrumb a,
.xgb-breadcrumb__inner a {
transition: color var(--xgb-dur-micro) var(--xgb-ease-out);
}
.xgb-breadcrumb a:hover,
.xgb-breadcrumb__inner a:hover { color: var(--xgb-red); }
/* Nấc cuối = trang đang xem: màu xanh của logo.
css.css đặt `.xgb-breadcrumb__inner .xgb-crumbs__item a span { color:#2a2a2a }` (0,2,2) nên
selector ở đây phải có thêm 1 class mới thắng được, không thì vẫn ra màu xám. */
.xgb-breadcrumb__inner .xgb-crumbs .xgb-crumbs__item--current > a,
.xgb-breadcrumb__inner .xgb-crumbs .xgb-crumbs__item--current > a span {
color: var(--xgb-blue);
}
/* Dấu ">" vẫn là dấu ngăn cách nên giữ màu xám như các nấc khác */
.xgb-breadcrumb__inner .xgb-crumbs .xgb-crumbs__item--current > a i { color: #2a2a2a; }
/* Đang ở trang đó rồi thì rê chuột cũng giữ nguyên màu */
.xgb-breadcrumb__inner .xgb-crumbs .xgb-crumbs__item--current > a:hover,
.xgb-breadcrumb__inner .xgb-crumbs .xgb-crumbs__item--current > a:hover span {
color: var(--xgb-blue);
}
/* --- 11. Liên kết trong nội dung bài viết ------------------------------ */
.xgb-entry__content a {
color: var(--xgb-blue);
transition: color var(--xgb-dur-micro) var(--xgb-ease-out);
}
.xgb-entry__content a:hover { color: var(--xgb-red); }
/* --- 12. Phân trang ---------------------------------------------------- */
.xgb-pagination a {
transition: background-color var(--xgb-dur-short) var(--xgb-ease-out),
color var(--xgb-dur-short) var(--xgb-ease-out),
border-color var(--xgb-dur-short) var(--xgb-ease-out);
}
/* =========================================================================
Ảnh nền màu vàng/nâu còn sót của giao diện cũ
Mấy chỗ này không đổi được bằng cách sửa mã màu vì nền là FILE ẢNH đã tô sẵn
màu cũ. Cách xử lý: bỏ ảnh, thay bằng màu thương hiệu.
(đã xử lý trước đó: bgmenu.png ở menu sổ, bg-footer.jpg ở footer)
========================================================================= */
/* Đầu ô bảng giá cước - bgtabprice.jpg */
.xgb-pricing ul li .xgb-price .xgb-price__label {
background-image: none;
background-color: var(--xgb-blue);
color: #fff !important;
}
.xgb-price:hover .xgb-price__label { color: #fff !important; }
/* Dấu ngoặc kép trang trí ở ô phản hồi - icon-quote.png */
.xgb-reviews .xgb-review__inner:before {
background-image: none;
content: "\201C";
color: var(--xgb-blue-line);
font-family: Georgia, "Times New Roman", serif;
font-size: 3.5rem /*px:56px*/;
line-height: 1;
}
/* Nút "đặt mua" và menu tư vấn của giao diện cũ */
.nutdatmua { background-image: none; background-color: var(--xgb-red); }
.categoryitems li { background-image: none; }
.tuvan247 { background-image: none; background-color: var(--xgb-blue); }
/* Viền tròn quanh ảnh khách trong ô phản hồi - bản gốc dùng nâu rgb(175 115 19 / 81%) */
.xgb-reviews .xgb-reviews__track .xgb-review__avatar img,
.xgb-reviews .xgb-reviews__track .xgb-review__avatar i {
border-color: var(--xgb-blue-line);
transition: border-color var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-review:hover .xgb-review__avatar img,
.xgb-review:hover .xgb-review__avatar i { border-color: var(--xgb-blue); }
/* =========================================================================
Bóng đổ của thẻ tin bị cắt
Hai nguyên nhân:
1. css.css đặt overflow:hidden cho .xgb-card-grid và .xgb-panel - đó là mẹo
clear float đời cũ. Thẻ ở cột đầu/cột cuối nằm SÁT ĐÚNG mép khung (55px
và 1225px), nên bóng toả 20px ra ngoài bị khung cắt phẳng lì.
Cách chữa: trả overflow về visible và clear float bằng clearfix chuẩn -
vẫn giữ đúng bố cục cũ nhưng không cắt bóng nữa.
2. Khoảng cách giữa 2 hàng chỉ 25px, mà bóng toả 20px + lệch xuống 6px nên
gần như chạm hàng dưới, nhìn không ra bóng. Nới lên 34px.
========================================================================= */
.xgb-card-grid,
.xgb-panel {
overflow: visible;
}
.xgb-card-grid::after,
.xgb-panel::after {
content: "";
display: table;
clear: both;
}
/* =========================================================================
Lưới thẻ (Dịch vụ · Loại xe · Tin tức · Tìm kiếm)
css.css xếp thẻ bằng float + width:32%. Thẻ cao thấp khác nhau (tiêu đề 2
hay 3 dòng) nên float bị mắc vào thẻ cao của hàng trên: xem /tin-tuc?page=2
sẽ thấy một thẻ nằm lẻ loi giữa hàng dù còn đủ chỗ.
Chuyển sang CSS Grid: mỗi hàng 3 cột thật sự, các ô trong cùng hàng tự cao
bằng nhau nên mảng nền xám dưới tiêu đề luôn thẳng, và không còn chuyện mắc
float. Vẫn giữ clearfix ở trên cho .xgb-panel.
========================================================================= */
.xgb-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 34px 25px; /* 34px dọc cho bóng đổ có chỗ thở */
align-items: stretch;
}
.xgb-card-grid::after { display: none; } /* grid không cần clear float */
/* Bỏ float/width cứng của css.css, và cho thân thẻ giãn hết chiều cao còn lại
để nền xám của các thẻ cùng hàng kết thúc ở cùng một mức. */
.xgb-card-grid > .xgb-card {
float: none;
width: auto;
margin: 0;
display: flex;
flex-direction: column;
}
.xgb-card-grid > .xgb-card > .xgb-card__body { flex: 1 1 auto; }
/* Tiêu đề gói trong 2 dòng: dài ngắn khác nhau thì phần chữ bên dưới vẫn bắt
đầu ở cùng một dòng, hàng nhìn mới đều. */
.xgb-card-grid .xgb-card__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* Chốt cứng đúng 2 dòng: chỉ -webkit-line-clamp thôi thì trình duyệt vẫn
để lọt một vệt của dòng thứ 3, còn min-height lệch với line-height thì
tiêu đề 1 dòng và 2 dòng vẫn cao khác nhau. */
line-height: 1.6;
min-height: 3.2em;
max-height: 3.2em;
}
/* Bóng gọn lại một chút cho vừa khoảng vừa nới */
.xgb-card-grid .xgb-card:hover {
box-shadow: 0 6px 16px oklch(42.3% 0.145 258 / 0.14);
}
@media only screen and (max-width: 900px) {
.xgb-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 575px) {
.xgb-card-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
/* =========================================================================
Tin tức nổi bật ở cột phải
Các ở đây mang class .xgb-card (đổi tên từ class `news` của bản cũ) nên
ăn nhầm bộ style của thẻ trong lưới: width 32%, float left, nền xám -> ba
mẩu tin bé xíu nằm ngang trong cột hẹp, đúng lỗi "Tin tức nổi bật vỡ giao
diện".
Bản cũ có bộ quy tắc riêng cho khối này nhưng viết dưới `.blockmainnew` -
tên đó không nằm trong bảng đổi tên nên selector mồ côi, không khớp gì cả.
Ở đây khai lại theo đúng khối hiện tại.
========================================================================= */
.xgb-aside-news__list {
margin: 0;
padding: 0;
list-style: none;
}
/* Vạch ngăn giữa các mục: khoảng cách trên và dưới vạch phải BẰNG NHAU.
css.css để padding-bottom 18px + margin-bottom 20px, còn override cũ của em
lại đặt padding:0 nên vạch dính sát vào ảnh và dòng ngày. Nay dồn hết vào
padding đối xứng, margin để 0 - có đúng một nguồn sinh ra khoảng trắng nên
nhìn cân và sau này sửa cũng dễ. */
.xgb-aside-news__list li.xgb-card {
float: none;
width: auto;
margin: 0;
padding: 0.875rem 0 /*px:14px 0*/;
background: none;
overflow: hidden;
border-bottom: 1px solid #e3e3e3;
}
/* Mục đầu nằm ngay dưới tiêu đề khối nên không cần đệm thêm ở trên,
mục cuối thì bỏ vạch cho khỏi thừa. */
.xgb-aside-news__list li.xgb-card:first-child { padding-top: 0; }
.xgb-aside-news__list li.xgb-card:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.xgb-aside-news__row {
display: flex;
gap: 12px;
align-items: flex-start;
}
.xgb-aside-news__media {
flex: 0 0 96px;
width: 96px;
overflow: hidden;
border-radius: 4px;
}
.xgb-aside-news__media img {
display: block;
width: 100%;
height: 68px;
object-fit: cover;
}
/* css.css khai .xgb-aside-news__list li .xgb-aside-news__body (0,2,1) với
width:56%; float:right - nặng hơn selector 1 class nên phải viết đủ nặng
mới đè được, nếu không bố cục flex ở trên không ăn. */
.xgb-aside-news__list li .xgb-aside-news__body {
flex: 1 1 auto;
width: auto;
float: none;
min-width: 0;
margin-left: 0;
padding: 0;
}
/* ĐÂY LÀ CHỖ GÂY LỖI "tiêu đề dư text ở dòng bị ẩn":
css.css đặt .xgb-aside-news__heading { height: 38px; overflow: hidden }
trong khi line-height 1.6 × 14px = 22,4px -> 38px = 1,7 dòng. Khung cắt
ngang GIỮA dòng thứ hai nên chữ bị xén mất nửa trên/dưới.
Trả chiều cao về auto và để chính thẻ lo việc cắt bớt. */
.xgb-aside-news__list li .xgb-aside-news__body .xgb-aside-news__heading {
height: auto;
overflow: visible;
padding-bottom: 0;
margin-bottom: 4px;
line-height: inherit;
}
.xgb-aside-news__list .xgb-aside-news__link {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.8438rem /*px:13.5px*/;
line-height: 1.45;
/* max-height ĐÚNG BẰNG 3 × line-height (3 × 1.45 = 4.35em).
Một số trường hợp trình duyệt hạ -webkit-box xuống display thường làm
-webkit-line-clamp mất tác dụng; lúc đó max-height vẫn cắt, và vì nó
khớp bội số của line-height nên nhát cắt rơi đúng khe giữa 2 dòng chứ
không xén ngang thân chữ. */
max-height: 4.35em;
color: #333;
}
.xgb-aside-news__list .xgb-card__date {
padding: 0;
font-size: 0.75rem /*px:12px*/;
color: #8a8a8a;
}
/* Dưới 1170px khung nội dung chuyển sang width:auto và chỉ còn 5px lề hai bên
(mobile.css), thẻ tin gần như dán vào mép màn hình nên bóng bị mép trang cắt.
Nới lề lên 18px: bóng toả 16px nên cần ít nhất 16, lấy 18 cho dư 2px.
Chữ cũng không còn dính mép màn hình. */
@media only screen and (max-width: 1170px) {
.xgb-container { padding: 0 1.125rem /*px:0 18px*/; }
}
/* =========================================================================
Icon Email / Hotline / Giờ làm việc trên header
Bản gốc dùng 3 file png (iconhead1-3.png) làm ảnh nền. Ảnh nhỏ nên bị rỗ
trên màn hình sắc nét, lại không đổi màu được. Thay bằng SVG inline trong
markup - nét ở mọi độ phân giải, ăn theo màu thương hiệu.
========================================================================= */
.xgb-contact-info ul li.xgb-info {
display: flex;
align-items: center;
gap: 12px;
background-image: none !important; /* tắt 3 file png của bản gốc */
padding-right: 0;
text-align: left;
}
.xgb-contact-info ul li.xgb-info:last-child { width: auto; }
.xgb-info__icon {
flex: 0 0 38px;
width: 38px;
height: 2.375rem /*px:38px*/;
color: var(--xgb-blue);
}
.xgb-info__icon svg { width: 38px; height: 2.375rem /*px:38px*/; display: block; }
.xgb-info__text { min-width: 0; }
.xgb-info .xgb-contact-info__label { display: block; font-weight: 700; }
.xgb-info .xgb-contact-info__value { display: block; font-weight: 700; }
@media only screen and (max-width: 767px) {
.xgb-info__icon,
.xgb-info__icon svg { flex-basis: 30px; width: 30px; height: 1.875rem /*px:30px*/; }
}
/* =========================================================================
Rê chuột vào ẢNH thì CHỮ cũng đổi màu theo
Nguyên tắc chung: cả thẻ là một mục, chạm vào đâu trong thẻ cũng cho phản
hồi giống nhau. Nên đặt :hover lên khối cha bao cả ảnh lẫn chữ.
========================================================================= */
/* --- Tại sao chọn chúng tôi: tiêu đề đỏ + viền + bóng nhỏ hơn thẻ tin ---- */
.xgb-reason {
transition: border-color var(--xgb-dur-short) var(--xgb-ease-out),
box-shadow var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-reason:hover {
border-color: var(--xgb-blue);
box-shadow: 0 4px 10px oklch(42.3% 0.145 258 / 0.12); /* nhỏ hơn thẻ tin (0 6px 16px) */
}
.xgb-reason__name { transition: color var(--xgb-dur-micro) var(--xgb-ease-out); }
.xgb-reason:hover .xgb-reason__name { color: var(--xgb-red); }
/* --- Dịch vụ từ chúng tôi (carousel trang chủ) -------------------------- */
.xgb-services ul li .xgb-services__title a { transition: color var(--xgb-dur-micro) var(--xgb-ease-out); }
.xgb-services ul li:hover .xgb-services__title a { color: var(--xgb-red); }
/* --- Tin tức trang chủ -------------------------------------------------- */
.xgb-post__inner:hover .xgb-post__body h3 a { color: var(--xgb-red); }
/* --- Tin tức nổi bật ở cột phải (sidebar) ------------------------------- */
.xgb-aside-news__list .xgb-aside-news__media {
display: block;
overflow: hidden;
border-radius: 4px;
}
.xgb-aside-news__list .xgb-aside-news__media img {
display: block;
width: 100%;
transform: translateZ(0) scale(1);
will-change: transform;
backface-visibility: hidden;
transition: transform var(--xgb-dur-long) var(--xgb-ease-out);
}
.xgb-aside-news__list li.xgb-card .xgb-aside-news__link {
transition: color var(--xgb-dur-micro) var(--xgb-ease-out),
font-weight var(--xgb-dur-micro) var(--xgb-ease-out);
}
/* Rê vào ảnh HOẶC tiêu đề đều cho cùng một phản hồi */
.xgb-aside-news__list li.xgb-card:hover .xgb-aside-news__media img { transform: translateZ(0) scale(1.06); }
.xgb-aside-news__list li.xgb-card:hover .xgb-aside-news__link {
color: var(--xgb-red);
font-weight: 700;
}
/* --- Trang danh sách Dịch vụ / Loại xe / Tin tức ------------------------
Thẻ .xgb-card bao cả ảnh lẫn tiêu đề nên rê vào ảnh là tiêu đề đổi theo. --- */
.xgb-card:hover .xgb-card__title { color: var(--xgb-red); }
/* =========================================================================
Gradient vàng/cam còn sót
Đây là loại khó thấy nhất: rule đặt background-COLOR màu mới, nhưng bản gốc
còn một background-IMAGE dạng linear-gradient phủ đè lên trên nên vẫn ra màu
cũ. Phải tắt hẳn background-image.
========================================================================= */
.xgb-booking .xgb-booking__form .xgb-control--submit,
.xgb-booking .xgb-booking__title,
.xgb-booking .des-contact,
.xgb-booking ul.nav {
background-image: none !important;
}
/* =========================================================================
Khối giới thiệu + form đặt xe trong "Tại sao chọn chúng tôi"
Bài giới thiệu bên trái, form đặt xe bên phải.
========================================================================= */
/* Dùng ĐÚNG lưới của .xgb-why__grid bên dưới (1fr · 1.06fr · 1fr, gap 20px):
bài giới thiệu chiếm 2 cột đầu, form nằm trọn cột thứ 3. Nhờ vậy mép trái
và mép phải của form khớp tuyệt đối với cột 3 ô lý do bên dưới ở mọi bề
rộng - không phải canh tay bằng con số cố định. */
.xgb-why__intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr);
gap: 20px;
align-items: start;
margin-bottom: 30px; /* cách 6 ô lý do bên dưới 30px */
}
.xgb-why__body { grid-column: 1 / 3; min-width: 0; }
.xgb-why__form { grid-column: 3; min-width: 0; }
/* css.css khoá .xgb-booking ở max-width:430px và margin:0 auto (bản dùng nổi
trên slider). Ở đây form là một cột của lưới nên phải cho nó tràn hết cột,
nếu không mép phải hụt vào ~15px so với ô lý do bên dưới. */
.xgb-why__form .xgb-booking {
margin: 0;
max-width: none;
width: 100%;
}
@media only screen and (max-width: 991px) {
.xgb-why__intro { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.xgb-why__body,
.xgb-why__form { grid-column: auto; }
}
/* =========================================================================
Sửa vặt bố cục
========================================================================= */
/* Dưới 1170px mobile.css cho #xgb-content về float:none;width:auto, mà khoảng
hở giữa 2 cột vốn sinh ra từ 70% + 28% - mất luôn, nội dung dính sát cột
phải. Chèn lại khoảng hở cho khoảng bề rộng còn hiện cột phải
(dưới 900px cột phải đã ẩn nên không cần). */
@media only screen and (min-width: 901px) and (max-width: 1170px) {
/* Đặt khoảng hở lên CỘT PHẢI chứ không phải margin-right của cột nội dung:
#xgb-content có overflow:hidden nên nó là một khối BFC tự co lại để né
cột nổi bên phải - phần co đó lớn hơn 24px nên margin-right không có tác
dụng gì. Cho float thêm margin-left thì khối BFC né rộng ra đúng 24px. */
#xgb-aside { margin-left: 24px; }
}
/* Logo trên mobile: css.css chỉ đặt padding-top:12px, không có padding dưới
nên khoảng trắng trên/dưới lệch nhau. */
@media only screen and (max-width: 900px) {
/* mobile.css chỉ đặt padding-bottom:20px cho .xgb-header, không có padding
trên -> logo cách mép trên 12px (của chính ảnh) mà cách mép dưới 12+20
= 32px. Cho đối xứng, cộng với 12px của ảnh thành 20/20. */
.xgb-header { padding: 0.5rem 0 /*px:8px 0*/; }
/* Thẻ bọc logo là inline-block nên nằm trên một dòng chữ, và dòng đó
chừa sẵn ~4px cho phần chân chữ ở dưới. Cho thành block là hết. */
.xgb-logo a { display: block; }
.xgb-logo img {
padding: 0.75rem 0 /*px:12px 0*/;
height: auto;
max-height: 88px;
display: block;
margin: 0 auto;
}
}
/* =========================================================================
Bảng giá cước: các ô luôn cao bằng nhau, chữ canh giữa
Bản gốc cho float 19.6% nên chiều cao mỗi ô do nội dung quyết định:
ô "Giá trên tuyến Nội Bài - Hà Nội" có nhãn 4 dòng nên cao hơn hẳn và tụt
xuống lệch hàng - đúng kiểu lỗi đã sửa ở khối tin tức.
Đổi sang lưới: mỗi ô là một ô lưới nên tự kéo cao bằng nhau, và nếu admin
thêm mục thứ 6 trở đi thì grid-auto-rows:1fr giữ cho các HÀNG cũng cao
bằng nhau, không phải sửa lại luật.
========================================================================= */
.xgb-pricing ul {
display: flex;
flex-wrap: wrap;
/* Hàng cuối thiếu ô thì cụm ô còn lại nằm GIỮA màn hình chứ không dồn về
trái. Đây là lý do dùng flex chứ không dùng lưới: lưới luôn ghim ô vào
cột nên hàng cuối lệch hẳn sang trái. */
justify-content: center;
align-items: stretch; /* mọi ô trong cùng một hàng cao bằng nhau */
gap: 8px;
overflow: visible; /* gốc để hidden để bọc float, nay không còn float */
}
.xgb-pricing ul li,
.xgb-pricing ul li:nth-child(0n+5) {
float: none;
margin-right: 0;
/* 5 ô một hàng trên máy tính; trừ đi 4 khoảng hở 8px */
flex: 0 0 calc((100% - 4 * 8px) / 5);
/* min-width:0 cho phép ô co nhỏ hơn nội dung. Thiếu dòng này thì chữ dài
đẩy tràn ra ngoài viền - "Dưới 10 km" từng bị cắt cụt ở mép phải. */
min-width: 0;
display: flex;
}
/* Chuỗi flex phải liền mạch từ xuống tới nhãn/giá, đứt một khâu là
chiều cao không truyền xuống được. */
.xgb-pricing ul li .xgb-price,
.xgb-pricing ul li .xgb-price .xgb-price__inner {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
/* Nhãn cao cố định để dải xanh của 5 ô bằng nhau tăm tắp; chữ canh giữa cả
hai chiều nên nhãn 1 dòng hay 4 dòng đều nằm giữa dải. */
.xgb-pricing ul li .xgb-price .xgb-price__label,
.xgb-pricing ul li:nth-child(0n+5) .xgb-price__label {
display: flex;
align-items: center;
justify-content: center;
height: 4.375rem /*px:70px*/;
padding: 0.5rem 0.625rem /*px:8px 10px*/;
line-height: 1.3;
}
/* Phần giá ăn hết chỗ còn lại rồi tự canh giữa - ô nào cũng vậy nên nhìn
thẳng hàng theo cả hàng ngang. */
.xgb-pricing ul li .xgb-price .xgb-price__value {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 1.125rem 0.5rem /*px:18px 8px*/;
line-height: 1.35;
}
/* Chuỗi giá kiểu "15.000đ/km" không có dấu cách nên không xuống dòng được;
cột hẹp quá là chữ tràn ra rồi bị .xgb-price{overflow:hidden} cắt cụt hai
đầu. Cho phép ngắt giữa từ làm lưới an toàn cuối cùng. */
.xgb-pricing ul li .xgb-price .xgb-price__label,
.xgb-pricing ul li .xgb-price .xgb-price__value {
overflow-wrap: anywhere;
}
@media only screen and (max-width: 900px) {
.xgb-pricing ul { gap: 5px; }
.xgb-pricing ul li .xgb-price .xgb-price__label,
.xgb-pricing ul li:nth-child(0n+5) .xgb-price__label {
height: 4.875rem /*px:78px*/;
padding: 0.3125rem 0.25rem /*px:5px 4px*/;
line-height: 1.25;
}
.xgb-pricing ul li .xgb-price .xgb-price__value { padding: 0.75rem 0.25rem /*px:12px 4px*/; }
}
/* Dưới 600px giữ 5 cột thì mỗi cột chỉ còn ~65px, không đủ cho một dòng
"15.000đ/km" ở cỡ chữ đọc được. Hạ xuống 3 cột: cột rộng ~108px, chữ vào
gọn một dòng. Hàng cuối thừa một ô trống, chấp nhận được - hơn hẳn việc
cắt cụt mất chữ số. grid-auto-rows:1fr giữ hai hàng cao bằng nhau. */
@media only screen and (max-width: 600px) {
/* 3 ô một hàng; 5 mục -> hàng cuối 2 ô, justify-content:center ở trên lo
phần canh giữa. */
.xgb-pricing ul li,
.xgb-pricing ul li:nth-child(0n+5) {
flex: 0 0 calc((100% - 2 * 5px) / 3);
}
/* Cột rộng hơn nên nhãn dài nhất chỉ còn ~4 dòng: 4 x 15px = 60px */
.xgb-pricing ul li .xgb-price .xgb-price__label,
.xgb-pricing ul li:nth-child(0n+5) .xgb-price__label {
height: 3.875rem /*px:62px*/;
}
}
/* =========================================================================
Tiêu đề khối: chữ xanh thương hiệu, gạch chân đỏ
css.css để cả chữ lẫn gạch chân màu nâu đất #af7313 của mẫu cũ. Dòng
".xgb-section h4 { color: var(--xgb-blue) }" ở đầu file này KHÔNG với tới
.xgb-section__heading được vì luật gốc (.xgb-section .xgb-section__heading)
có độ ưu tiên cao hơn - nên phải viết lại đúng mức đó.
========================================================================= */
.xgb-section .xgb-section__heading { color: var(--xgb-blue); }
.xgb-section__heading:before { background: var(--xgb-red); }
/* =========================================================================
Cỡ chữ trên di động
Toàn bộ dự án khai cỡ chữ bằng px (217 chỗ, không chỗ nào dùng rem/em),
gốc là body{font-size:14px}. Vài chỗ trên di động tụt xuống 10-12px, nhỏ
hơn ngưỡng đọc thoải mái trên điện thoại. Nâng riêng những chỗ đó lên,
không đụng tới phần còn lại.
========================================================================= */
@media only screen and (max-width: 900px) {
/* Bảng giá: gốc 13px/11px, xuống 480px còn 10px/10px */
.xgb-pricing ul li .xgb-price .xgb-price__label { font-size: 0.75rem /*px:12px*/; }
.xgb-pricing ul li .xgb-price .xgb-price__value { font-size: 0.8125rem /*px:13px*/; }
/* Nhãn trên thanh thông tin chạy ngang: gốc 12px */
.xgb-strip__item .xgb-strip__label { font-size: 0.8125rem /*px:13px*/; }
/* Dòng nhỏ trên tiêu đề khối giới thiệu: gốc 13px */
.xgb-why__eyebrow { font-size: 0.875rem /*px:14px*/; }
}
@media only screen and (max-width: 480px) {
/* mobile.css hạ tiếp xuống 10px ở khoảng này, giữ nguyên mức 12/13 ở trên */
.xgb-pricing ul li .xgb-price .xgb-price__label { font-size: 12px; }
.xgb-pricing ul li .xgb-price .xgb-price__value { font-size: 0.75rem /*px:12px*/; }
}
/* =========================================================================
Icon trong khối "Tại sao chọn chúng tôi": nâu đất -> xanh thương hiệu
Mấy ảnh icon admin tải lên (tintuc-*.png) là hình một màu #af7313 đặc trên
nền trong suốt - màu của mẫu cũ. Không sửa file ảnh của khách; thay vào đó
dùng chính ảnh làm MẶT NẠ rồi tô màu thương hiệu bên dưới, ra đúng màu chứ
không phải xấp xỉ như cách xoay màu bằng filter.
Kèm giả định: icon là hình một màu. Nếu sau này admin tải lên một ảnh nhiều
màu thì nó sẽ bị tô phẳng thành một màu xanh.
========================================================================= */
.xgb-reason__glyph {
width: 28px;
height: 1.75rem /*px:28px*/;
background-color: var(--xgb-blue);
-webkit-mask: var(--xgb-reason-anh) no-repeat center / contain;
mask: var(--xgb-reason-anh) no-repeat center / contain;
/* Phóng nhẹ lúc rê chuột, chuyển từ thẻ ![]()
cũ sang */
transform: translateZ(0) scale(1);
will-change: transform;
backface-visibility: hidden;
transition: transform var(--xgb-dur-long) var(--xgb-ease-out),
background-color var(--xgb-dur-short) var(--xgb-ease-out);
}
.xgb-reason:hover .xgb-reason__glyph {
transform: translateZ(0) scale(1.12);
background-color: var(--xgb-red);
}
/* Cỡ chữ cho ô nhập - xem tools/doi-font-sang-rem.php */
input, select, textarea, button { font-size: 0.8333333rem; }