/* ==========================================================================
   HỒ SƠ / TRANG PHỤ v3 (desktop 1440) — tiền tố hs3-.
   Phủ lên: hồ sơ công ty vật tư (.vtp, p-vt.css), trang mua gói (.hs3-buy), đăng ký nha khoa (.dkp, p-dkreg.css).
   Ghi đè theo THỨ TỰ NẠP (sau p-vt/p-acct/p-dkreg), giữ nguyên hook JS/route. Token --ds-* (p-ds.css), tím = vật tư.
   Quy tắc: khung ≤ 6px, nút/chip 3–4px, không vạch trái, không thanh cuộn, chữ nguyên px 10–24, tối đa 2 lớp khung.
   ========================================================================== */

/* ---------- 1. HỒ SƠ CÔNG TY VẬT TƯ ---------- */
.vtp, .vt-nav, .vt-bar { --vt: var(--ds-violet-500); --vt-s: var(--ds-violet-50); --vt-d: var(--ds-violet-700); --vt-b: #e1d9f8; }

/* đầu hồ sơ: nền nhuộm tím nhạt thay vạch viền trên dày; logo + tên + chỉ số trên một khối */
.vtp .vt-id { margin-top: 8px; padding: 16px 20px; gap: 4px 18px; grid-template-columns: 80px minmax(0, 1fr) auto; border: 1px solid var(--ds-line); border-top: 1px solid var(--ds-line); border-radius: var(--ds-rd-md); background: linear-gradient(120deg, var(--ds-violet-100) 0, var(--ds-violet-50) 38%, #fff 78%); box-shadow: var(--ds-sh-1); }
.vtp .vt-logo { width: 80px; height: 80px; border-radius: var(--ds-rd-md); background: #fff; font-size: 24px; font-weight: var(--ds-fw-800); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), var(--ds-sh-1); }
.vtp .vt-eb { font-size: var(--ds-fs-11); font-weight: var(--ds-fw-700); letter-spacing: .06em; }
.vtp .vt-id h1 { margin: 3px 0 0; font-size: var(--ds-fs-24); font-weight: var(--ds-fw-800); letter-spacing: -.02em; line-height: 1.2; color: var(--ds-ink-900); }
.vtp .vt-legal { font-size: var(--ds-fs-12); color: var(--ds-ink-500); }
.vtp .vt-chips { gap: 5px; margin-top: 10px; }
.vtp .vt-chips li { min-height: 24px; padding: 2px 8px; border-radius: var(--ds-rd-xs); border-color: var(--ds-line); background: rgba(255, 255, 255, .75); font-size: var(--ds-fs-12); color: var(--ds-ink-700); }
.vtp .vt-chips li.ok { background: var(--ds-mint-50); border-color: var(--ds-mint-100); color: var(--ds-mint-700); }
.vtp .vt-addr { margin-top: 8px; font-size: var(--ds-fs-13); color: var(--ds-ink-700); }
.vtp .vt-addr small { font-size: var(--ds-fs-12); color: var(--ds-ink-500); }
.vtp .vt-act { min-width: 196px; gap: 6px; }
.vtp .vt-cta { height: 40px; padding: 0 16px; border-radius: var(--ds-rd-sm); font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); box-shadow: none; }
.vtp .vt-act2 .btn { height: 34px; font-size: var(--ds-fs-13); border-radius: var(--ds-rd-sm); }
.vtp .vt-art { width: 150px; right: 14px; bottom: 6px; opacity: .55; }

/* dải chỉ số: số lớn vừa, nhãn nhỏ, kẻ dọc mảnh */
.vtp .vt-kpi { margin-top: 8px; border-radius: var(--ds-rd-md); border-color: var(--ds-line); }
.vtp .vt-kpi > div { padding: 10px 16px; border-left-color: var(--ds-line); }
.vtp .vt-kpi dd { font-size: var(--ds-fs-20); font-weight: var(--ds-fw-800); letter-spacing: -.02em; color: var(--ds-violet-700); }
.vtp .vt-kpi dt { margin-top: 2px; font-size: var(--ds-fs-12); color: var(--ds-ink-500); }

/* thanh neo mục */
.vt-nav { top: var(--hdr-h, 102px); margin-top: 8px; background: rgba(255, 255, 255, .94); }
.vt-nav a { padding: 10px 12px; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-700); }
.vt-nav a i { font-size: 15px; }
.vt-nav a.on { color: var(--ds-violet-700); font-weight: var(--ds-fw-700); }
.vt-nav a .n { font-size: var(--ds-fs-11); border-radius: var(--ds-rd-xs); }

/* khối nội dung: nén padding, tiêu đề 17/800, chip icon nhỏ */
.vtp.vt-grid { gap: 14px; margin-top: 10px; grid-template-columns: minmax(0, 1fr) 340px; }
.vtp .vt-main { gap: 10px; }
.vtp .vt-sec { padding: 14px 18px 16px; border-radius: var(--ds-rd-md); border-color: var(--ds-line); box-shadow: var(--ds-sh-1); scroll-margin-top: calc(var(--hdr-h, 102px) + 52px); }
.vtp .vt-sec > h2 { gap: 8px; margin: 0 0 10px; font-size: var(--ds-fs-17); font-weight: var(--ds-fw-800); letter-spacing: -.01em; color: var(--ds-ink-900); }
.vtp .vt-sec > h2 .ic { width: 26px; height: 26px; border-radius: var(--ds-rd-sm); font-size: 15px; }
.vtp .vt-sec > h2 small { font-size: var(--ds-fs-12); font-weight: var(--ds-fw-400); color: var(--ds-ink-500); }
.vtp .vt-h3 { margin: 16px 0 8px; font-size: 16px; font-weight: var(--ds-fw-700); letter-spacing: 0; }
.vtp .vt-about { font-size: var(--ds-fs-14); line-height: 1.65; color: var(--ds-ink-700); }

/* "chưa có dữ liệu": một dòng gọn, không hộp nét đứt lồng trong khối */
.vtp .vt-blank { gap: 10px; align-items: flex-start; padding: 0; border: 0; border-radius: 0; background: none; }
.vtp .vt-blank > i { font-size: 20px; margin-top: 1px; color: var(--ds-violet-500); opacity: .8; }
.vtp .vt-blank b { font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); }
.vtp .vt-blank span { margin-top: 1px; font-size: var(--ds-fs-13); line-height: 1.5; color: var(--ds-ink-500); }

/* thẻ con: hết nền xám + viền để khỏi thành khung lồng khung; dùng đường kẻ */
.vtp .vt-facts li, .vtp .vt-certs li { border-radius: var(--ds-rd-sm); border-color: var(--ds-line); background: var(--ds-bg); }
.vtp .vt-terms { gap: 0; }
.vtp .vt-terms li { padding: 10px 2px; border: 0; border-top: 1px solid var(--ds-line); border-radius: 0; background: none; }
.vtp .vt-terms li:first-child { border-top: 0; }
.vtp .vt-terms li > i { font-size: 18px; margin-top: 2px; }
.vtp .vt-terms b { font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); }
.vtp .vt-terms span { font-size: var(--ds-fs-13); color: var(--ds-ink-500); }
.vtp .vt-br li, .vtp .vt-team li { border-radius: var(--ds-rd-sm); border-color: var(--ds-line); }
.vtp .vt-br .ic { width: 30px; height: 30px; border-radius: var(--ds-rd-sm); font-size: 16px; }

