/* =====================================================================
* yp_dangky.css — KHOI MOI DANG KY, DUNG CHUNG CHO MOI TRANG
* YPVN-BUILD: dangky-V41 | sua vong tu nap | 2026-08-23
* Di kem: yp_dangky.asp (markup)
*
* CACH NAP — trong , SAU yp_tokens.css:
*
* roi dat khoi vao cho muon hien:
*
*
* ⚠ TEP NAY KHONG DUOC PHU THUOC vao mot trang cu the.
* · KHONG bo chon nao mang `body[data-yp-page="cls"]` — khoi con phai chay
* duoc tren index.asp, lgs.asp va moi trang moi.
* · KHONG dung bien mau khai trong yp_cls2.css (--tt-ink, --qc-rule, --cta...)
* vi chung khai duoi `body[data-yp-page="cls"]`, cac trang khac KHONG CO.
* · Moi mau di qua bien rieng cua khoi, khai ngay trong .ypdk, lay tu
* yp_tokens.css khi co va co gia tri du phong khi khong.
*
* MAU — theo yeu cau nguoi dung va theo vai da ghi trong yp_tokens.css:
* vach tren #D78461 (= --qc-rule cua cls) — nguoi dung chi dinh, thay
* cho vach VANG cua ban goc
* nut #C2410C (= --ypx-cta) — nguoi dung chi dinh
* nhan "Mien phi 100%" va dau kiem: XANH LA --ypx-verify.
* ⚠ KHONG doi sang do. yp_tokens.css ghi ro vai: "xanh la = su that mien
* phi / xac thuc". Lat V39 da dung dung sac do cho nhan [Miễn phí] o
* bon o khuyen mai. Cung mot chu, cung mot nghia => phai cung mot mau,
* neu khong nguoi doc phai hoc hai lan.
*
* DO TUONG PHAN (Chromium 149):
* chu trang tren nut #C2410C 5,18:1 DAT (nguong chu lon 3,0 / nho 4,5)
* #15803D tren #EAF6EE (nhan) 4,52:1 DAT
* --ink tren the trang 18,24:1 DAT
* --muted tren the trang 7,10:1 DAT
* vach tren #D78461 tren trang 2,85:1 — vach TRANG TRI, khong mang
* thong tin; cung ly do da ghi o V32.
* ===================================================================== */
.ypdk{
/* bien RIENG cua khoi — lay token khi co, du phong khi khong */
--dk-rule:#D78461;
--dk-cta:var(--ypx-cta,#C2410C);
--dk-cta-deep:var(--ypx-cta-deep,#9A3412);
--dk-ok:var(--ypx-verify,#15803D);
--dk-ok-bg:var(--ypx-verify-tint,#EAF6EE);
--dk-ink:var(--ypx-ink,#171510);
--dk-muted:var(--ypx-muted,#5B5851);
--dk-line:var(--ypx-line,#E7E5E1);
--dk-line-soft:var(--ypx-line-soft,#F0EFEB);
--dk-surface:var(--ypx-surface,#FFFFFF);
background:var(--dk-surface);
border:1px solid var(--dk-line);
border-top:3px solid var(--dk-rule);
border-radius:10px;
padding:15px 16px 14px;
color:var(--dk-ink);
line-height:1.55;
}
/* nhan "Mien phi 100%" */
.ypdk-tag{
display:inline-block; margin:0 0 9px;
padding:2px 10px; border-radius:999px;
background:var(--dk-ok-bg); color:var(--dk-ok);
font-size:11.5px; font-weight:700; letter-spacing:.01em;
}
.ypdk-h{
margin:0 0 6px;
font-size:17px; font-weight:700; line-height:1.3; color:var(--dk-ink);
}
.ypdk-b{
margin:0 0 11px;
font-size:13px; line-height:1.6; color:var(--dk-muted);
}
.ypdk-b b{ color:var(--dk-ink); font-weight:600 }
/* ba gach dau dong — dau kiem ve bang SVG nen khong phu thuoc font bieu tuong */
.ypdk-l{ margin:0 0 13px; padding:0; list-style:none }
.ypdk-l li{
position:relative; padding:0 0 0 22px; margin:0 0 6px;
font-size:13px; line-height:1.5; color:var(--dk-muted);
}
.ypdk-l li:last-child{ margin-bottom:0 }
.ypdk-l li::before{
content:""; position:absolute; left:0; top:3px;
width:14px; height:14px;
background:var(--dk-ok);
-webkit-mask:var(--dk-tick) center/14px 14px no-repeat;
mask:var(--dk-tick) center/14px 14px no-repeat;
}
.ypdk{
--dk-tick:url("data:image/svg+xml;utf8,");
}
.ypdk-l li b{ color:var(--dk-ink); font-weight:600 }
/* nut */
.ypdk-btn{
display:block; width:100%; box-sizing:border-box;
padding:11px 12px; border-radius:8px;
background:var(--dk-cta); color:#FFFFFF!important;
font-size:15px; font-weight:700; line-height:1.2; text-align:center;
text-decoration:none!important;
}
.ypdk-btn:hover{ background:var(--dk-cta-deep); color:#FFFFFF!important }
/* chan khoi — ho tro */
.ypdk-sep{
margin:13px 0 10px; border:0; border-top:1px solid var(--dk-line-soft);
}
.ypdk-ft{
margin:0 0 5px;
font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--dk-muted);
}
.ypdk-tel{ margin:0 0 3px; font-size:14px; font-weight:700; line-height:1.5 }
.ypdk-tel a{ color:var(--dk-cta-deep)!important; text-decoration:none!important }
.ypdk-tel a:hover{ text-decoration:underline!important }
.ypdk-tel span{ color:var(--dk-line); font-weight:400 }
.ypdk-zl{ margin:0; font-size:13px; color:var(--dk-muted) }
.ypdk-zl a{ color:var(--dk-cta-deep)!important; font-weight:600; text-decoration:none!important }
.ypdk-zl a:hover{ text-decoration:underline!important }