/* Định Giá Xe Cũ – giao diện công cụ (độc lập theme) */
.dgx {
	--dgx-brand: #15477E;
	--dgx-brand-2: #0F3762;
	--dgx-ink: #141416;
	--dgx-text: #111111;
	--dgx-muted: #5F6874;
	--dgx-line: #E0E4EA;
	--dgx-soft: #EEF1F5;
	--dgx-input: #FBFBFB;
	--dgx-card: #FFFFFF;
	--dgx-radius: 18px;
	color: var(--dgx-text);
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	max-width: 1000px;
	margin: 0 auto;
	box-sizing: border-box;
}
.dgx *, .dgx *::before, .dgx *::after { box-sizing: inherit; }
.dgx a { color: var(--dgx-brand); }

/* Hero */
.dgx-hero { text-align: center; margin: 8px auto 22px; max-width: 780px; }
.dgx-h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: var(--dgx-ink); margin: 0 0 10px; letter-spacing: -0.02em; line-height: 1.2; }
.dgx-intro { color: var(--dgx-muted); margin: 0; font-size: 15.5px; }

/* Card */
.dgx-card, .dgx-form { background: var(--dgx-card); border: 1px solid var(--dgx-line); border-radius: var(--dgx-radius); padding: 22px; }
.dgx-card + .dgx-card { margin-top: 16px; }

