/* web_khach/css/khach.css · Cổng khách: dùng biến màu, phông của kn.css; chỉ thêm khung riêng (đăng nhập, tab, bảng, xem bản in).
   Luật canh W20–W23: tiền canh phải, tên canh trái, ô cùng hàng cùng cao. Điện thoại: bảng thành thẻ (mỗi dòng một khối). */
body.ck { margin: 0; background: #FBF7EE; color: #2B2206; font-family: Inter, system-ui, sans-serif; font-size: 15px; }
.ck-goc { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; }
.ck-ban-in { display: none; }
@media print { body.ck > *:not(#ban-in) { display: none !important; } .ck-ban-in { display: block; } }

.ck-dang-nhap { max-width: 380px; margin: 10vh auto 0; background: #fff; border: 1px solid #E8DFC9; border-radius: 12px; padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; }
.ck-logo { margin-bottom: 8px; }
.ck-tieu-de { font-size: 22px; margin: 0; }
.ck-phu { color: #6B5A45; margin: 0 0 8px; }
.ck-phu--nho { font-size: 13px; margin-top: 8px; }
.ck-nhan { font-weight: 600; margin-top: 6px; }
.ck-o { font: inherit; padding: 10px 12px; border: 1px solid #D9CCAE; border-radius: 8px; background: #fff; min-height: 44px; box-sizing: border-box; }
.ck-o--nho { min-height: 40px; padding: 6px 10px; }
.ck-o:focus-visible, .ck-nut:focus-visible, .ck-bang tr.bam:focus-visible { outline: 3px solid #D6A230; outline-offset: 2px; }
.ck-loi { color: #B42318; margin: 4px 0; min-height: 1.2em; }
.ck-nut { font: inherit; min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1px solid #D9CCAE; background: #fff; color: #2B2206; cursor: pointer; }
.ck-nut--chinh { background: #D6A230; border-color: #D6A230; color: #2B2206; font-weight: 700; }
.ck-nut:disabled { opacity: .6; cursor: default; }

.ck-dau { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #E8DFC9; }
.ck-dau__ai { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ck-dau__ai span { color: #6B5A45; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-tab { display: flex; gap: 4px; margin: 12px 0; flex-wrap: wrap; }
.ck-tab__nut { font: inherit; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: #6B5A45; cursor: pointer; }
.ck-tab__nut[aria-selected="true"] { background: #2B2206; color: #fff; font-weight: 600; }
.ck-loc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ck-tong { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #E8DFC9; border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; font-size: 17px; }

.ck-bang-boc { overflow-x: auto; background: #fff; border: 1px solid #E8DFC9; border-radius: 10px; }
.ck-bang { width: 100%; border-collapse: collapse; }
.ck-bang th, .ck-bang td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid #F1EEE6; }
.ck-bang th { background: #FBF5E6; font-weight: 600; font-size: 13px; color: #6B5A45; white-space: nowrap; }
.ck-bang .so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-bang tr.bam { cursor: pointer; }
.ck-bang tr.bam:hover { background: #FBF5E6; }
.ck-rong { padding: 24px 0; }

.ck-xem { position: fixed; inset: 0; background: rgba(43, 34, 6, .55); display: flex; flex-direction: column; padding: 12px; z-index: 50; }
.ck-xem__dau { display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px 12px; border-radius: 10px 10px 0 0; flex-wrap: wrap; }
.ck-xem__dau b { flex: 1; }
.ck-xem__khung { flex: 1; width: 100%; border: 0; background: #fff; border-radius: 0 0 10px 10px; }

.ck-bao { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #2B2206; color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 60; max-width: calc(100vw - 32px); }
.ck-bao--loi { background: #B42318; }

@media (max-width: 640px) {
  .ck-bang thead { display: none; }
  .ck-bang, .ck-bang tbody, .ck-bang tr, .ck-bang td { display: block; width: 100%; box-sizing: border-box; }
  .ck-bang tr { border-bottom: 8px solid #FBF7EE; padding: 4px 0; }
  .ck-bang td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 12px; text-align: right; }
  .ck-bang td::before { content: attr(data-nhan); color: #6B5A45; font-size: 13px; text-align: left; }
  .ck-bang td.so { white-space: normal; }
}

/* 13/11 đợt 2: khối Gửi yêu cầu báo giá */
.ck-khoi { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin: 0 0 20px; border: 1px solid #E6DCC6; border-radius: 12px; background: #FFFDF8; }
.ck-khoi__tieu { font-size: 1.05rem; margin: 4px 0 8px; }
.ck-o--dai { width: 100%; min-height: 140px; resize: vertical; font-family: inherit; line-height: 1.5; }
.ck-khoi .ck-o { width: 100%; }
.ck-khoi .ck-nut--chinh { align-self: flex-start; }