/* SINH TỰ ĐỘNG bằng tools/doi-font-sang-rem.php - bản .rem của xgb-form.css */ /* =========================================================================== Bổ sung cho form đặt xe - KHÔNG sửa css.css gốc để sau này còn đối chiếu. CSS gốc (css.css) chỉ style cho input[type="text"] và input[type="date"]: .xgb-booking .xgb-booking__form .xgb-field input[type="text"], .xgb-booking .xgb-booking__form .xgb-field input[type="date"] { ... } nên ô điện thoại (type="tel") và ô chọn loại xe (select) rơi về style mặc định của trình duyệt -> thấp hơn hẳn các ô khác. =========================================================================== */ /* 1. Ô điện thoại (type="tel") và email dùng chung style với ô text. Giữ type="tel" để điện thoại bật bàn phím số, không hạ về type="text". */ .xgb-booking .xgb-booking__form .xgb-field input[type="tel"], .xgb-booking .xgb-booking__form .xgb-field input[type="email"] { box-sizing: border-box; width: 100%; height: 2.5rem /*px:40px*/; line-height: 2.5rem /*px:40px*/; padding: 0 0.9375rem /*px:0 15px*/; margin: 0; border: 1px solid #ddd; border-radius: 3px; background: #fff; color: #000; box-shadow: none; } /* Ô chọn loại xe cũng đang thấp hơn 2px so với ô ngày */ .xgb-booking .xgb-booking__form .xgb-field select.xgb-control--select { box-sizing: border-box; height: 2.5rem /*px:40px*/; line-height: 2.5rem /*px:40px*/; padding: 0 0.75rem /*px:0 12px*/; margin: 0; } /* 2. Checkbox: canh giữa ô tick với dòng chữ theo chiều dọc */ .xgb-booking .xgb-booking__form .xgb-check-row { display: flex; align-items: center; flex-wrap: wrap; } .xgb-booking .xgb-booking__form .xgb-control--check .xgb-check { display: flex; align-items: center; gap: 6px; margin: 0; } .xgb-booking .xgb-booking__form .xgb-control--check input[type="checkbox"] { flex: 0 0 auto; margin: 0; vertical-align: middle; } .xgb-booking .xgb-booking__form .xgb-control--check .xgb-check__label { line-height: 1; } /* 3. Điểm đi / Điểm đến: nhãn bên trái cao 42px còn ô input bên phải 40px. CSS gốc: .xgb-field > label { width: 75px; height: 40px } dùng content-box, cộng thêm padding-left 38px (chỗ icon) và viền 1px -> tổng cao 42px. KHÔNG đổi sang border-box: làm vậy 38px padding sẽ ăn vào 75px chiều rộng, chỉ còn 37px cho chữ và nhãn tiếng Anh bị cắt. Chỉ hạ height xuống 38px để 38 + 2 viền = 40px, bằng đúng ô input bên phải. */ .xgb-booking .xgb-booking__form .xgb-field.xgb-field--inline label { height: 2.375rem /*px:38px*/; line-height: 2.375rem /*px:38px*/; margin: 0; white-space: nowrap; } /* Ô chọn "Loại xe": css.css đặt -webkit-appearance:none nên mũi tên sổ xuống của trình duyệt biến mất, nhìn y hệt ô nhập chữ, khách không biết bấm được. Vẽ lại mũi tên bằng SVG nhúng thẳng vào background (không thêm request). */ .xgb-booking .xgb-booking__form .xgb-field select.xgb-control--select, .xgb-contact__form select { padding-right: 2.125rem /*px:34px*/; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 8px; cursor: pointer; } /* Ô chọn ngày trên iOS. css.css đặt line-height:40px cho input[type=date]; Safari trên iOS lấy line-height đó áp cho phần hiển thị ngày bên trong nên chữ bị đẩy khỏi vùng nhìn thấy - ra một ô trắng trơn, khách không biết đây là ô chọn ngày. Trả line-height về normal và canh phần giá trị sang trái cho thẳng hàng với các ô khác. */ .xgb-booking .xgb-booking__form .xgb-field input[type="date"], .xgb-booking .xgb-booking__form .xgb-field .xgb-field__date input { line-height: normal; -webkit-appearance: none; appearance: none; text-align: left; /* Trình duyệt để input[type=date] font monospace, nhìn khác hẳn mấy ô còn lại (Arial). Ép về cùng một font cho đồng bộ. */ font-family: Arial, Helvetica, sans-serif; } /* Icon lịch: vẽ bằng SVG nền, KHÔNG dùng icon mặc định của trình duyệt. Icon mặc định bám ngay sau phần hiển thị ngày (rộng bằng nội dung) nên không bao giờ nằm sát mép phải, không cách nào canh cho bằng mũi tên ô "Loại xe". Vẽ nền thì đặt được chính xác `right 12px center` - đúng bằng mũi tên đó. Icon thật vẫn giữ nhưng cho trong suốt và trải rộng vùng bấm, để bấm vào là vẫn mở được bảng chọn ngày của trình duyệt. */ .xgb-booking .xgb-booking__form .xgb-field input[type="date"] { padding-right: 2.125rem /*px:34px*/; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555' stroke-width='1.3'%3E%3Crect x='1.6' y='2.9' width='12.8' height='11.5' rx='1.6'/%3E%3Cpath d='M1.6 6.4h12.8M5.2 1.6v2.6M10.8 1.6v2.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px 15px; } .xgb-booking .xgb-booking__form .xgb-field input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; right: 0; top: 0; width: 34px; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; } .xgb-booking .xgb-booking__form .xgb-field input[type="date"]::-webkit-date-and-time-value { text-align: left; line-height: normal; min-height: 1.2em; } /* Chữ gợi ý "Ngày đặt xe" khi chưa chọn ngày - CHỈ trên iOS. Lớp .xgb-date--trong do js/xgb-submit-state.js gắn/gỡ theo giá trị ô. Vì sao khoanh vùng: Chrome, Firefox, Edge, Safari trên máy tính và Chrome trên Android đều tự ghi sẵn dd/mm/yyyy trong ô rỗng. Vẽ thêm chữ gợi ý đè lên là thành hai lớp chữ chồng nhau - bấm vào từng ô dd / mm / yyyy thì con trỏ nằm dưới chữ gợi ý, nhìn rất rối. Chỉ iOS mới để ô trống trơn. @supports (-webkit-touch-callout: none) đúng là cái lọc cần: thuộc tính này chỉ WebKit trên iOS mới nhận. Blink (Chrome máy tính lẫn Android) trả false, Safari trên macOS cũng không nhận - đã đo bằng CSS.supports(). Mọi trình duyệt trên iOS đều chạy WebKit nên Chrome/Firefox bản iOS cũng vào nhánh này, đúng ý vì chúng cùng để ô trống. */ @supports (-webkit-touch-callout: none) { .xgb-booking .xgb-booking__form .xgb-field input[type="date"].xgb-date--trong { position: relative; } /* Chữ gợi ý đặt TUYỆT ĐỐI, không nằm trong luồng. Để nó chảy theo luồng thì trên ô hẹp nó chiếm hết bề ngang và đẩy icon lịch rơi xuống dòng dưới. Tách ra khỏi luồng thì icon giữ nguyên vị trí bên phải, chữ gợi ý dài quá chỉ bị cắt bằng dấu ba chấm. */ .xgb-booking .xgb-booking__form .xgb-field input[type="date"].xgb-date--trong::before { content: attr(placeholder); position: absolute; left: 15px; right: 34px; top: 50%; transform: translateY(-50%); color: #8d8d8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .xgb-booking .xgb-booking__form .xgb-field input[type="date"].xgb-date--trong::-webkit-datetime-edit { color: transparent; } } /* Thông báo lỗi validate dưới mỗi ô */ .xgb-booking .xgb-booking__form .xgb-field__error, .xgb-contact__form .xgb-field__error { display: block; margin-top: 4px; color: #d33; font-size: 0.75rem /*px:12px*/; } /* Thông báo gửi thành công */ .xgb-alert--success { margin: 10px 0; padding: 0.625rem 0.875rem /*px:10px 14px*/; border-radius: 3px; background: #e7f6e7; border: 1px solid #b7e0b7; color: #256d25; font-size: 0.8125rem /*px:13px*/; } /* =========================================================================== Chuyển ngôn ngữ bằng icon cờ Một khối dùng cho 3 chỗ (xem partials/lang-switch.blade.php): .xgb-lang--nav thanh nav máy tính .xgb-lang--bar thanh hamburger di động .xgb-lang--drawer ngăn kéo menu di động =========================================================================== */ .xgb-lang { display: flex; align-items: center; gap: 8px; } .xgb-lang__item { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; line-height: 0; opacity: .55; transition: opacity .15s; } .xgb-lang__item:hover, .xgb-lang__item.is-active { opacity: 1; } .xgb-lang__item.is-active img { outline: 1px solid rgba(255, 255, 255, .85); } .xgb-lang img { display: block; width: 22px; height: 15px; } /* --- Thanh nav máy tính --- */ #xgb-nav__list > li.xgb-nav__lang { float: right; display: flex; align-items: center; height: 2.75rem /*px:44px*/; padding: 0 0.9375rem /*px:0 15px*/; background: none; border: 0; } /* --- Thanh hamburger di động: nút tìm kiếm rồi tới cờ, nằm bên phải --- */ .xgb-burger-bar__end { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; } .xgb-burger-bar .xgb-lang--bar { position: static; transform: none; } /* =========================================================================== Hộp thoại tìm kiếm trên di động Cùng một khối .xgb-search dùng cho cả hai cỡ màn hình: máy tính - một hàng ngang dưới thanh nav, như bản gốc di động - thu về nút kính lúp ở thanh hamburger, bấm mới bung hộp thoại Lớp .xgb-tim-mo do đoạn script trong partials/formsearch.blade.php gắn lên thẻ . =========================================================================== */ .xgb-search-toggle { display: none; /* máy tính không cần nút này */ align-items: center; justify-content: center; width: 30px; height: 1.875rem /*px:30px*/; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; } .xgb-search__backdrop { display: none; } @media only screen and (max-width: 900px) { .xgb-search-toggle { display: flex; } /* mobile.css bật .xgb-search{display:block} ở khoảng này, nên phải !important để giấu lại - không thì ô tìm kiếm vẫn chiếm nguyên một hàng như cũ. */ .xgb-search { display: none !important; } html.xgb-tim-mo .xgb-search { display: block !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* Widget hotline nổi chạy ở 100000-100002 (libs/arcontactus.css) nên hộp thoại phải cao hơn, không thì 3 nút tròn đè lên nền mờ. */ z-index: 100010; margin: 0; } html.xgb-tim-mo .xgb-search__backdrop { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 0, 0, .5); cursor: pointer; } /* Hộp thoại neo lên gần đỉnh màn hình: bàn phím ảo bật lên chiếm nửa dưới, để giữa thì ô nhập bị che. */ html.xgb-tim-mo .xgb-search .xgb-search__row { position: absolute; top: 64px; left: 12px; right: 12px; height: auto; padding: 0.75rem /*px:12px*/; border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); } html.xgb-tim-mo #xgb-search-input { /* mobile.css để width:100% mà không đặt box-sizing, nên phần padding cộng thêm ra ngoài -> ô rộng hơn hộp thoại 42px và thò ra bên phải. */ box-sizing: border-box; height: 2.625rem /*px:42px*/; padding-right: 3.25rem /*px:52px*/; /* chừa chỗ cho nút kính lúp */ font-size: 1rem /*px:16px*/; /* dưới 16px là iOS tự phóng to trang khi bấm vào ô */ } /* Canh giữa theo chiều dọc bằng 50% + lùi lại nửa chiều cao, chứ không đặt top cố định: đặt tay thì hụt 4px (trên 6px, dưới 2px) và mỗi lần đổi chiều cao ô nhập lại lệch tiếp. .xgb-search__row là khối định vị gần nhất, đệm trên/dưới của nó bằng nhau nên giữa hàng cũng là giữa ô nhập. */ html.xgb-tim-mo .xgb-search .xgb-search__submit-icon { top: 50%; transform: translateY(-50%); right: 18px; height: 2.125rem /*px:34px*/; width: 40px; border-radius: 4px; } } /* --- Ngăn kéo menu di động --- Nền ngăn kéo màu TRẮNG nên viền trắng của bản dùng trên nav sẽ vô hình: đường kẻ và viền đánh dấu ở đây phải dùng màu tối. */ /* Khối cờ nằm DƯỚI mục cuối của menu nên đường kẻ chuyển lên TRÊN */ .xgb-lang--drawer { gap: 14px; padding: 0.875rem /*px:14px*/; border-top: 1px solid #e2e2e2; } .xgb-lang--drawer img { width: 30px; height: 20px; } /* Cờ chưa chọn mờ hẳn để nhìn ra ngay cái nào đang dùng */ .xgb-lang--drawer .xgb-lang__item { opacity: .2; } .xgb-lang--drawer .xgb-lang__item:hover { opacity: .75; } .xgb-lang--drawer .xgb-lang__item.is-active { opacity: 1; } .xgb-lang--drawer .xgb-lang__item.is-active img { outline: 2px solid var(--xgb-blue, #0a4a9b); outline-offset: 1px; } /* Không cho menu con của mục ngôn ngữ (không có) chiếm chỗ */ #xgb-nav__list > li.xgb-nav__lang ul { display: none !important; } /* =========================================================================== Thẻ bài trong trang danh sách css.css đặt .xgb-card__excerpt cao cố định 79px - đó là CHỦ Ý để mọi thẻ cao bằng nhau, không bị so le. Vậy nên KHÔNG đổi thành height:auto (làm vậy /tin-tuc sẽ nhảy lung tung 182-262px). Vấn đề thẻ ở /dich-vu bị hụt 79px trống là do vẫn render

rỗng - đã xử lý ở blade: không có mô tả thì không in thẻ ra. Ở đây chỉ cắt phần chữ tràn để chiều cao luôn đúng 79px. =========================================================================== */ .xgb-card-grid .xgb-card .xgb-card__excerpt { overflow: hidden; } /* =========================================================================== Typography cho nội dung do admin nhập (bài viết, trang tĩnh, dịch vụ, loại xe) Nội dung cũ dán từ Word/CKEditor nên nhiều đoạn không có style, rơi về mặc định của css.css (font 13px, line-height ~1.2) -> chữ bé và dính hàng. Cách áp: đặt mặc định ở khối cha rồi cho các thẻ con `inherit`. Thẻ nào admin gán style trực tiếp (style="font-size:20px") vẫn thắng vì inline style có độ ưu tiên cao hơn, đúng yêu cầu "tôn trọng style gán từ admin". KHÔNG dùng !important vì như vậy sẽ đè luôn style của admin. =========================================================================== */ /* Khối giới thiệu ở trang chủ (.xgb-why__lead / .xgb-why__body) cũng là nội dung admin dán vào nên áp chung một bộ quy tắc. */ .xgb-entry__content, .xgb-why__lead, .xgb-why__body { font-size: 1rem /*px:16px*/; line-height: 1.6; color: #333; } .xgb-entry__content p, .xgb-why__lead p, .xgb-why__body p, .xgb-entry__content li, .xgb-why__lead li, .xgb-why__body li, .xgb-entry__content td, .xgb-why__lead td, .xgb-why__body td, .xgb-entry__content th, .xgb-why__lead th, .xgb-why__body th, .xgb-entry__content div, .xgb-why__lead div, .xgb-why__body div, .xgb-entry__content span, .xgb-why__lead span, .xgb-why__body span, .xgb-entry__content strong, .xgb-why__lead strong, .xgb-why__body strong, .xgb-entry__content em, .xgb-why__lead em, .xgb-why__body em, .xgb-entry__content blockquote, .xgb-why__lead blockquote, .xgb-why__body blockquote { font-size: inherit; line-height: inherit; } /* Tiêu đề trong bài: giữ cỡ chữ riêng nhưng phải thoáng khi xuống hàng */ .xgb-entry__content h1, .xgb-entry__content h2, .xgb-entry__content h3, .xgb-entry__content h4, .xgb-entry__content h5, .xgb-entry__content h6 { line-height: 1.4; margin: 18px 0 10px; } .xgb-entry__content p, .xgb-why__lead p, .xgb-why__body p { margin: 0 0 12px; } .xgb-entry__content ul, .xgb-entry__content ol, .xgb-why__body ul, .xgb-why__body ol { margin: 0 0 12px; padding-left: 1.5rem /*px:24px*/; } .xgb-entry__content li { margin-bottom: 6px; } /* Ảnh trong nội dung admin: co theo bề ngang thì chiều cao phải co theo. css.css và mobile.css chỉ đặt max-width (mobile.css còn kèm !important) mà không đụng tới height. Ảnh nào có sẵn height - 9 ảnh dùng thuộc tính height="NNN", 9 ảnh dùng style="height:NNNpx" - bị ép hẹp chiều ngang nhưng giữ nguyên chiều cao nên kéo dãn méo hình. Dùng !important vì bề ngang đã bị ép responsive bằng !important rồi; để height cố định ở đó thì chắc chắn méo, không phải lựa chọn thiết kế nào cả. Chỉ áp trong khung nội dung admin, không đụng ảnh của giao diện. */ .xgb-entry__content img, .xgb-entry img, .detail-noidung img, .xgb-why__body img { max-width: 100%; height: auto !important; } /* Tiêu đề trang / bài dài bị xuống hàng cũng cần giãn dòng */ .xgb-page-title h1, .xgb-entry-title h1, .xgb-card__title, .xgb-related h3 { line-height: 1.6; } /* =========================================================================== Icon mạng xã hội vẽ bằng SVG (Zalo, TikTok, WhatsApp) FontAwesome 4.2.0 của site không có 3 icon này nên dựng bằng SVG inline (xem resources/views/xegiabao/partials/social-icon.blade.php). Ở đây chỉ lo cho SVG nằm vừa ô 38x38 và có hover đổi nền y hệt các icon FontAwesome khác. =========================================================================== */ .xgb-social i.xgb-svg-icon { display: flex; align-items: center; justify-content: center; } .xgb-social i.xgb-svg-icon svg { width: 15px; height: 0.9375rem /*px:15px*/; display: block; } /* .xgb-icon-cut = phần "khoét" bên trong icon (chữ Zalo trong bong bóng). Nó phải mang màu NỀN chứ không phải màu nét, nếu không sẽ chìm mất. Ở header: nền trắng khi thường, nền xanh Zalo khi hover. */ .xgb-social .xgb-icon-cut { fill: #fff; } .xgb-social a:hover i.xgb-zalo .xgb-icon-cut { fill: #0068ff; } .xgb-social a:hover i.xgb-zalo { background: #0068ff; } .xgb-social a:hover i.xgb-tiktok { background: #010101; } .xgb-social a:hover i.xgb-whatsapp { background: #25d366; } /* =========================================================================== Viền khi bấm vào ô nhập Trình duyệt (Chrome/Edge) vẽ outline mặc định dày 2-3px màu xanh dương quanh ô đang focus, đè lên bo góc của form nên trông rất nặng. Thay bằng viền 1px theo màu thương hiệu (biến khai báo trong xgb-theme.css). LƯU Ý ĐỘ ƯU TIÊN: css.css đã có .xgb-booking .xgb-booking__form .xgb-field input[type=text]{border:1px solid #ddd} -> 4 lớp + 1 thuộc tính. Selector focus phải bằng hoặc hơn mức đó, nếu chỉ viết `.xgb-booking .xgb-booking__form input:focus` (3 lớp) thì border #ddd vẫn thắng và không thấy viền cam - đúng lỗi đã gặp. KHÔNG dùng `outline: none` trơ trọi: mất outline là mất luôn dấu hiệu focus cho người dùng bàn phím. Ở đây bỏ outline nhưng thay bằng viền thấy rõ. =========================================================================== */ .xgb-booking .xgb-booking__form .xgb-field input[type="text"]:focus, .xgb-booking .xgb-booking__form .xgb-field input[type="date"]:focus, .xgb-booking .xgb-booking__form .xgb-field input[type="tel"]:focus, .xgb-booking .xgb-booking__form .xgb-field input[type="email"]:focus, .xgb-booking .xgb-booking__form .xgb-field select:focus, .xgb-booking .xgb-booking__form .xgb-field textarea:focus, .xgb-booking .xgb-field input.xgb-contact__input:focus, .xgb-booking .xgb-field textarea:focus, .xgb-contact__form .xgb-field input:focus, .xgb-contact__form .xgb-field textarea:focus, .xgb-search__inner input:focus { outline: none; border: 1px solid var(--xgb-blue); box-shadow: none; } /* Ô "Điểm đi" / "Điểm đến" ghép liền với nhãn xám bên trái nhưng vẫn giữ đủ 4 cạnh viền cho đồng bộ với các ô khác - chỉ bo vuông 2 góc trái để không lệch với nền bo góc của nhãn (xem css.css § .xgb-field--inline). */ /* Nút và checkbox: viền focus vẽ vào BÊN TRONG (inset) chứ không dùng outline. .xgb-field có overflow:hidden (mẹo clear float của nhãn trong css.css) nên outline + outline-offset vẽ ra ngoài hộp bị khung cắt mất - đúng lỗi ô tick "Hai chiều" nằm sát mép trái bị mất viền. box-shadow inset nằm trong hộp nên không bao giờ bị cắt, mà vẫn thấy rõ dấu hiệu focus cho người dùng bàn phím. */ .xgb-booking .xgb-booking__form .xgb-field input[type="checkbox"]:focus, .xgb-booking .xgb-booking__form button#xgb-swap-btn:focus { outline: none; box-shadow: inset 0 0 0 2px var(--xgb-blue); } /* Nút gửi đã là nền xanh - vòng xanh lồng vào trong sẽ không thấy gì, dùng viền trắng cho nổi trên nền xanh. */ .xgb-booking .xgb-booking__form input[type="submit"]:focus, .xgb-booking .xgb-booking__form button.xgb-control--submit:focus, .xgb-booking .xgb-contact__button:focus, .xgb-contact__form button.xgb-contact__button:focus { outline: none; box-shadow: inset 0 0 0 2px #fff; } /* =========================================================================== Nút gửi form: trạng thái "đang xử lý" =========================================================================== */ .xgb-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .xgb-submit__spinner { display: none; } .xgb-submit.is-loading { opacity: .75; cursor: progress; } .xgb-submit.is-loading .xgb-submit__spinner { display: inline-block; width: 14px; height: 0.875rem /*px:14px*/; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: xgb-spin .7s linear infinite; } @keyframes xgb-spin { to { transform: rotate(360deg); } } /* Nút đặt xe dùng lại đúng dáng của cũ trong css.css: đổi sang