/* ============================================================
   OTO - KHỐI "CHI PHÍ LĂN BÁNH" (bài đánh giá xe)
   ============================================================ */

/* ---------- HERO + BOX CHI PHÍ ---------- */
.hm-clb-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; margin-bottom: 24px; align-items: stretch; }
.hm-clb-hero-img { border-radius: 10px; overflow: hidden; background: var(--hm-bg); }
.hm-clb-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 260px; }

.hm-clb-box { background: #fff; border: 1px solid var(--hm-border); border-radius: 10px; padding: 22px; }
.hm-clb-title { font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--hm-text); margin: 0 0 4px; letter-spacing: .3px; }
.hm-clb-title-bar { width: 40px; height: 3px; background: var(--hm-red); border-radius: 2px; margin-bottom: 18px; }

.hm-clb-field { margin-bottom: 14px; }
.hm-clb-field label { display: block; font-size: 13px; font-weight: 700; color: var(--hm-text); margin-bottom: 6px; }

.hm-clb-total-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; margin: 10px 0 12px; border-top: 1px solid var(--hm-border); border-bottom: 1px solid var(--hm-border); }
.hm-clb-total-label { font-size: 14px; font-weight: 600; color: var(--hm-text); }
.hm-clb-total-amount { font-size: 20px; font-weight: 800; color: var(--hm-red); }

.hm-clb-rows { display: flex; flex-direction: column; }
.hm-clb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--hm-border); }
.hm-clb-row:last-child { border-bottom: none; }
.hm-clb-row-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #374151; }
.hm-clb-row-check input { width: 16px; height: 16px; accent-color: var(--hm-red); flex: 0 0 auto; }
.hm-clb-row-check input:disabled { accent-color: #b0b8c1; cursor: not-allowed; }
.hm-clb-row.is-off .hm-clb-row-check,
.hm-clb-row.is-off .hm-clb-row-amount { color: #b0b8c1; }
.hm-clb-row-amount { font-size: 14px; font-weight: 700; color: var(--hm-text); white-space: nowrap; }
.hm-clb-row.is-off .hm-clb-row-amount { font-weight: 500; }

.hm-clb-note { font-size: 12px; font-style: italic; color: var(--hm-muted); line-height: 1.7; margin: 16px 0 0; }

/* ---------- 5 BOX SALON ---------- */
.hm-clb-salons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 30px; }
.hm-clb-salon-card { background: #fff; border: 1px solid var(--hm-border); border-radius: 10px; padding: 16px 14px; text-align: center; }
.hm-clb-salon-name { font-size: 14px; font-weight: 700; color: var(--hm-text); margin: 0 0 8px; line-height: 1.4; }
.hm-clb-salon-price { font-size: 15px; font-weight: 800; color: var(--hm-red); margin-bottom: 12px; }
.hm-clb-salon-call { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 38px; border-radius: 20px; background: #22a06b; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.hm-clb-salon-call:hover { background: #1a7f4b; color: #fff; }

/* ---------- SIDEBAR "XE MỚI ĐĂNG" ---------- */
.hm-clb-newcars { display: flex; flex-direction: column; gap: 12px; }
.hm-clb-newcar-item { display: flex; gap: 10px; align-items: center; }
.hm-clb-newcar-thumb { flex: 0 0 74px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--hm-bg); }
.hm-clb-newcar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-clb-newcar-title { font-size: 13px; font-weight: 600; line-height: 1.4; margin: 0 0 4px; }
.hm-clb-newcar-title a { color: var(--hm-text); text-decoration: none; }
.hm-clb-newcar-title a:hover { color: var(--hm-red); }
.hm-clb-newcar-price { font-size: 13px; font-weight: 800; color: var(--hm-red); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
	.hm-clb-hero { grid-template-columns: 1fr; }
	.hm-clb-salons { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.hm-clb-salons { grid-template-columns: repeat(2, 1fr); }
	.hm-clb-total-amount { font-size: 17px; }
}