/* =====================================================================
* CODE BOT THEO YÊU CẦU — lớp trình bày
* Tạo 18/09/2026 cho pages/site/codeservice/codebot_custom.php
* ---------------------------------------------------------------------
* Trang chào hàng, không phải trang tài liệu: người đọc lướt chứ không
* đọc từ trên xuống. Nên thông tin xếp theo thứ tự câu hỏi họ đặt ra —
* làm được trên nền tảng nào, nhận về cái gì, bao nhiêu tiền, bao lâu,
* rồi mới tới cách làm việc.
*
* Tệp tự chứa: chỉ cần ta-tokens.css và trangcong.css (do khung dùng
* chung nạp sẵn). KHÔNG nạp trangphu.css — tệp đó viết cho nhóm trang
* tiện ích, ràng vào đây chỉ làm hai bên khó sửa.
* ===================================================================== */
/* =====================================================================
* 1 · DẢI MỞ ĐẦU
* ===================================================================== */
.cd-hero{
background:
radial-gradient(1100px 300px at 50% -35%, rgba(15,118,110,.20), transparent),
linear-gradient(168deg, #10171C 0%, #1A2228 55%, #232A2C 100%);
color: #FFFFFF;
padding-block: clamp(42px, 5.4vw, 72px);
padding-inline: max(20px, calc(50% - 640px));
position: relative; overflow: hidden;
margin-bottom: clamp(30px, 4vw, 48px);
}
.cd-hero::after{
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--ta-accent), transparent);
}
/* Hai cột: chữ bên trái, ảnh bên phải, dải số liệu nằm vắt ngang cả hai
ở hàng dưới. Ảnh banner tỉ lệ 2,36:1 — rất ngang — nên cột ảnh được
rộng hơn một chút, không thì ảnh thành một dải mỏng cạnh cột chữ cao. */
.cd-hero__in{
display: grid; gap: clamp(26px, 3.4vw, 48px);
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
}
.cd-hero__chu{ min-width: 0; }
.cd-hero__anh{ min-width: 0; }
.cd-hero__anh picture{ display: block; }
.cd-hero__anh img{
display: block; width: 100%; height: auto;
border-radius: var(--ta-r-lg);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
/* KHÔNG dùng
cứng trong tiêu đề. Cột chữ hẹp lại khi có ảnh bên
cạnh, một dấu ngắt cố định làm chữ tự xuống dòng sai chỗ — đo trên
trang thật: "Tự động hoá giao / dịch của bạn", tách đôi từ ghép
"giao dịch". Để `text-wrap: balance` tự chia đều các dòng. */
.cd-hero h1{
font-size: clamp(27px, 3.4vw, 40px); font-weight: 800;
letter-spacing: -.035em; line-height: 1.15; text-wrap: balance;
color: #FFFFFF; margin: 0 0 14px;
}
.cd-hero p{
font-size: clamp(15.5px, 1.5vw, 17.5px); font-weight: 300; line-height: 1.62;
/* .78 chi duoc 4,00:1 tren nen dau trang. */
color: rgba(255,255,255,.90); margin: 0; max-width: 60ch;
}
.cd-hero__nut{ display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
/* MOI NUT O DAY PHAI MANG CA LOP .btn TRONG MARKUP.
trangcong.css muc 7 to mau moi the bang
a:not(.btn):not(.nav-link):not(.page-link)...{ color: #0A56C6 !important }
Lan dau toi de nut la khong kem .btn, nghi rang
them !important o day la du. Khong du: hai ben cung !important thi do
cu the quyet dinh, ma selector kia co sau lop trong cac :not() con
.cd-nut--chinh chi co mot. Do tren trang that: chu xanh lien ket nam
tren nen teal cua nut, 1,21:1.
.btn la cua thoat da co san trong danh sach :not() ay — dung no dung
nghia hon la di doi do cu the. Bootstrap .btn tran chi them padding va
vien tieu diem, ca hai deu bi cac dong duoi ghi de. */
.cd-nut{
display: inline-flex; align-items: center; gap: 9px;
padding: 12px 22px; border-radius: var(--ta-r-sm);
font-size: 15px; font-weight: 650; text-decoration: none;
transition: background var(--ta-fast), transform var(--ta-fast);
}
.cd-nut--chinh{ background: var(--ta-accent); color: #FFFFFF !important; }
.cd-nut--chinh:hover{ background: #12897F; color: #FFFFFF !important; transform: translateY(-1px); }
.cd-nut--phu{
background: rgba(255,255,255,.10); color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,.22);
}
.cd-nut--phu:hover{ background: rgba(255,255,255,.18); color: #FFFFFF !important; }
.cd-hero__chip{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cd-hero__chip span{
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.88);
font-size: 12.5px; font-weight: 500;
padding: 6px 13px; border-radius: var(--ta-r-pill);
}
/* =====================================================================
* 2 · KHUNG CHUNG
* ===================================================================== */
.cd{ padding-bottom: clamp(36px, 5vw, 60px); }
.cd section{ margin-bottom: clamp(38px, 5vw, 62px); }
/* Tieu de muc CANH GIUA, khong con thanh mau ben trai.
Thanh ben trai hop voi trang tai lieu — nguoi doc di tu tren xuong,
moi muc la mot doan. Trang nay la landing page: nguoi doc luot, va
moi muc phai tu gioi thieu minh. Tieu de canh giua cong mot cau dan
ngay duoi lam viec do tot hon, va do cung la cach trang tham chieu
lam.
`max-width` tinh bang ch cong `text-wrap: balance` de tieu de dai
be thanh hai dong can nhau, khong bi mot dong dai mot dong hai chu. */
.cd h2{
font-size: clamp(25px, 3vw, 35px); font-weight: 750;
letter-spacing: -.03em; line-height: 1.18;
color: var(--ta-fg); text-align: center; text-wrap: balance;
padding-left: 0; border-left: 0;
margin: 0 auto 14px; max-width: 24ch;
}
.cd .cd-phu{
font-size: 16px; font-weight: 300; line-height: 1.62;
color: var(--ta-fg-2); text-align: center; text-wrap: pretty;
margin: 0 auto clamp(30px, 4vw, 44px); max-width: 66ch;
}
.cd .cd-h3{
text-align: center; font-size: 19px; font-weight: 700;
letter-spacing: -.02em; margin: clamp(34px, 4vw, 48px) 0 18px;
}
.cd .cd-them{ text-align: center; }
/* =====================================================================
* 3 · BA THẺ DỊCH VỤ
* ---------------------------------------------------------------------
* Ba thẻ một hàng, mỗi thẻ sáu dòng và một nút. Đây là khối khách dừng
* mắt lâu nhất nên nó được quyền nặng hơn phần còn lại: đầu thẻ có màu,
* viền dày hơn, bóng sâu hơn.
*
* Ba thẻ PHẢI cao bằng nhau dù số chữ mỗi dòng khác nhau — nút nằm so
* le thì cả hàng nhìn như bị vỡ. `align-items: stretch` của grid lo
* chiều cao, `margin-top: auto` ở nút đẩy nó xuống đáy.
* ===================================================================== */
/* Bon the tu 20/09/2026 (them Bot Python) nen bon cot. Xem so ke o muc
"MAN HINH HEP" cuoi tep: so o phai chia het cho so cot. */
.cd-dv{ display: grid; gap: 18px; align-items: stretch; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cd-dv__the{
--dv: var(--ta-accent);
position: relative;
display: flex; flex-direction: column;
background: var(--ta-surface);
border: 1px solid var(--ta-line);
border-radius: var(--ta-r-lg);
box-shadow: var(--e1);
padding: 24px;
transition: box-shadow var(--ta-base), transform var(--ta-base);
}
.cd-dv__the:hover{ transform: translateY(-3px); box-shadow: var(--e2); }
/* thẻ được chọn nhiều nhất: viền theo màu nhấn, không phóng to hay đổi
nền — to hơn thì lệch hàng, đổi nền thì hai thẻ kia trông như bị mờ */
.cd-dv__the--nb{
border-color: var(--ta-accent);
box-shadow: 0 0 0 1px var(--ta-accent), var(--e2);
}
.cd-dv__nhan{
position: absolute; top: -11px; left: 24px;
background: var(--ta-accent); color: #FFFFFF;
font-family: var(--ta-mono); font-size: 10.5px; font-weight: 600;
letter-spacing: .07em; text-transform: uppercase;
padding: 4px 11px; border-radius: var(--ta-r-pill);
}
.cd-dv__dau{
display: flex; flex-direction: column; align-items: center; gap: 12px;
text-align: center;
padding-bottom: 18px; margin-bottom: 18px;
border-bottom: 1px solid var(--ta-line-2);
}
.cd-dv__ic{
flex: none; width: 46px; height: 46px; border-radius: var(--ta-r);
background: var(--ta-accent-soft);
display: flex; align-items: center; justify-content: center;
font-size: 23px;
}
.cd-dv__dau h3{
font-size: 19px; font-weight: 750; letter-spacing: -.02em;
color: var(--ta-fg); margin: 0 0 3px;
}
.cd-dv__dau span{
font-family: var(--ta-mono); font-size: 11.5px; font-weight: 500;
letter-spacing: .03em; color: var(--ta-fg-3);
}
/* Doan mo ta giua tieu de va danh sach.
KHONG cho no `flex: 1` — phan gian ra de ba the cao bang nhau phai
roi vao DANH SACH, neu khong thi doan van ngan dai khac nhau se keo
cac dong gach dau dong lech hang giua ba the.
`min-height` bang dung 4 dong (1.65 x 4 = 6.6em): do tren trang that
thi MT4 va MT5 chiem 4 dong, TradingView 3 — dong gach dau tien lech
nhau 23px. Chot san cho thi du sau nay ai sua chu, ba the van thang
hang; chu dai hon 4 dong thi no tu gian, khong bi cat. */
.cd-dv__mo{
font-size: 14px; line-height: 1.65; color: var(--ta-fg-2);
text-align: center;
margin: 0 0 18px; min-height: 6.6em;
}
@media (max-width: 899.98px){ .cd-dv__mo{ min-height: 0; } }
.cd-dv__ds{ list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.cd-dv__ds li{
position: relative; padding-left: 26px; margin-bottom: 11px;
font-size: 14.5px; line-height: 1.55; color: var(--ta-fg-2);
}
.cd-dv__ds li:last-child{ margin-bottom: 0; }
.cd-dv__ds li::before{
content: "✓"; position: absolute; left: 0; top: -1px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--ta-accent-soft); color: var(--ta-accent-ink);
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
}
.cd-dv__nut{
margin-top: auto; justify-content: center; width: 100%;
background: var(--ta-surface-2); color: var(--ta-accent-ink) !important;
border: 1px solid var(--ta-line);
}
.cd-dv__nut:hover{ background: var(--ta-sunken); color: var(--ta-accent-ink) !important; }
.cd-dv__the--nb .cd-dv__nut{
background: var(--ta-accent); color: #FFFFFF !important; border-color: transparent;
}
.cd-dv__the--nb .cd-dv__nut:hover{ background: var(--ta-accent-ink); color: #FFFFFF !important; }
.cd-them{
margin: 20px 0 0;
font-size: 14.5px; line-height: 1.65; color: var(--ta-fg-3);
}
/* =====================================================================
* 4 · BÁO GIÁ THEO QUY MÔ
* ---------------------------------------------------------------------
* Không có gói cố định, nên không có ba thẻ giá để so cạnh nhau. Thay
* vào đó là MỘT con số mốc, rồi giải thích cái gì làm giá đổi — người
* đọc tự ước lượng được mình rơi vào đâu trước khi nhắn tin.
*
* Con số mốc dùng phông đẳng chiều và tabular-nums như mọi con số khác
* trên web: chữ số nào cũng rộng bằng nhau.
* ===================================================================== */
.cd-moc{
display: grid; gap: clamp(20px, 3vw, 36px); align-items: center;
grid-template-columns: minmax(200px, auto) 1fr;
background: var(--ta-surface);
border: 1px solid var(--ta-line);
border-left: 4px solid var(--ta-accent);
border-radius: var(--ta-r-lg);
box-shadow: var(--e1);
padding: clamp(22px, 3vw, 32px);
margin-bottom: clamp(30px, 4vw, 44px);
}
.cd-moc__so{
font-family: var(--ta-mono); font-variant-numeric: tabular-nums;
font-size: clamp(34px, 4.6vw, 52px); font-weight: 700;
letter-spacing: -.045em; line-height: 1;
color: var(--ta-fg); white-space: nowrap;
}
.cd-moc__tu{
display: block; margin-bottom: 9px;
font-family: var(--ta-font); font-size: 12.5px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
color: var(--ta-accent-ink);
}
.cd-moc__dv{ font-size: .55em; font-weight: 600; margin-left: 3px; }
.cd-moc__chu p{
font-size: 15.5px; line-height: 1.65; color: var(--ta-fg-2); margin: 0 0 18px;
}
@media (max-width: 639.98px){
.cd-moc{ grid-template-columns: 1fr; }
}
.cd-h3{
font-size: 17px; font-weight: 700; color: var(--ta-fg);
margin: 0 0 16px; letter-spacing: -.015em;
}
.cd-yeuto{ display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 22px; }
.cd-yt{
background: var(--ta-surface-2);
border: 1px solid var(--ta-line);
border-top: 3px solid var(--ta-accent-soft);
border-radius: var(--ta-r);
padding: 19px; text-align: center;
transition: border-top-color var(--ta-fast), box-shadow var(--ta-fast);
}
.cd-yt:hover{ border-top-color: var(--ta-accent); box-shadow: var(--e1); }
.cd-yt h4{
font-size: 15px; font-weight: 650; color: var(--ta-fg); margin: 0 0 6px;
}
.cd-yt p{
font-size: 13.5px; line-height: 1.65; color: var(--ta-fg-2); margin: 0;
}
/* Lời hứa về giá — đặt ngay dưới bảng yếu tố vì đó là chỗ người đọc
bắt đầu lo "rồi lại phát sinh thêm". */
.cd-luuy{
background: var(--ta-accent-soft);
border: 1px solid #C9E4E0;
border-left: 3px solid var(--ta-accent);
border-radius: var(--ta-r);
padding: 16px 20px;
font-size: 14.5px; line-height: 1.7; color: var(--ta-fg-2);
}
.cd-luuy strong{ color: var(--ta-accent-ink); }
/* =====================================================================
* 5 · NHÃN VÀ SỐ LIỆU TRONG DẢI MỞ ĐẦU
* ---------------------------------------------------------------------
* Bốn con số nằm ngay dưới hai nút, không tách thành dải riêng —
* đây là thứ khách liếc trong hai giây đầu, đặt xa nút thì mất tác
* dụng. Số dùng phông đẳng chiều và tabular-nums như mọi con số
* khác trên web.
* ===================================================================== */
.cd-hero__huy{
display: inline-block; margin-bottom: 18px;
/* Lam TOI nen chip chu khong nhat chu di. Nen cu
`rgba(15,118,110,.22)` phu len nen dau trang cho ra mot mau trung
gian, chu bac nao cung chi quanh 3,6-4,3:1. Keo nen xuong toi thi
chu giu duoc sac bac ha ma van doc duoc. Da do tren trang. */
background: rgba(6,52,48,.62);
border: 1px solid rgba(45,212,191,.32);
color: #9FEADD;
font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
padding: 7px 15px; border-radius: var(--ta-r-pill);
}
.cd-hero__sl{
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 52px);
margin-top: 6px; padding-top: 26px;
border-top: 1px solid rgba(255,255,255,.12);
}
/* Duoi 600px, de flex tu xuong dong thi bon o rai thanh 3+1 - mot o
dung le loi cuoi hang. Luoi hai cot thi thanh 2+2, deu. Giong dai so
lieu o trang chu, vi hai cho la cung bon con so. */
@media (max-width: 599.98px){
.cd-hero__sl{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
gap: 20px 16px; }
}
.cd-hero__sl b{
display: block;
font-family: var(--ta-mono); font-variant-numeric: tabular-nums;
font-size: clamp(23px, 2.6vw, 30px); font-weight: 700;
letter-spacing: -.04em; line-height: 1; color: #FFFFFF;
}
.cd-hero__sl span{
display: block; margin-top: 7px;
/* .66 chi duoc 3,32:1. Day la NHAN cua con so - khong doc duoc nhan
thi con so ben tren thanh vo nghia. */
font-size: 12.5px; color: rgba(255,255,255,.88);
}
/* =====================================================================
* 6 · HỘP CAM KẾT
* ---------------------------------------------------------------------
* Biểu tượng đặt TRÊN chữ chứ không nằm cạnh. Để cạnh thì chữ bị bóp
* còn chừng 22 ký tự một dòng, đoạn ba câu thành năm dòng vụn. Đặt
* trên thì chữ được cả bề ngang của ô.
*
* Biểu tượng là ô vuông bo góc nền nhạt, không phải vòng tròn đặc:
* vòng tròn đặc màu nhấn lặp lại tám lần thì cả khối đậy màu, mắt
* không biết nhìn vào đâu trước.
* ===================================================================== */
.cd-vs{ display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
.cd-v{
display: flex; flex-direction: column; align-items: center; text-align: center;
background: var(--ta-surface);
border: 1px solid var(--ta-line);
border-radius: var(--ta-r-lg);
box-shadow: var(--e1);
padding: 22px;
transition: box-shadow var(--ta-base), transform var(--ta-base),
border-color var(--ta-base);
}
.cd-v:hover{
transform: translateY(-3px); box-shadow: var(--e2);
border-color: #C9E4E0;
}
.cd-v__ic{
flex: none; width: 44px; height: 44px; border-radius: var(--ta-r);
background: var(--ta-accent-soft);
display: flex; align-items: center; justify-content: center;
font-size: 21px; margin-bottom: 16px;
}
.cd-v h3{
font-size: 15.5px; font-weight: 700; letter-spacing: -.015em;
color: var(--ta-fg); margin: 0 0 7px;
}
.cd-v p{ font-size: 13.5px; line-height: 1.68; color: var(--ta-fg-2); margin: 0; }
/* =====================================================================
* 7 · ĐÁNH GIÁ KHÁCH HÀNG
* ===================================================================== */
/* HAI COT, KHONG DUNG `auto-fit`.
`auto-fit` chia theo BE NGANG chu khong theo SO O: bon danh gia o be
ngang 1296px ra bon cot, nhung tut xuong 1100px la ra ba cot - thanh
3 + 1, hang cuoi hut mot o. So o thi biet truoc, nen chot cung.
Hai cot chu khong bon: moi loi khach dai 50-60 chu, bon cot thi the
rong ~310px va cao tam tam dong chu hep - doc met. */
.cd-dg{
display: grid; gap: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cd-d{
margin: 0; /* co le 40px hai ben */
background: var(--ta-surface);
border: 1px solid var(--ta-line);
border-radius: var(--ta-r-lg);
box-shadow: var(--e1);
padding: 20px 22px;
display: flex; flex-direction: column;
}
/* Sao la NOI DUNG - no noi khach cham may diem - nen phai doc duoc nhu
moi chu khac. #B8860B do tren mat the chi duoc 3,06:1. Dung #8A5D03,
dung sac vang dong da dat cho VipTrend o trang chu: 5,42:1. */
.cd-d__sao{ color: #8A5D03; font-size: 14px; letter-spacing: 2px; margin-bottom: 11px; }
.cd-d__loi{
margin-left: 0; margin-right: 0; /* thut le 40px */
font-size: 14.5px; line-height: 1.7; color: var(--ta-fg-2);
margin: 0 0 16px; flex: 1;
}
.cd-d__ai{
display: flex; align-items: center; gap: 11px;
border-top: 1px solid var(--ta-line-2); padding-top: 14px;
}
/* Anh va vong tron chu dung chung kich thuoc - the nao co anh, the
nao chua co, hang van thang. */
.cd-d__anh, .cd-d__chu{
flex: none; width: 42px; height: 42px; border-radius: 50%;
}
.cd-d__anh{
object-fit: cover; object-position: center;
border: 1px solid var(--ta-line);
background: var(--ta-sunken);
}
.cd-d__chu{
background: var(--ta-accent-soft); color: var(--ta-accent-ink);
display: flex; align-items: center; justify-content: center;
/* Ba chu viet tat (HTK, NMQ...) chu khong phai mot chu, nen ha co
chu cho vua vong tron 36px. */
font-weight: 700; font-size: 12px; letter-spacing: .02em;
}
.cd-d__ten{ font-size: 14px; font-weight: 650; color: var(--ta-fg); }
.cd-d__vai{ font-size: 12.5px; color: var(--ta-fg-3); margin-top: 1px; }
/* =====================================================================
* 8 · BƯỚC QUY TRÌNH
* ---------------------------------------------------------------------
* Số bước là thứ mắt bám vào để biết đang ở đâu, nên nó to và đậm
* hơn bản cũ. Mốc thời gian ở đáy tách hẳn bằng một đường kẻ — nó
* là thông tin khác loại với phần mô tả, để liền thì đọc thành một câu
* nửa của đoạn trên.
* ===================================================================== */
.cd-quytrinh{ display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.cd-b{
display: flex; flex-direction: column; align-items: center; text-align: center;
background: var(--ta-surface);
border: 1px solid var(--ta-line);
border-radius: var(--ta-r-lg);
box-shadow: var(--e1);
padding: 22px;
transition: box-shadow var(--ta-base), transform var(--ta-base),
border-color var(--ta-base);
}
.cd-b:hover{
transform: translateY(-3px); box-shadow: var(--e2);
border-color: #C9E4E0;
}
/* Số bước nằm CÙNG DÒNG với tên bước. `align-items: center` chỉ căn
đúng khi tên bước một dòng; tên dài bị bẻ hai dòng thì số trôi xuống
giữa — dùng `baseline` để số luôn thẳng dòng chữ đầu tiên. */
.cd-b__dau{
display: flex; align-items: baseline; justify-content: center;
gap: 11px; margin-bottom: 12px;
}
.cd-b__so{
flex: none;
min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px;
background: linear-gradient(150deg, var(--ta-accent), var(--ta-accent-ink));
color: #FFFFFF;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--ta-mono); font-size: 15px; font-weight: 700;
transform: translateY(3px);
}
.cd-b h3{
font-size: 16px; font-weight: 700; letter-spacing: -.015em;
color: var(--ta-fg); margin: 0; text-align: left;
}
.cd-b p{
font-size: 13.5px; line-height: 1.68; color: var(--ta-fg-2);
margin: 0 0 14px; flex: 1;
}
.cd-b__lich{
width: 100%;
font-family: var(--ta-mono); font-size: 11.5px; line-height: 1.5;
color: var(--ta-fg-3);
border-top: 1px solid var(--ta-line-2); padding-top: 12px;
}
/* =====================================================================
* 9 · CÂU HỎI VÀ KHỐI MỜI — HAI CỘT
* ---------------------------------------------------------------------
* Câu hỏi bên trái, khối mời liên hệ bên phải. Chín câu hỏi xếp dọc
* thì cột trái cao hơn cột phải nhiều, nên khối mời được `sticky`:
* người đọc lướt hết chín câu thì lời mời vẫn nằm trong tầm mắt,
* thay vì trôi mất ngay từ câu thứ hai.
*
* `top` phải trừ chiều cao thanh điều hướng cố định, không phải 0 —
* đặt 0 thì khối chui vào dưới thanh menu.
* ===================================================================== */
.cd-doi{
display: grid; gap: 18px;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
align-items: start;
}
.cd-hoi{
background: var(--ta-surface);
border: 1px solid var(--ta-line);
border-radius: var(--ta-r-lg);
box-shadow: var(--e1);
overflow: hidden;
}
.cd-hoi__dau{
padding: 22px 24px 18px;
border-bottom: 1px solid var(--ta-line-2);
}
.cd-hoi__dau h3{
font-size: 20px; font-weight: 750; letter-spacing: -.022em;
color: var(--ta-fg); margin: 0 0 5px;
}
.cd-hoi__dau p{ font-size: 14px; color: var(--ta-fg-3); margin: 0; }
.cd-hoi details{ border-bottom: 1px solid var(--ta-line-2); }
.cd-hoi details:last-child{ border-bottom: 0; }
.cd-hoi summary{
display: flex; align-items: center; gap: 11px;
padding: 15px 24px; cursor: pointer; list-style: none;
font-size: 14.5px; font-weight: 650; color: var(--ta-fg);
transition: background var(--ta-fast), color var(--ta-fast);
}
.cd-hoi summary::-webkit-details-marker{ display: none; }
.cd-hoi summary::before{
content: "b8"; flex: none; color: var(--ta-fg-3); font-size: 13px; line-height: 1;
transition: transform var(--ta-fast), color var(--ta-fast);
}
.cd-hoi summary:hover{ background: var(--ta-sunken); }
.cd-hoi details[open] > summary{ color: var(--ta-accent-ink); }
.cd-hoi details[open] > summary::before{ transform: rotate(90deg); color: var(--ta-accent); }
.cd-hoi__dap{
padding: 0 24px 18px 46px;
font-size: 14px; line-height: 1.72; color: var(--ta-fg-2);
}
.cd-hoi__dap p{ margin: 0 0 10px; }
.cd-hoi__dap p:last-child{ margin-bottom: 0; }
/* =====================================================================
* 10 · KHỐI MỜI LIÊN HỆ
* ===================================================================== */
.cd-lienhe{
position: sticky; top: calc(var(--tc-bar, 62px) + 16px);
background: linear-gradient(155deg, #172026, #1E2C32);
border-radius: var(--ta-r-lg);
box-shadow: var(--e2);
padding: 28px 26px;
text-align: center; color: #FFFFFF;
}
.cd-lienhe__ic{
width: 52px; height: 52px; border-radius: var(--ta-r);
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
font-size: 24px; margin: 0 auto 18px;
}
.cd-lienhe h3{
font-size: 20px; font-weight: 750; letter-spacing: -.022em;
line-height: 1.25; text-wrap: balance;
color: #FFFFFF; margin: 0 0 10px;
}
.cd-lienhe p{
font-size: 14.5px; line-height: 1.65;
color: rgba(255,255,255,.76); margin: 0;
}
.cd-lienhe__nut{
display: flex; flex-direction: column; gap: 10px; margin-top: 22px;
}
.cd-lienhe__nut .cd-nut{ justify-content: center; width: 100%; }
.cd-lienhe__chan{
margin-top: 18px; padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.12);
font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.62);
}
/* Chuoi `:not()` day du moi doi lai duoc luat mau lien ket toan cuc
trong trangcong.css - luat do mang `!important` VA sau lop do dac
hieu, nen chi `!important` o day la THUA. Khong lap chuoi thi chu ra
xanh lien ket #0A56C6 tren nen toi: 2,16:1. Da do tren trang. */
.cd-lienhe__chan a:not(.btn):not(.nav-link):not(.page-link):not(.text-white):not(.text-light):not(.tc-brand){ color: #7FE3D6 !important; font-weight: 600; }
/* =====================================================================
* 11 · SỐ CỘT THEO BỀ NGANG
* ---------------------------------------------------------------------
* Số cột chốt cứng chứ không để `auto-fit` tự chia. Lý do: `auto-fit`
* chia theo bề ngang chứ không theo SỐ Ô, nên hàng cuối hay hụt —
* đo trên trang thật trước khi sửa: 5 hộp bàn giao thành 4+1, 6 bước
* quy trình thành 5+1, 7 điểm cam kết thành 4+3. Hàng cuối hụt một ô
* thì cả khối nhìn như chưa làm xong.
*
* Nay số ô và số cột chia hết cho nhau: 6 hộp / 3 cột, 8 điểm / 4 cột,
* 6 yếu tố / 3 cột, 6 bước / 3 cột, 4 thẻ / 4 cột, 4 dịch vụ / 4 cột.
* THÊM Ô MỚI THÌ PHẢI GIỮ ĐÚNG BỘI SỐ, nếu không lại hụt hàng cuối.
* ===================================================================== */
@media (max-width: 1099.98px){
/* `.cd-vs` va `.cd-dv` deu la hang BON o nen xuong hai cot cung mot
muc, som hon cac luoi ba o ben duoi. */
.cd-vs{ grid-template-columns: repeat(2, 1fr); }
.cd-dv{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px){
.cd-hero__in{ grid-template-columns: 1fr; }
.cd-yeuto, .cd-quytrinh{ grid-template-columns: repeat(2, 1fr); }
.cd-dg{ grid-template-columns: minmax(0, 1fr); }
.cd-doi{ grid-template-columns: 1fr; }
.cd-lienhe{ position: static; }
}
@media (max-width: 599.98px){
.cd-dv, .cd-yeuto, .cd-quytrinh,
.cd-vs, .cd-dg{ grid-template-columns: 1fr; }
}
/* =====================================================================
* 12 · MÀN HÌNH HẸP
* ===================================================================== */
@media (max-width: 575.98px){
.cd-hero__nut .cd-nut{ flex: 1 1 100%; justify-content: center; }
.cd-moc__so{ font-size: 32px; }
.cd-hoi__dap{ padding-left: 20px; }
.cd-dv__the{ padding: 20px; }
}