/* Dịch bằng dich-lop-khoac.py từ bo-khoac-elementor.css.
* Bám lớp thiết kế của dự án, không bám lớp của trình dựng nào.
* Sửa thì sửa bảng ánh xạ trong công cụ rồi dịch lại. */
/* ===================================================================
* TRANG HẸP: khuôn dùng chung cho các trang một thông điệp
*
* Trang cảm ơn (/cam-on) và trang 404 cùng một hình dạng: vòng tròn biểu
* tượng, một câu chính, một câu dẫn, rồi lối đi tiếp. Viết chung ở đây, phần
* riêng của từng trang để dưới cùng.
*
* Trang hẹp bọc nội dung trong 680px thay vì 1200px như trang chủ. Trên
* Elementor không lồng .wrap của bản mẫu được (xem đầu trang-chu.css), nên
* lớp .su-hep__wrap tự khai bề rộng đó.
*
* Mọi giá trị lấy từ tokens.css. Cỡ chữ và màu chữ KHÔNG nằm ở đây: chúng là
* việc của Global Styles, theo chốt 22/09/2026 (sổ tay mục 22).
* =================================================================== */ .hop.su-hep{ padding: var(--section-y) 0; gap: normal; }/* Quy tắc chung giống trang chủ: container lồng trong không ăn đệm của Kit. */
.hop.su-hep .hop{ padding: 0; gap: 0; }.hop.su-hep .hop.su-hep__wrap{
/* Khung 1200 nhu moi trang khac, de le trai thang hang voi header va chan
trang. Truoc 23/09/2026 cho nay la 680 CAN GIUA nen le trai 460 trong khi
logo o 240 - nhin ro chenh. Xem luat chia luoi trong README ban mau. */
max-width: var(--container); width: 100%; margin-inline: auto;
padding: 0 var(--margin);
}/* Noi dung bo trong 760, CAN TRAI. */
.hop.su-hep .hop.su-hep__trong{ max-width: var(--container-narrow); }/* ---------- Vòng tròn biểu tượng 64px ----------
Container rỗng nên tốn 0 widget, giống ô ngành ở trang chủ. */
.hop.su-hep .hop.su-hep__ic{
width: 64px; height: 64px; flex: none;
display: grid; place-items: center; padding: 0;
/* Elementor đặt flex-direction: column và gap: 0 cho mọi .e-con.
Lưới một ô nên không đổi hình, nhưng trả về mặc định cho khớp phép đo. */
flex-direction: row; gap: normal;
border-radius: var(--radius-pill);
}/* Bốn khai báo bắt buộc vì Elementor đã chiếm .e-con::before (mục 15.1). */
.hop.su-hep__ic::before{
content: ""; position: static; width: 32px; height: 32px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: 32px 32px; mask-size: 32px 32px;
}/* Hai sắc thái. Nền và chữ đi cùng nhau nên khai chung một chỗ. */
.hop.su-hep .hop.su-hep__ic--ok{
background: var(--success-subtle); color: var(--success);
}.hop.su-hep__ic--ok::before{
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}.hop.su-hep .hop.su-hep__ic--tim{
background: var(--accent-subtle); color: var(--accent-text);
}.hop.su-hep__ic--tim::before{
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}/* ---------- Tiêu đề và câu dẫn ----------
Lề trên đặt lên VỎ widget, không lên thẻ chữ bên trong (mục 15.2). */
.su-hep .su-hep__h1{ margin-top: var(--space-6); }.su-hep .su-hep__lead{ margin-top: 12px; }/* ---------- Hàng nút chính, và khối dưới gạch ngang ---------- */
.hop.su-hep .hop.su-hep__nut-chinh{
margin-top: var(--space-8);
display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;
}.hop.su-hep .hop.su-hep__duoi{
margin-top: var(--space-8); padding-top: var(--space-6);
border-top: var(--border-w-thin) solid var(--border);
}.hop.su-hep .hop.su-hep__nut{
margin-top: var(--space-4);
display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;
}/* ---------- Nhãn nút gọi đổi theo bề rộng ----------
Bộ chuẩn đổi "Gọi 0902 066 692" thành "Gọi ngay" dưới 400px bằng JavaScript
và matchMedia. Elementor lọc sạch thẻ HTML trong chữ nút nên không nhét hai
nhãn vào một widget được; tách hai widget, ẩn hiện bằng CSS (mục 26.3).
Mốc 400 là của bộ chuẩn, không phải mốc breakpoint của Elementor. */
.su-hep__nut .chi-hep, .su-camon__nut .chi-hep{ display: none; }
@media (max-width: 399px) {.su-hep__nut .chi-rong, .su-camon__nut .chi-rong{ display: none; }.su-hep__nut .chi-hep, .su-camon__nut .chi-hep{ display: block; }
}/* ===================================================================
* RIÊNG TRANG CẢM ƠN: khuôn mới 24/09/2026
*
* Khuôn cũ (một cột chữ trong 760, ba thẻ mốc giờ xếp dọc) đã bỏ. Dũng báo bố
* cục chưa được; đo trên ảnh chụp cả trang ở 1440 thì nửa phải trang trống
* trơn, và chân trang nặng hơn nội dung.
*
* Khuôn mới ba khối: dải tối hai cột, dòng thời gian ngang, ba lối đi tiếp.
* Trang cảm ơn từ đây KHÔNG dùng .su-hep__* nữa; phần trên tệp này giờ chỉ
* phục vụ trang 404.
*
* Cỡ chữ và màu chữ trên nền sáng là việc của Global Styles (chốt 22/09). Màu
* chữ trong dải tối thì khai ở đây, vì nó phụ thuộc nền - đúng cách
* trang-chu.css đang làm cho hero.
* =================================================================== */ /* ---------- Dải tối ----------
Dùng lại .hero-sec của trang-chu.css: nền tỏa tròn, vệt hổ phách, chevron.
Tệp đó nạp toàn site nên không phải chép lại luật nào. */
.hop.su-camon{ padding: 0; gap: normal; }.hop.su-camon .hop{ padding: 0; gap: 0; }.hop.su-camon .hop.su-camon__wrap{
max-width: var(--container); width: 100%; margin-inline: auto;
padding: 0 var(--margin); position: relative; z-index: 1;
}/* Hai cột. Elementor đặt display:flex cho mọi .e-con nên phải khai thẳng grid. */
.hop.su-camon .hop.su-camon__lo{
display: grid; grid-template-columns: 1fr; gap: var(--space-10);
align-items: center; padding: var(--space-16) 0;
}
@media (min-width: 900px) {.hop.su-camon .hop.su-camon__lo{
grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12);
padding: var(--space-20) 0;
}
}.hop.su-camon .hop.su-camon__trai{ display: block; }/* Chip "Đã gửi thành công". Biểu tượng vẽ bằng ::before của thẻ tiêu đề bên
trong widget, không phải của .e-con - .e-con::before Elementor đã chiếm. */
/* Vo widget co theo noi dung: ben ban mau chip la inline-flex nen rong bang
chu. Khong khai thi vo chiem tron be ngang cot.
`display:flex` chu khong de khoi: vo khoi chua mot phan tu inline-flex thi
sinh them nua khoang dan cua dong chu, cao 30,8 thay vi 30. */
.su-camon .su-camon__chip{ width: fit-content; display: flex; }.su-camon .su-camon__chip > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 6px 14px 6px 10px; border-radius: var(--radius-pill);
background: var(--success-subtle); color: var(--success);
}.su-camon .su-camon__chip > :is(h1,h2,h3,h4,h5,h6,p,div,span,a)::before{
content: ""; width: 18px; height: 18px; flex: none;
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: 18px 18px; mask-size: 18px 18px;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}/* Màu chữ trong dải tối. Lề trên đặt lên VỎ widget (mục 15.2). */
.su-camon .su-camon__h1{ margin-top: var(--space-5); }/* Chi con mau. Chieu cao dong va gian chu di duong preset `cmh1`. */
.su-camon .su-camon__h1 > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ color: var(--gray-0); }.su-camon .su-camon__dan{ margin-top: var(--space-4); color: var(--gray-300); max-width: 46ch; }.hop.su-camon .hop.su-camon__nut{
margin-top: var(--space-8);
display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;
}/* Thẻ kính bên phải. Cùng họ với .hero-glass của trang chủ. */
.hop.su-camon .hop.su-camon__the{
background: rgba(255,255,255,.06);
border: var(--border-w-thin) solid rgba(255,255,255,.14);
border-radius: var(--radius-lg); padding: var(--space-8);
backdrop-filter: blur(10px);
}.su-camon .su-camon__nhan > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ color: var(--gray-400); text-transform: uppercase; }.su-camon .su-camon__so{ margin-top: var(--space-3); }.su-camon .su-camon__so > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ color: var(--accent); }.su-camon .su-camon__gio{ margin-top: var(--space-2); color: var(--gray-300); }.hop.su-camon .hop.su-camon__vach{
margin: var(--space-6) 0; height: 1px; min-height: 1px;
background: rgba(255,255,255,.14);
}.su-camon .su-camon__ngoai{ color: var(--gray-400); }/* Biểu tượng đồng hồ trước câu cuối. Widget text-editor bọc
, nên gắn vào
chứ không vào vỏ widget. */
.su-camon .su-camon__ngoai p{ display: flex; gap: var(--space-3); align-items: flex-start; text-wrap: auto; }.su-camon .su-camon__ngoai p::before{
content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: 18px 18px; mask-size: 18px 18px;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}/* ---------- Hai mục nền sáng ---------- */
.hop.su-camon-sang{ padding: var(--section-y) 0 0; gap: normal; }.hop.su-camon-sang .hop{ padding: 0; gap: 0; }.hop.su-camon-sang .hop.su-camon__wrap2{
max-width: var(--container); width: 100%; margin-inline: auto; padding: 0 var(--margin);
}.hop.su-camon-sang .hop.su-camon__dau{ max-width: var(--container-narrow); margin-bottom: var(--space-10); }.su-camon-sang .su-camon__lead{ margin-top: 12px; }/* ---------- Dòng thời gian ----------
Màn rộng: chấm trên đầu mỗi cột, đường nối chạy ngang. Màn hẹp: ray dọc bên
trái. Một bộ mã, hai dáng.
.e-con::before Elementor đã chiếm nên phải khai lại đủ bốn thuộc tính, y như
.su-hep__ic::before ở trên. ::after thì trang-chu.css đã dùng cho chevron của
hero, tức dùng được. */
.hop.su-camon-sang .hop.su-camon__buoc{
display: grid; grid-template-columns: 1fr; gap: var(--space-8);
}
@media (min-width: 768px) {.hop.su-camon-sang .hop.su-camon__buoc{ grid-template-columns: repeat(3, 1fr); }
}.hop.su-camon-sang .hop.su-camon__b{
position: relative; padding-left: var(--space-10); display: block;
}
@media (min-width: 768px) {.hop.su-camon-sang .hop.su-camon__b{ padding-left: 0; padding-top: var(--space-8); }
}.hop.su-camon__b::after{
content: ""; position: absolute; left: 0; top: 3px;
width: 18px; height: 18px; border-radius: var(--radius-pill);
background: var(--nen); border: 3px solid var(--accent); z-index: 1;
}.hop.su-camon__b::before{
content: ""; position: absolute; left: 8px; top: 21px;
bottom: calc(var(--space-8) * -1); right: auto;
width: 2px; height: auto; background: var(--border-strong);
border-radius: 0; opacity: 1; z-index: 0;
}
@media (min-width: 768px) {.hop.su-camon__b::after{ top: 0; }.hop.su-camon__b::before{
left: 18px; top: 8px; bottom: auto;
right: calc(var(--space-8) * -1); width: auto; height: 2px;
}
}.hop.su-camon-sang .hop.su-camon__b:last-child::before{ display: none; }.su-camon-sang .su-camon__moc > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ color: var(--accent-text); text-transform: uppercase; }.su-camon-sang .su-camon__tieu{ margin-top: var(--space-2); }.su-camon-sang .su-camon__mo{ margin-top: var(--space-2); }/* Bộ chuẩn đặt text-wrap: pretty cho mọi