/* quy trình 4 bước: dải kẻ ngang mảnh, số nhỏ vuông bo */
.vtp .vt-flow { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-line); }
.vtp .vt-flow li::before { width: 20px; height: 20px; border-radius: var(--ds-rd-sm); font-size: var(--ds-fs-11); font-weight: var(--ds-fw-700); }
.vtp .vt-flow li::after { left: 26px; top: 10px; }
.vtp .vt-flow b { font-size: var(--ds-fs-13); font-weight: var(--ds-fw-700); }
.vtp .vt-flow small { font-size: var(--ds-fs-12); color: var(--ds-ink-500); }

/* danh mục + bảng: radius nhỏ, tiêu đề cột 11px hoa */
.vtp .vt-cat { padding: 10px 12px; border-radius: var(--ds-rd-sm); }
.vtp .vt-cat .ic { width: 28px; height: 28px; border-radius: var(--ds-rd-sm); font-size: 16px; }
.vtp .vt-s, .vtp .vt-sel select, .vtp .vt-more, .vtp .vt-add { border-radius: var(--ds-rd-sm); }
.vtp .vt-prod, .vtp .vt-brands, .vtp .vt-areas { border-radius: var(--ds-rd-sm); }
.vtp .vt-wm b { font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); }

/* cột phải: phiếu báo giá bỏ vạch trên 3px, dùng nền nhuộm ở đầu phiếu */
.vtp .vt-side { top: calc(var(--hdr-h, 102px) + 52px); gap: 10px; }
.vtp .vt-rfq { border-top: 1px solid var(--ds-line); border-radius: var(--ds-rd-md); box-shadow: var(--ds-sh-2); }
.vtp .vt-rfq-hd { padding: 12px 14px; background: linear-gradient(var(--ds-violet-100), var(--ds-violet-50)); }
.vtp .vt-rfq-hd .ic { width: 30px; height: 30px; border-radius: var(--ds-rd-sm); font-size: 17px; }
.vtp .vt-rfq-hd b { font-size: var(--ds-fs-15); font-weight: var(--ds-fw-800); }
.vtp .vt-lines-empty { padding: 8px 10px; border-radius: var(--ds-rd-sm); border-style: solid; border-color: var(--ds-line); background: var(--ds-bg); }
.vtp .vt-rfq .form-control, .vtp .vt-rfq .cms-form .choice, .vtp .vt-rfq button[type=submit], .vtp .vt-pv { border-radius: var(--ds-rd-sm); }
.vtp .vt-rfq button[type=submit] { height: 40px; font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); }
.vtp .vt-own, .vtp .claimbar { border-radius: var(--ds-rd-md); }