/* Form */
.dgx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
.dgx-field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--dgx-ink); margin-bottom: 6px; }
.dgx-req { color: #D33; }
.dgx-opt { color: var(--dgx-muted); font-weight: 500; font-size: 12.5px; }
.dgx-input {
	width: 100%; border: 1px solid #DCDCDC; border-radius: 10px; background: var(--dgx-input);
	padding: 11px 13px; font: inherit; font-size: 14.5px; color: var(--dgx-brand); outline: none;
	transition: border-color .15s, box-shadow .2s; min-height: 46px; margin: 0;
}
.dgx-input:focus { border-color: var(--dgx-brand); box-shadow: 0 0 0 3px rgba(21, 71, 126, .14); }
.dgx-input.is-flash { box-shadow: 0 0 0 3px rgba(21, 71, 126, .28); }
select.dgx-input { cursor: pointer; }
.dgx-brand-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; }
.dgx-brand-disp { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dgx-brand-disp .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgx-brand-disp img { width: 24px; height: 24px; object-fit: contain; }
.dgx-badge {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 26px; height: 26px; border-radius: 50%; background: var(--dgx-soft); color: var(--dgx-brand);
	font-weight: 800; font-size: 13px;
}
.dgx-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.dgx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 11px;
	padding: 12px 22px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none !important;
	border: 1px solid transparent; transition: background .15s, color .15s, transform .05s; line-height: 1.2;
}
.dgx-btn:active { transform: translateY(1px); }
.dgx-btn-primary { background: var(--dgx-brand); color: #fff !important; }
.dgx-btn-primary:hover { background: var(--dgx-brand-2); }
.dgx-btn-ghost { background: #fff; color: var(--dgx-brand) !important; border-color: #D3DBE5; }
.dgx-btn-ghost:hover { background: var(--dgx-soft); }
.dgx-btn-block { display: flex; width: 100%; margin-top: 10px; }
.dgx-remaining { margin-top: 12px; font-size: 12.5px; color: var(--dgx-muted); text-align: right; }

.dgx-alert { margin: 16px auto 0; padding: 13px 16px; border-radius: 12px; background: #FDF0F0; border: 1px solid #F3D2D2; color: #9B2C2C; font-size: 14px; }

/* Result */
.dgx-result { display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin-top: 20px; align-items: start; }
.dgx-main { padding: 26px; }
.dgx-headline { text-align: center; padding-bottom: 20px; border-bottom: 1px solid #EEE; }
.dgx-cap { font-size: 12.5px; font-weight: 700; color: var(--dgx-muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.dgx-headline .dgx-cap { margin: 0; }
.dgx-bigprice { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 44px; color: var(--dgx-brand); letter-spacing: -.02em; margin: 4px 0 2px; line-height: 1.15; }
.dgx-bigprice span { font-size: 22px; color: var(--dgx-muted); font-weight: 600; }
.dgx-sub { font-size: 12.5px; color: var(--dgx-muted); margin-bottom: 18px; }
.dgx-range { margin: 0 44px 14px; }
.dgx-bar { position: relative; height: 8px; background: linear-gradient(90deg, #E4E8EE, #C9D3DE, #E4E8EE); border-radius: 20px; margin-bottom: 8px; }
.dgx-bar span { position: absolute; top: -4px; transform: translateX(-50%); width: 16px; height: 16px; background: var(--dgx-brand); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.dgx-range-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--dgx-muted); font-weight: 600; }
.dgx-range-labels strong { color: var(--dgx-text); }
.dgx-tipbox { margin: 0 44px 12px; border-radius: 11px; padding: 10px 14px; font-size: 13px; line-height: 1.55; }
.dgx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 700; background: #F1F4F8; color: #5A6B7D; border: 1px solid #E1E7EE; }
.dgx-pill small { font-weight: 500; }

.dgx-sec { padding: 18px 0; border-bottom: 1px solid #EEE; }
.dgx-sec-last { border-bottom: 0; padding-bottom: 0; }
.dgx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dgx-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dgx-mini { border: 1px solid #EEE; border-radius: 12px; padding: 12px 14px; }
.dgx-mini.is-active { border-color: var(--dgx-brand); box-shadow: inset 0 0 0 1px var(--dgx-brand); }
.dgx-mini-l { font-size: 12.5px; color: var(--dgx-muted); margin-bottom: 2px; }
.dgx-mini-v { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 19px; color: var(--dgx-brand); }
.dgx-mini-s { font-size: 12px; color: var(--dgx-muted); margin-top: 2px; }
.dgx-note { font-size: 12.5px; color: var(--dgx-muted); margin: 8px 0 0; line-height: 1.55; }
.dgx-note strong { color: var(--dgx-text); }

.dgx-verdict { border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.6; }
.dgx-verdict-label { font-weight: 800; letter-spacing: .03em; margin-bottom: 4px; }
.dgx-verdict-tip { margin-top: 6px; font-weight: 600; }

.dgx-tone-green { background: #EAF6EE; border: 1px solid #C9E6D3; color: #2B6E43; }
.dgx-tone-red { background: #FDF0F0; border: 1px solid #F3D2D2; color: #A12F2F; }
.dgx-tone-amber { background: #FFF6E5; border: 1px solid #F5DDAE; color: #8A5A00; }
.dgx-tone-blue { background: #EDF4FC; border: 1px solid #CFE0F3; color: var(--dgx-brand); }

.dgx-fees-toggle { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--dgx-brand); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.dgx-fees-toggle svg { transition: transform .2s; }
.dgx-fees-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dgx-fees { margin-top: 10px; }
.dgx-fees table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 0; }
.dgx-fees td { padding: 8px 0; border-bottom: 1px dashed #E6E9EE; }
.dgx-fees td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.dgx-fees .dgx-total td { border-bottom: 0; font-weight: 800; color: var(--dgx-brand); padding-top: 10px; }

.dgx-side .dgx-card { padding: 18px; }
.dgx-conf { font-size: 15px; }
.dgx-conf strong { padding: 2px 10px; border-radius: 20px; background: var(--dgx-soft); color: var(--dgx-brand); }
.dgx-conf-cao { background: #EAF6EE !important; color: #2B6E43 !important; }
.dgx-conf-thap, .dgx-conf-uoc-tinh { background: #FFF6E5 !important; color: #8A5A00 !important; }
.dgx-scale { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.dgx-scale li { position: relative; padding: 6px 0 6px 20px; color: var(--dgx-muted); }
.dgx-scale li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 10px; height: 10px; border-radius: 50%; }
.dgx-scale li.is-active { color: var(--dgx-text); font-weight: 700; }
.dgx-dot-red::before { background: #D64545; }
.dgx-dot-green::before { background: #2F9E5B; }
.dgx-dot-blue::before { background: var(--dgx-brand); }
.dgx-dot-amber::before { background: #E3A008; }
.dgx-disclaimer { font-size: 12px; color: var(--dgx-muted); margin: 12px 4px 0; }

/* Biểu đồ SVG & Bảng SEO + Chợ xe */
.dgx-chart { width: 100%; height: auto; display: block; background: #FAFBFC; border: 1px solid #EEF1F5; border-radius: 12px; padding: 6px; }
.dgx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dgx-table th, .dgx-table td { padding: 10px 12px; border-bottom: 1px solid #EEF1F5; text-align: left; white-space: nowrap; }
.dgx-table th { background: #F6F8FA; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--dgx-muted); }
.dgx-table tr:hover td { background: #FAFCFF; }
.dgx-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.dgx-listing-item { display: flex; flex-direction: column; padding: 16px 18px; }
.dgx-listing-item + .dgx-listing-item { margin-top: 0; }
.dgx-seller-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.dgx-seller-chinh_chu { background: #EAF6EE; color: #2B6E43; border: 1px solid #C9E6D3; }
.dgx-seller-nguoi_buon { background: #FFF6E5; color: #8A5A00; border: 1px solid #F5DDAE; }

/* Popular */
.dgx-popular, .dgx-faq { margin-top: 22px; }
.dgx-h2 { font-size: 19px; font-weight: 800; color: var(--dgx-ink); margin: 0 0 14px; }
.dgx-h2 span { font-weight: 500; font-size: 14px; color: var(--dgx-muted); }
.dgx-pop-group { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid #F0F2F5; align-items: start; }
.dgx-pop-group:first-of-type { border-top: 0; }
.dgx-pop-title { font-weight: 700; font-size: 13.5px; color: var(--dgx-ink); padding-top: 5px; }
.dgx-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dgx-chip { background: #F5F7FA; border: 1px solid #E3E8EF; color: var(--dgx-brand); border-radius: 30px; padding: 5px 13px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none !important; transition: background .15s, color .15s; }
.dgx-chip:hover, .dgx-chip:focus, .dgx-chip.is-active { background: var(--dgx-brand); color: #fff !important; border-color: var(--dgx-brand); }

/* FAQ */
.dgx-faq details { border-top: 1px solid #F0F2F5; padding: 12px 0; }
.dgx-faq details:first-of-type { border-top: 0; }
.dgx-faq summary { cursor: pointer; font-weight: 700; color: var(--dgx-ink); list-style: none; position: relative; padding-right: 26px; }
.dgx-faq summary::-webkit-details-marker { display: none; }
.dgx-faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 20px; color: var(--dgx-brand); }
.dgx-faq details[open] summary::after { content: "−"; }
.dgx-faq p { margin: 8px 0 0; color: var(--dgx-muted); font-size: 14px; }

/* Modal */
.dgx-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(15, 25, 40, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dgx-modal[hidden] { display: none; }
.dgx-modal-box { background: #fff; border-radius: 16px; width: 100%; max-width: 720px; max-height: 86vh; display: flex; flex-direction: column; padding: 18px; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dgx-modal-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; color: var(--dgx-ink); }
.dgx-modal-x { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--dgx-muted); padding: 0 4px; }
.dgx-brand-grid { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 2px; }
.dgx-brand-grid button { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E6EAF0; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--dgx-ink); cursor: pointer; text-align: left; }
.dgx-brand-grid button:hover { border-color: var(--dgx-brand); background: #F5F8FC; }
.dgx-brand-grid button img { width: 26px; height: 26px; object-fit: contain; }
.dgx-brand-grid button[hidden] { display: none; }

/* Responsive */
@media (max-width: 860px) {
	.dgx-result { grid-template-columns: 1fr; }
	.dgx-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
	.dgx-card, .dgx-form, .dgx-main { padding: 16px; border-radius: 14px; }
	.dgx-grid { grid-template-columns: 1fr !important; }
	.dgx-range, .dgx-tipbox { margin-left: 0; margin-right: 0; }
	.dgx-bigprice { font-size: 36px; }
	.dgx-two, .dgx-three { grid-template-columns: 1fr; }
	.dgx-pop-group { grid-template-columns: 1fr; gap: 6px; }
	.dgx-actions .dgx-btn { flex: 1; }
}