/* ---------- 2. MUA GÓI /mua/:gói (khung tài khoản .ua-lay) ---------- */
.hs3-buy .hs3-buyhd { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--ds-line); border-radius: var(--ds-rd-md); background: linear-gradient(120deg, var(--ds-orange-100) 0, var(--ds-orange-50) 40%, #fff 85%); box-shadow: var(--ds-sh-1); }
.hs3-buy .hs3-ic { width: 40px; height: 40px; border-radius: var(--ds-rd-md); display: grid; place-items: center; background: #fff; color: var(--ds-orange-500); font-size: 22px; box-shadow: var(--ds-sh-1); }
.hs3-buy .hs3-eb { font-size: var(--ds-fs-11); font-weight: var(--ds-fw-700); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-orange-700); }
.hs3-buy .hs3-buyhd h1 { margin: 2px 0 4px; font-size: var(--ds-fs-24); font-weight: var(--ds-fw-800); letter-spacing: -.02em; line-height: 1.2; color: var(--ds-ink-900); }
.hs3-buy .hs3-buyhd p { margin: 0; font-size: var(--ds-fs-13); line-height: 1.6; color: var(--ds-ink-700); }
.hs3-buy .hs3-price { text-align: right; align-self: center; padding-left: 12px; }
.hs3-buy .hs3-price b { display: block; font-size: var(--ds-fs-24); font-weight: var(--ds-fw-800); letter-spacing: -.02em; color: var(--ds-mint-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs3-buy .hs3-price small { display: block; font-size: var(--ds-fs-12); color: var(--ds-ink-500); }
.hs3-buy .card { border-radius: var(--ds-rd-md); border-color: var(--ds-line); box-shadow: var(--ds-sh-1); }
.hs3-buy .card > .ch { padding: 10px 16px; }
.hs3-buy .card > .ch h2 { font-size: var(--ds-fs-17); font-weight: var(--ds-fw-800); }
.hs3-buy .card > .ch .ic { width: 26px; height: 26px; border-radius: var(--ds-rd-sm); font-size: 15px; }
.hs3-buy .cb { padding: 14px 16px 16px; }
.hs3-buy .formgrid label { font-size: var(--ds-fs-12); font-weight: var(--ds-fw-700); color: var(--ds-ink-700); }
.hs3-buy input:not([type=radio]):not([type=checkbox]):not([type=file]), .hs3-buy select, .hs3-buy textarea { border-radius: var(--ds-rd-sm); font-size: var(--ds-fs-14); }
.hs3-buy .buypv { border-radius: var(--ds-rd-sm); background: var(--ds-bg); border: 0; padding: 10px 12px; }
.hs3-buy .buypv small { font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.hs3-buy .buypv b { font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); }
.hs3-buy .rvup-guide { border-radius: var(--ds-rd-sm); font-size: var(--ds-fs-13); }
.hs3-buy .btn { border-radius: var(--ds-rd-sm); font-weight: var(--ds-fw-700); }

/* ---------- 3. ĐĂNG KÝ NHA KHOA /dang-ky-nha-khoa ---------- */
.dkp .dk-hero { padding: 16px 22px; border-radius: var(--ds-rd-md); border-color: var(--ds-mint-100); background: linear-gradient(120deg, var(--ds-mint-100) 0, var(--ds-mint-50) 42%, #fff 85%); }
.dkp .dk-hero .eyebrow { font-size: var(--ds-fs-11); font-weight: var(--ds-fw-700); letter-spacing: .06em; }
.dkp .dk-hero h1 { margin: 3px 0 4px; font-size: var(--ds-fs-24); font-weight: var(--ds-fw-800); letter-spacing: -.02em; }
.dkp .dk-hero p { font-size: var(--ds-fs-13); }
.dkp .dk-hero-s li { padding: 8px 10px; border-radius: var(--ds-rd-sm); border-color: var(--ds-mint-100); }
.dkp .dk-hero-s b { font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); }
.dkp .dk-hero-s small { font-size: var(--ds-fs-11); }
.dkp .dk-grid { gap: 16px; margin-top: 12px; }
.dkp .dk-main { gap: 12px; }
/* ô tìm hồ sơ: nền xanh nhạt + chữ mực (bỏ khối xanh đậm nặng), một lớp khung */
.dkp .findhero { margin-top: 0; padding: 14px 16px 12px; border-radius: var(--ds-rd-md); background: linear-gradient(120deg, var(--ds-blue-100) 0, var(--ds-blue-50) 55%, #fff 100%); border: 1px solid #d6e3f8; color: var(--ds-ink-900); box-shadow: var(--ds-sh-1); }
.dkp .findhero::after { display: none; }
.dkp .fh-top { margin-bottom: 10px; }
.dkp .fh-top .num { width: 28px; height: 28px; font-size: var(--ds-fs-14); font-weight: var(--ds-fw-800); color: #fff; }
.dkp .fh-top h2 { font-size: var(--ds-fs-17); font-weight: var(--ds-fw-800); letter-spacing: -.01em; }
.dkp .fh-top p { font-size: var(--ds-fs-13); color: var(--ds-ink-500); }
.dkp .fh-bar { border: 1px solid var(--ds-line-strong); border-radius: var(--ds-rd-sm); box-shadow: none; overflow: hidden; }
.dkp .fh-bar .q { height: 44px; }
.dkp .fh-bar .q input { font-size: var(--ds-fs-14); }
.dkp .fh-bar button { font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); padding: 0 20px; }
.dkp .fh-tips { margin-top: 8px; font-size: var(--ds-fs-12); color: var(--ds-ink-500); }
.dkp .fh-tips span { background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-rd-xs); }
.dkp .fh-tips span:first-child { background: none; border: 0; color: var(--ds-orange-700); }
/* "Không thấy hồ sơ?" thành một dòng kêu gọi gọn, bỏ viền kép 2px */
.dkp .newcta { margin-top: 10px; padding: 10px 14px; border: 1px dashed #a9c3ee; border-radius: var(--ds-rd-md); gap: 12px; }
.dkp .newcta:hover { box-shadow: none; }
.dkp .newcta .ic { width: 34px; height: 34px; font-size: 19px; }
.dkp .newcta b { font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); }
.dkp .newcta small { font-size: var(--ds-fs-12); color: var(--ds-ink-500); }
.dkp .newcta .go { padding: 8px 14px; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-700); border-radius: var(--ds-rd-sm); box-shadow: none; }
/* hai cách đăng ký: hai cột kẻ, bỏ gạch đứt */
.dkp .dk-sec-h h2 { font-size: var(--ds-fs-17); font-weight: var(--ds-fw-800); letter-spacing: -.01em; }
.dkp .dk-sec-h small { font-size: var(--ds-fs-13); }
.dkp .path { padding: 12px 14px; border-radius: var(--ds-rd-md); }
.dkp .path .hd2 { margin-bottom: 6px; }
.dkp .path .hd2 .num { width: 24px; height: 24px; border-radius: var(--ds-rd-sm); font-size: var(--ds-fs-13); font-weight: var(--ds-fw-800); }
.dkp .path .hd2 b { font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); }
.dkp .path ol li { font-size: var(--ds-fs-13); }
.dkp .path ol li::before { border-radius: var(--ds-rd-xs); }
.dkp .path .tag2 { border-top-style: solid; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); }
.dkp .dk-side .box, .dkp .box { border-radius: var(--ds-rd-md); }
.dkp .dk-side .bh h2 { font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); }
.dkp .dk-note .bb p, .dkp .dk-tags { font-size: var(--ds-fs-13); }
.dkp .newform .step-h h2 { font-size: var(--ds-fs-17); font-weight: var(--ds-fw-800); }
.dkp .btn { border-radius: var(--ds-rd-sm); }

/* ---------- 23/10 (chủ góp ý): /dang-ky-nha-khoa — thanh tìm một hàng, đậm hơn, gọn hơn ---------- */
.dkp .fh-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 170px) auto; align-items: stretch; height: 40px; background: #fff; border: 1px solid var(--ds-ink-500); }
.dkp .fh-bar .q { height: 40px; min-width: 0; padding: 0 12px; }
.dkp .fh-bar .q input { min-width: 0; height: 100%; padding: 0; font-size: var(--ds-fs-14); font-weight: var(--ds-fw-500); color: var(--ds-ink-900); }
.dkp .fh-bar .ar { height: 40px; padding: 0 12px; white-space: nowrap; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-700); border-left: 1px solid var(--ds-line-strong); background: var(--ds-blue-50); }
.dkp .fh-bar button { height: 40px; padding: 0 18px; white-space: nowrap; flex-wrap: nowrap; gap: 6px; font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); cursor: pointer; }
.dkp .fh-bar button i { flex: none; font-size: 16px; }
@media (max-width: 560px) { .dkp .fh-bar { grid-template-columns: minmax(0, 1fr) auto; height: auto; } .dkp .fh-bar .ar { display: none; } }
/* tương phản: chữ phụ đậm một mức (ink-500 → ink-700), khung viền rõ, nền khối rõ hơn */
.dkp .fh-top p, .dkp .newcta small, .dkp .fh-tips, .dkp .dk-hero p, .dkp .dk-hero-s small, .dkp .dk-sec-h small, .dkp .path .hd2 b small, .dkp .dk-tags, .dkp .dk-note .bb p, .dkp .faq-a { color: var(--ds-ink-700) !important; }
.dkp .fh-top h2, .dkp .dk-sec-h h2, .dkp .dk-side .bh h2, .dkp .path .hd2 b, .dkp .newcta b { color: var(--ds-ink-900); font-weight: var(--ds-fw-800); }
.dkp .dk-hero { border-color: #b7dfd0; background: linear-gradient(120deg, #cdeee2 0, var(--ds-mint-100) 45%, #f4fbf8 100%); }
.dkp .dk-hero-s li { border-color: #b7dfd0; }
.dkp .findhero { border-color: #b4cdf1; background: linear-gradient(120deg, #d8e6fb 0, var(--ds-blue-100) 55%, #f4f8fe 100%); }
.dkp .fh-tips span { border-color: var(--ds-line-strong); color: var(--ds-ink-700); }
.dkp .path { border-width: 1.5px; }
.dkp .path.a { border-color: #6fc7a8; background: #f6fcf9; }
.dkp .path.b { border-color: #a9b6c8; background: #f8fafc; }
.dkp .path ol li { color: var(--ds-ink-800); }
.dkp .box { border-color: var(--ds-line-strong); }
.dkp .newcta { border-color: #7fa6e6; background: #e9f0fc; }
.dkp .newcta .go { background: var(--ds-blue-600); font-weight: var(--ds-fw-800); }
.dkp .btn-mint, .dkp .dk-hero-t .dk-kinds a.on { font-weight: var(--ds-fw-800); }
/* padding gọn */
.dkp .dk-hero { padding: 14px 18px; gap: 16px; }
.dkp .dk-grid { gap: 12px; margin-top: 10px; }
.dkp .dk-main { gap: 10px; }
.dkp .findhero { padding: 12px 14px 10px; }
.dkp .fh-top { margin-bottom: 8px; gap: 10px; }
.dkp .fh-tips { margin-top: 6px; gap: 4px 6px; }
.dkp .newcta { margin-top: 8px; padding: 8px 12px; }
.dkp .path { padding: 10px 12px; }
.dkp .path ol { gap: 4px; margin-bottom: 8px; }
.dkp .dk-side { gap: 10px; }
.dkp .dk-side .bh { padding: 10px 14px; }
.dkp .dk-side .bb { padding: 10px 14px; }
.dkp .dk-note .bb p { margin-bottom: 6px; line-height: 1.55; }
.dkp .dk-tags { gap: 8px; }
.dkp .dk-top { gap: 8px; }
.dkp .box, .dkp .findhero, .dkp .path, .dkp .dk-hero { border-radius: var(--ds-rd-md); }