/* =============================================================================
   Module "Thiet ke lai tu anh"
   Nap SAU base.css. Chi chua phan rieng cua module nay; mau sac, nut, the,
   thanh dieu huong va chan trang deu lay tu base.css.
   ============================================================================= */

/* Trang cong cu dung khung hep hon trang chu cho de doc */
main.wrap { max-width: 820px; padding-top: 8px; padding-bottom: 40px; }

/* ---------- Thong bao toan trang ---------- */
.banner {
  margin: 18px 0 0;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  line-height: 1.55;
}
.banner-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.banner-info { background: var(--info-bg); border: 1px solid var(--info-line); color: var(--info-ink); }

/* ---------- Dau muc tung buoc ---------- */
.step { margin: 30px 0 42px; }
.step-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.step-num {
  flex: none;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-700);
  color: #fff;
  font-size: 14px; font-weight: 700;
}
.step-title { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.step-note { color: var(--ink-2); font-size: 14.5px; margin: 2px 0 16px; }

/* ---------- Cac bien the nut rieng cua module ---------- */
.btn-camera { width: 100%; margin-top: 12px; }
.btn-small { padding: 11px 16px; font-size: 14px; }   /* 11px de cham toi 44px */
.btn-cta { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.btn-cta:hover { background: var(--green-700); border-color: var(--green-700); }

/* ---------- Dropzone ---------- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dropzone {
  position: relative;
  margin-top: 14px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 210px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  overflow: hidden;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--ink-3); outline: none; }
.dropzone.is-drag { border-color: var(--green-600); background: var(--surface-2); }
.dropzone.has-image { border-style: solid; min-height: 0; cursor: default; }

.dz-inner { text-align: center; padding: 32px 20px; color: var(--ink-2); }
.dz-icon { width: 34px; height: 34px; color: var(--ink-3); margin: 0 auto 10px; }
.dz-main { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.dz-sub { margin: 4px 0 0; font-size: 14px; }
/* Anh xem truoc: gioi han chieu cao de khong chiem het man hinh dien thoai,
   nguoi dung con thay duoc phan nhan dien va o ghi chu ngay ben duoi. */
.dz-preview {
  width: 100%;
  height: auto;
  max-height: 42vh;
  object-fit: contain;
  background: var(--surface-2);
}
@media (min-width: 620px) { .dz-preview { max-height: 380px; } }
.dz-change {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(27, 31, 35, .78); color: #fff;
  border: 0; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; cursor: pointer;
  backdrop-filter: blur(6px);
}
.dz-change:hover { background: rgba(27, 31, 35, .92); }

/* ---------- Tips ---------- */
.tips { margin: 18px 0 0; padding: 0; list-style: none; }
.tips li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-2);
  font-size: 14.5px;
  margin-bottom: 6px;
}
.tips li::before {
  content: "";
  position: absolute; left: 6px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green-600);
}

/* ---------- Detect box ---------- */
.detect-box {
  margin-top: 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.detect-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detect-label { font-size: 15px; color: var(--ink); }
.detect-label b { font-weight: 650; }

.spinner {
  flex: none;
  width: 15px; height: 15px;
  border: 2px solid var(--line);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.detect-edit {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid; gap: 10px;
}
.field { display: grid; gap: 4px; }
.field label { font-size: 13px; color: var(--ink-2); }
.field select {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 15px;
}

/* ---------- O ghi chu cua khach ---------- */
.note-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.note-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.note-optional {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
}
#noteInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  min-height: 74px;
}
#noteInput:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(34, 164, 78, .16);
}
#noteInput::placeholder { color: var(--ink-3); }

#briefInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  min-height: 110px;
}
#briefInput:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(34, 164, 78, .16);
}
#briefInput::placeholder { color: var(--ink-3); }

.note-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.note-chips { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.note-chip {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 5px 11px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  /* nowrap + khoi cha space-between lam goi y dai day tran ra ngoai o 360px */
  overflow-wrap: anywhere;
  max-width: 100%;
}
.note-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.note-count {
  flex: none;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}
.note-count.is-near { color: var(--warn-ink); }
.note-hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.warnings { margin: 12px 0 0; padding: 0; list-style: none; }
.warnings li {
  font-size: 13.5px; color: var(--warn-ink);
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 8px; padding: 8px 10px; margin-top: 6px;
}

/* ---------- Style grid ---------- */
/* The anh 4:3, ten phong cach viet bang chu that (.style-nhan) nen hai cot tren
   dien thoai van doc duoc; 3 cot tu 620 px (6 the mac dinh = 3 hang / 2 hang). */
.style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 620px) { .style-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

.style-card {
  position: relative;
  display: block;
  width: 100%;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: var(--ink);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
/* Khung ty le 16:9 kieu "padding-top" co dien, KHONG dung aspect-ratio: trong
   grid 1-cot tren dien thoai, aspect-ratio tren grid item phu thuoc viec
   trinh duyet tinh track cao truoc hay sau anh tai xong — lech nhip la cac
   the de hinh de len nhau. Pseudo-element nay luon co chieu cao xac dinh
   ngay tu dau (khong phu thuoc grid/aspect-ratio/anh tai xong), nen khong
   con dua may ru nua. */
.style-card::before { content: ""; display: block; padding-top: 75%; }
.style-card:hover { transform: scale(1.015); box-shadow: var(--shadow); }
.style-card:active { transform: scale(.98); }
.style-card.is-selected { border-color: var(--green-600); box-shadow: 0 0 0 2px var(--green-600); }

.style-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dai ten de len dung dai chu in san trong anh (75-97% chieu cao anh, nua trai):
   the 4:3 cat hai ben anh 16:9 chu khong cat tren duoi, nen dai cao toi thieu
   28% the la che kin. */
.style-nhan {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  min-height: 28%;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 6px 10px 7px;
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  text-align: left;
}
.style-nhan b {
  font-size: 14px; font-weight: 720; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.style-nhan small {
  font-size: 10px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Luon giu cho dong phu (ke ca khi trong) de ten cac the cung hang thang nhau */
.style-nhan small { min-height: 1.3em; }
.style-card.is-selected .style-nhan { background: var(--green-50); }
.style-card.is-selected .style-nhan b { color: var(--green-800); }
@media (max-width: 379px) {
  .style-nhan { padding: 5px 8px 6px; }
  .style-nhan b { font-size: 13px; }
}

/* The tron danh dau da chon, goc tren phai. Khong chu — dung icon dau tick. */
.style-check {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--green-600);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6);
  transition: opacity .12s, transform .12s;
}
.style-check svg { width: 14px; height: 14px; stroke: #fff; }
.style-card.is-selected .style-check { opacity: 1; transform: scale(1); }

/* Chua cho vien the dang chon (box-shadow 2px). KHONG cuon rieng trong luoi: tren
   dien thoai, khung cuon long trong trang lam ngon tay ket giua hai thanh cuon;
   danh sach dai da co nut "Xem them" / "Thu gon". */
.style-grid {
  padding: 2px;
  margin: 0 -2px;
}

/* ---------- Nut xem them phong cach ---------- */
.btn-more {
  width: 100%;
  margin-top: 12px;
  color: var(--ink-2);
}
.more-chevron {
  width: 17px; height: 17px;
  transition: transform .18s;
}
.btn-more.is-open .more-chevron { transform: rotate(180deg); }

/* ---------- O tai anh phong cach rieng ---------- */
.own-style {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.own-style.is-selected { border-style: solid; border-color: var(--green-600); box-shadow: 0 0 0 2px var(--green-600) inset; }
.own-style-main { display: flex; align-items: center; gap: 12px; flex: 1 1 210px; min-width: 0; }
.own-style-icon { width: 26px; height: 26px; flex: none; color: var(--ink-3); }
.own-style-title { margin: 0; font-size: 14.5px; font-weight: 650; }
.own-style-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.own-style-thumb {
  width: 54px; height: 54px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  border: 1px solid var(--line);
}

/* ---------- Cac phuong an da tao truoc ---------- */
.history {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.history-title { font-size: 16px; font-weight: 650; margin: 0; }
.history-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.history-item {
  flex: none;
  width: 128px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: border-color .15s;
}
.history-item:hover { border-color: var(--ink-3); }
.history-item.is-current { border-color: var(--green-600); box-shadow: 0 0 0 2px var(--green-600) inset; }
.history-item img { width: 100%; height: 86px; object-fit: cover; display: block; background: var(--surface-2); }
.history-meta { padding: 7px 9px 9px; }
.history-style { font-size: 12.5px; font-weight: 650; line-height: 1.3; }
.history-when { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.history-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---------- Waiting ---------- */
.waiting-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
}
.progress-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
}
.progress-fill {
  height: 100%;
  width: 2%;
  background: var(--green-600);
  border-radius: 999px;
  transition: width .5s ease;
}
.waiting-stage { margin: 0; font-size: 17px; font-weight: 600; }
.waiting-note { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.waiting-thumb {
  margin: 18px auto 0;
  max-width: 240px;
  border-radius: var(--radius-sm);
  opacity: .55;
  filter: saturate(.5);
}
.waiting-card .link-btn { margin-top: 18px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tab {
  padding: 9px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.tab.is-active { background: var(--green-700); color: #fff; border-color: var(--green-700); }
/* Tab "Phuong an 1/2" o man ket qua. Truoc day khong co luat nao: hai nut dinh
   nhau bang khoang trang cua chu va dinh sat hang nut ben duoi. */
.result-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.result-tabs:empty { display: none; }

/* ---------- Compare slider ---------- */
.compare {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.cmp-img { width: 100%; display: block; }
/* Anh SAU phu kin khung (khung lay ti le anh goc): anh AI tra ve thuong lech ti le vai
   diem anh, de nguyen thi hut mot dai trang o day (ra soat 12/10/2026). */
.compare .cmp-after { height: 100%; object-fit: cover; }
.cmp-before-wrap {
  position: absolute; inset: 0;
  width: 50%;
  overflow: hidden;
}
.cmp-before-wrap .cmp-before {
  position: absolute; top: 0; left: 0;
  height: 100%;
  width: auto;
  max-width: none;
}
.cmp-handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 40px;
  margin-left: -20px;
  cursor: ew-resize;
  display: grid;
  place-items: center;
}
.cmp-handle::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 6px rgba(0, 0, 0, .35);
}
.cmp-grip {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.cmp-grip::before, .cmp-grip::after {
  content: "";
  position: absolute; top: 50%; margin-top: -4px;
  border: 4px solid transparent;
}
.cmp-grip::before { left: 7px; border-right-color: #1b1f23; }
.cmp-grip::after { right: 7px; border-left-color: #1b1f23; }

.cmp-tag {
  position: absolute; top: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(27, 31, 35, .7);
  color: #fff;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.cmp-tag-left { left: 10px; }
.cmp-tag-right { right: 10px; }

/* ---------- Result actions ---------- */
.result-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}
@media (min-width: 520px) { .result-actions { grid-template-columns: repeat(3, 1fr); } }

/* ---------- CTA ---------- */
.cta {
  margin-top: 26px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.cta-text { margin: 0 0 12px; font-size: 15.5px; color: var(--ink-2); }

/* ---------- Error ---------- */
.error-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.error-msg { margin: 0; font-size: 16px; color: var(--ink); line-height: 1.55; }


/* Phan chan trang va giam chuyen dong nam trong base.css */

/* =============================================================================
   PHAN RIENG CUA TUNG TIEN ICH
   ============================================================================= */

/* ---------- Dau trang tien ich ---------- */
.tool-head { padding: 22px 0 4px; }
.tool-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  margin-bottom: 12px;
}
.tool-back:hover { color: var(--green-700); }
.tool-back svg { width: 16px; height: 16px; }
.tool-title { font-size: clamp(23px, 3.4vw, 30px); font-weight: 720; margin: 0; letter-spacing: -.018em; }
.tool-tagline { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }

/* ---------- Thu vien vat lieu ---------- */
.surface-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.surface-hint { margin: 10px 0 4px; font-size: 13.5px; color: var(--ink-2); }

.material-group {
  margin: 18px 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
  grid-column: 1 / -1;
}
.material-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}
@media (min-width: 620px) { .material-grid { grid-template-columns: repeat(4, 1fr); } }

.material-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  font: inherit; color: var(--ink);
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  /* <button> mac dinh can noi dung GIUA theo chieu doc: the canh co ten dai hai
     dong lam o mau tut xuong. Xep tu tren xuong nhu the thuong. */
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
}
.material-card:hover { border-color: var(--green-400); box-shadow: var(--shadow-sm); }
.material-card:active { transform: scale(.985); }
.material-card.is-selected { border-color: var(--green-600); box-shadow: 0 0 0 2px var(--green-600) inset; }
/* Dang chon: dau tick + nen nhan nhu the phong cach (truoc chi co vien mong, kho nhan ra) */
.material-card { position: relative; }
.material-card.is-selected .style-check { opacity: 1; transform: scale(1); }
.material-card.is-selected .material-name { background: var(--green-50); color: var(--green-800); font-weight: 650; }
.material-swatch { display: block; height: 76px; }
.material-swatch img { width: 100%; height: 76px; object-fit: cover; display: block; }
.material-name {
  display: block; padding: 8px 10px 10px;
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
}

/* ---------- Khoanh vung tren anh ---------- */
.region-hint {
  margin: 14px 0 10px;
  font-size: 14px; color: var(--ink-2);
}
.region-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  cursor: crosshair;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
/* Khung phai OM SAT anh. Truoc day anh chup doc bi co lai giua o, chua hai
   dai trong hai ben, ma toa do lai do tren CA o -> mat na cat lech han cho. */
.region-stage { width: fit-content; max-width: 100%; margin-inline: auto; }
.region-stage img { display: block; width: auto; max-width: 100%; max-height: 52vh; }
.region-rect {
  position: absolute;
  border: 2px solid var(--green-500);
  background: rgba(34, 164, 78, .16);
  box-shadow: 0 0 0 9999px rgba(15, 61, 36, .3);
  pointer-events: none;
}

/* Tay nam de chinh lai khung. Truoc day keo lech mot chut la phai keo lai tu
   dau, rat buc tren dien thoai. Vung bam rong 30px du cho ngon tay. */
.region-handle {
  position: absolute;
  /* 44px la vung CHAM; cham tron nhin thay chi 12px (xem ::after ben duoi) */
  width: 44px; height: 44px;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.region-handle::after {
  content: '';
  position: absolute; inset: 16px;
  background: #fff;
  border: 2px solid var(--green-600);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.region-handle[data-corner="nw"] { left: -22px; top: -22px; cursor: nwse-resize; }
.region-handle[data-corner="ne"] { right: -22px; top: -22px; cursor: nesw-resize; }
.region-handle[data-corner="sw"] { left: -22px; bottom: -22px; cursor: nesw-resize; }
.region-handle[data-corner="se"] { right: -22px; bottom: -22px; cursor: nwse-resize; }
.region-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 8px; margin-top: 4px;
}
/* Ngon tay can it nhat 44px. Truoc day hai nut nay chi cao 23px. */
.region-foot .link-btn {
  min-height: 44px; padding: 0 10px;
  display: inline-flex; align-items: center;
}
.region-status { font-size: 13px; color: var(--ink-3); }
.region-status.is-set { color: var(--green-700); font-weight: 600; }

#replaceInput {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 15px; line-height: 1.5;
  resize: vertical; min-height: 62px;
}
#replaceInput:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(34, 164, 78, .16);
}
#replaceInput::placeholder { color: var(--ink-3); }

/* ---------- Ket qua tra vat tu ---------- */
.vt-group { margin-top: 18px; }
.vt-group-name {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.vt-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.vt-main {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.vt-label { font-size: 15px; font-weight: 650; }
.vt-cat { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.vt-detail { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.vt-price { font-size: 14px; font-weight: 650; color: var(--green-700); margin-top: 6px; }
.vt-noprice { color: var(--ink-3); font-weight: 400; font-size: 13px; }

.region-acts { display: inline-flex; gap: 14px; }

/* Phuong an xong trong luc khach da an man cho: nhap nhe cho de thay */
.history.vua-xong {
  outline: 2px solid var(--green-500);
  outline-offset: 4px;
  border-radius: var(--radius);
  animation: vua-xong 1.1s ease-in-out 2;
}
@keyframes vua-xong { 50% { outline-color: transparent; } }

/* =============================================================================
   LUONG MOI: MOT MAN HINH CHO CA BAY TIEN ICH
   ========================================================================== */

/* --- Buoc 2: chon tien ich ------------------------------------------------ */
.tool-choice { display: grid; gap: 10px; }
@media (min-width: 620px) { .tool-choice { grid-template-columns: 1fr 1fr; } }

.tool-pick {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; min-height: 64px; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.tool-pick:hover:not(:disabled) { border-color: var(--green-500); background: var(--green-50); }
.tool-pick.is-active { border-color: var(--green-600); background: var(--green-50); }
.tool-pick.is-off {
  opacity: 1;
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-2);
  cursor: not-allowed;
}
.tool-pick.is-off .tool-pick-icon { background: var(--surface-2); color: var(--ink-3); }

.tool-pick-icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 10px;
  background: var(--green-50); color: var(--green-700);
  display: grid; place-items: center;
}
.tool-pick.is-active .tool-pick-icon { background: var(--green-600); color: #fff; }
.tool-pick-icon svg { width: 20px; height: 20px; }
.tool-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-pick-name { font-size: 14.5px; font-weight: 640; }
.tool-pick-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* --- Thanh nut Tao anh ---------------------------------------------------- */
.submit-bar { margin: 22px 0 8px; }
.btn-lg { min-height: 54px; font-size: 16.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.submit-hint {
  margin: 9px 0 0; text-align: center;
  font-size: 13px; color: var(--ink-2);
}

.detect-low { color: var(--warn-ink); font-size: 12.5px; font-weight: 620; }

.note-required {
  font-size: 11.5px; font-weight: 600;
  color: var(--green-700); background: var(--green-50);
  border-radius: var(--radius-pill); padding: 2px 8px; margin-left: 7px;
}

/* --- Khoang gia o tien ich tra vat tu ------------------------------------- */
.vt-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.vt-gia { font-size: 14px; font-weight: 640; color: var(--green-800); }
.vt-gia.is-uoctinh { color: var(--ink-2); }

/* Nhan phan biet gia AI uoc tinh voi gia that cua bo phan du toan.
   Khach doc bang nay roi di dam phan voi tho, nen khong the de ho nham. */
.vt-nguon {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  background: var(--warn-bg); color: var(--warn-ink);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-pill); padding: 1px 7px;
  cursor: help;
}
.vt-ghichu { font-size: 12px; color: var(--ink-2); width: 100%; }

/* --- Ket qua "Boc tach noi that": anh + hover ben trai, danh sach ben phai - */
.bt-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
/* Phan chu co the dai (mo ta khong gian) phai CO LAI va tu xuong dong BEN
   TRONG no, khong duoc day the tong chi phi roi xuong dong duoi — do la loi
   da gap: flex-wrap tren .bt-head khien ca khoi nhay dong khi mo ta dai. */
.bt-head-text { flex: 1 1 auto; min-width: 0; }
.bt-total-card {
  flex: none; min-width: 220px;
  background: var(--green-800); color: #fff;
  border-radius: var(--radius); padding: 14px 18px;
  text-align: right;
}
.bt-total-label {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-100);
}
.bt-total-value { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
.bt-total-sub { margin: 2px 0 0; font-size: 12px; color: var(--green-100); }

.bt-layout { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .bt-layout { grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); } }

/* position: relative — moc cho .bt-tooltip (nam ngoai .bt-stage de khong bi
   overflow:hidden cua khung anh cat, tran duoc sang cot danh sach). */
.bt-stage-wrap { position: relative; z-index: 2; min-width: 0; align-self: start; }
.bt-stage {
  /* width: fit-content (khong phai 100%) de khung LUON om khit dung anh ben
     trong — anh doc (cao hon rong) hay bi gioi han boi max-height ben duoi,
     va khung phai co theo chu khong duoc stretch het cot, neu khong
     .bt-glow (phu kin 100% khung) se lech khoi anh thuc te. */
  position: relative;
  width: fit-content;
  max-width: 100%;
  max-height: 640px;
  margin: 0;  /* can trai thang le tieu de "Ket qua"; dien thoai can giua (o duoi) */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
/* Cao toi da bang .bt-list (max-height 640px o duoi) de hai khung can doi
   nhau khi anh khach chup theo chieu doc. Anh ngang binh thuong hau nhu
   khong bao gio cham tran nay nen khong doi gi voi da so anh. */
.bt-photo { display: block; max-width: 100%; max-height: 640px; width: auto; height: auto; }
.bt-glow {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.bt-stage-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  margin: 0; padding: 5px 12px;
  font-size: 12.5px; color: #fff; background: rgba(15, 61, 36, .72);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

/* Khung chi tiet khi hover: ten, phu de, bang vat lieu/don gia/khoi luong/chi
   phi, roi giai thich cach tinh + nguon gia — khop bo cuc trong anh mau. */
.bt-tooltip {
  /* left/top dat bang JS (dinhViTooltip trong app.js): canh vat the, ben nao
     it de len anh hon, kep trong man hinh. Khong dung transform de do duoc
     dung offsetWidth/offsetHeight. */
  position: absolute; z-index: 30;
  width: min(280px, 72vw); padding: 12px 14px;
  background: var(--ink); color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  pointer-events: none;
}
.bt-tooltip-name { margin: 0; font-size: 14.5px; font-weight: 650; }
.bt-tooltip-sub { margin: 2px 0 10px; font-size: 12px; color: var(--green-100); }
.bt-tooltip-table { display: flex; flex-direction: column; gap: 5px; }
.bt-tt-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 12.5px; padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.bt-tt-row:first-child { border-top: none; padding-top: 0; }
.bt-tt-k { color: rgba(255, 255, 255, .6); flex: none; }
.bt-tt-v { text-align: right; }
.bt-badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  background: var(--green-500); color: #06220f;
  border-radius: var(--radius-pill);
}
.bt-tooltip-basis {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .75);
}

.bt-side { display: flex; flex-direction: column; min-width: 0; }
.bt-side-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.bt-side-title { margin: 0; font-size: 15px; font-weight: 650; }
.bt-side-count { font-size: 12px; color: var(--ink-3); }
.bt-list { display: flex; flex-direction: column; gap: 8px; max-height: 640px; overflow-y: auto; }
.bt-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  cursor: pointer;
}
.bt-item:hover, .bt-item:focus-visible { border-color: var(--green-500); background: var(--green-50); }
.bt-item-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bt-item-label { font-size: 13.5px; font-weight: 640; min-width: 0; overflow-wrap: break-word; }
/* Ba phan tu (ten, gia, mui ten): space-between day gia ra GIUA dong, cot gia
   lech nhau theo do dai ten. Gia luon sat mui ten, can phai. */
.bt-item-cost { font-size: 12.5px; font-weight: 650; color: var(--green-700); white-space: nowrap;
                margin-left: auto; text-align: right; }
.bt-item-cat { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }

/* So tien hai dang: day du (may tinh) va gon "2,3 – 4,1 triệu" (dien thoai). */
.bt-num-short { display: none; }

/* Bam mot dong: so chi tiet xuong ngay tai dong (ca may tinh lan dien thoai).
   Khung hover chi con khi dua chuot len ANH tren may tinh. */
.bt-item-chev {
  display: block; flex: none; width: 16px; height: 16px;
  color: var(--ink-3); transition: transform .18s;
  align-self: center;
}
.bt-item.is-open { border-color: var(--green-600); background: var(--surface); box-shadow: 0 0 0 1px var(--green-600) inset; }
.bt-item.is-open .bt-item-chev { transform: rotate(90deg); color: var(--green-700); }
.bt-item-detail { display: none; }
.bt-item.is-open .bt-item-detail { display: block; }
.bt-item-detail {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.bt-detail-where { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-2); }
.bt-item-detail .bt-tooltip-table { gap: 6px; }
.bt-item-detail .bt-tt-row { font-size: 13px; border-top-color: var(--line); padding-top: 6px; }
.bt-item-detail .bt-tt-k { color: var(--ink-3); }
.bt-item-detail .bt-tt-v { color: var(--ink); overflow-wrap: anywhere; }
.bt-detail-note {
  margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3);
}
/* Dong moi lien he cuoi chi tiet hang muc: noi han len khoi chu xam o tren */
.bt-lien-he {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-top: 12px; padding: 11px 12px 11px 12px;
  border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #24894c 0%, var(--green-800) 100%);
  color: #fff; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 8px 18px rgba(26, 102, 56, .28);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.bt-lien-he:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 24px rgba(26, 102, 56, .34); }
.bt-lien-he:focus-visible { outline: 3px solid var(--green-400); outline-offset: 2px; }
.bt-lien-he-icon {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
}
.bt-lien-he-icon svg { width: 19px; height: 19px; }
.bt-lien-he-chu { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.bt-lien-he-chu b { display: block; font-size: 14px; font-weight: 700; }
.bt-lien-he-chu small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .86); }
.bt-lien-he-nut {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px;
  background: #fff; color: var(--green-800);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.bt-lien-he-nut svg { width: 14px; height: 14px; transition: transform .15s; }
.bt-lien-he:hover .bt-lien-he-nut svg { transform: translateX(2px); }
@media (max-width: 380px) {
  .bt-lien-he { gap: 10px; padding: 10px; }
  .bt-lien-he-icon { width: 32px; height: 32px; }
  .bt-lien-he-nut { padding: 6px 10px; }
}

/* ---- Dien thoai / man hep (mot cot) ---- */
@media (max-width: 859px) {
  /* The tong chi phi: xuong dong rieng, rong het khung. Truoc day flex:none +
     min-width khien no rong bang dong so tien day du -> tran ngang ca trang. */
  .bt-head { flex-wrap: wrap; gap: 12px; }
  .bt-total-card { flex: 1 1 100%; min-width: 0; text-align: left; padding: 14px 16px; }
  .bt-total-value { font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; }
  .bt-num-full { display: none; }
  .bt-num-short { display: inline; }

  /* block thay vi grid: de .bt-stage-wrap dinh (sticky) duoc suot chieu dai
     danh sach ben duoi. Trong grid mot cot, o luoi cua anh chi cao bang anh
     nen sticky khong co cho de truot. */
  .bt-layout { display: block; }
  .bt-stage-wrap {
    position: sticky; top: 67px; /* = chieu cao .site-header (66px + vien) */
    z-index: 5;
    /* Khong tran ra le trang (margin am): le .wrap tren dien thoai hep hon
       20px, tran ra la lai keo ca trang truot ngang. Danh sach ben duoi cung
       chi rong bang vung noi dung nen vo nay du che. */
    margin: 0 0 14px; padding: 8px 0;
    background: var(--bg);
    box-shadow: 0 8px 10px -10px rgba(15, 30, 20, .35);
  }
  .bt-stage, .bt-photo { max-height: 38vh; }
  .bt-stage { cursor: pointer; margin: 0 auto; }
  .bt-stage-hint { font-size: 12px; bottom: 8px; white-space: nowrap; }

  /* Bo khung cuon rieng: cuon-trong-cuon tren dien thoai rat kho dung. */
  .bt-list { max-height: none; overflow: visible; }
  .bt-item { padding: 12px 14px; }
  .bt-item-row { align-items: center; }
  .bt-item-label { font-size: 14px; flex: 1 1 auto; }
  .bt-item-cost { font-size: 13px; }
}

/* --- Anh minh hoa dinh kem o o mo ta -------------------------------------- */
.ref-box {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 13px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.ref-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ref-icon { width: 26px; height: 26px; flex: none; color: var(--green-700); }
.ref-title { margin: 0; font-size: 14px; font-weight: 620; }
.ref-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.ref-thumb {
  width: 54px; height: 54px; flex: none;
  object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.ref-box .link-btn { min-height: 44px; display: inline-flex; align-items: center; }

/* --- Thanh bao job dang chay, dinh day man hinh -------------------------- */
.run-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-pill);
  background: var(--green-800); color: #fff;
  box-shadow: 0 8px 24px rgba(15, 61, 36, .35);
}
@media (min-width: 700px) { .run-bar { left: auto; right: 20px; bottom: 20px; min-width: 340px; } }
.run-bar-dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--green-300, #7fd4a0);
  animation: run-bar-nhay 1.1s ease-in-out infinite;
}
@keyframes run-bar-nhay { 50% { opacity: .25; } }
.run-bar-text { flex: 1; font-size: 13.5px; font-weight: 560; min-width: 0; }
.run-bar-btn {
  flex: none; min-height: 44px; padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radius-pill);
  background: transparent; color: #fff;
  font: inherit; font-size: 13px; font-weight: 620; cursor: pointer;
}
.run-bar-btn:hover { background: rgba(255, 255, 255, .14); }

/* --- Cau AI nhan xet ve chinh can phong trong anh ------------------------- */
.advice-weak {
  margin: 9px 0 0;
  padding: 9px 11px;
  border-left: 3px solid var(--green-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--green-50);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}

/* --- Cau noi truoc khi khach bam nut tao anh ------------------------------ */
.truoc-khi-bam {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
  text-align: center;
}

/* Cau noi ro dang xem gi, va viec nao ton them mot luot */
.result-hint {
  margin: 10px 2px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Hang nut phu o man ket qua: nhe hon hang chinh, de mat phan biet duoc ngay */
.result-actions-sub { margin-top: 10px; }
/* Nut phu: nen trang, vien + chu xanh, bong nhe. Truoc day nen trung mau nen
   trang (surface-2 tren bg) nen nut "chim", khach khong nhan ra la bam duoc. */
.btn-quiet {
  background: var(--surface);
  border: 1.5px solid var(--green-200);
  color: var(--green-800);
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(15, 61, 36, .06), 0 4px 12px rgba(15, 61, 36, .07);
}
.btn-quiet:hover { background: var(--green-50); border-color: var(--green-500); color: var(--green-900); }
.btn-quiet .btn-icon { color: var(--green-600); }

/* Nhan nhom "Lam tiep voi phuong an nay" tren ba nut lam lai */
.lam-tiep-nhan {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 2px 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--green-700);
}
.lam-tiep-nhan::after { content: ""; flex: 1; height: 1px; background: var(--green-200); }
.lam-tiep-nhan + .result-actions-sub { margin-top: 0; }

/* Man hep: nut phu xep MOT cot, cung mot kieu (bieu tuong trai, chu mot dong). Hai cot
   o vuong truoc day lam "Tạo lại phương án khác" gay hai dong, nut le cuoi lai mot kieu
   khac (ra soat 12/10/2026). */

/* Danh sach tai khong duoc: noi ro va cho mot duong thu lai */
.tai-hong {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.tai-hong p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* Nut trong luoi phai duoc phep co lai. Khong dat min-width:0 thi chu dai
   ("Thiết kế tiếp từ ảnh này") noi rong cot ra va ca trang bi tran ngang. */
.result-actions .btn {
  min-width: 0;
  /* .btn dat white-space: nowrap, nen "Tao lai phuong an khac" tran ra ngoai
     vien nut o man 360px. Cho xuong dong thay vi tran. */
  white-space: normal;
  line-height: 1.3;
}

/* Thanh bao khi anh da xong: doi mau de phan biet voi luc dang chay */
.run-bar-xong {
  background: var(--green-700);
  border-color: var(--green-600);
}
.run-bar-xong .run-bar-dot { background: #fff; animation: none; }

/* Nut CTA mang cau dai ("Nhận dự toán chi tiết cho phương án này"): .btn dat
   white-space: nowrap nen cau do do ra ~342px trong o rong 280px va tran ra
   ngoai man hinh ngay khi bat MAIN_SITE_URL. */
.btn-cta { white-space: normal; text-align: center; line-height: 1.4; }

/* =============================================================================
   MAN LAM VIEC CHIA DOI (may tinh) VA KET QUA GON TRONG MOT MAN HINH
   ========================================================================== */

/* Cot phai khi chua co anh */
/* Cung le tren voi .workspace .step, mep tren khung thang voi o tai anh.
   Khung chi la loi nhac nen de gon, khong cao bang o tai anh. */
.ws-empty { margin: 24px 0 30px; }
.step-num-cho { background: var(--line-strong); }
.ws-empty-box {
  margin-top: 14px;
  padding: 18px 20px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.ws-empty-title { margin: 0; font-size: 16px; font-weight: 650; }
.ws-empty-sub { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
/* Dien thoai: o tai anh da noi du roi, khong can them mot khung nua */
@media (max-width: 959px) { .ws-empty { display: none; } }

/* Khung so sanh khong bao gio cao qua man hinh. app.js dat hai bien tren
   #results: --ar (rong/cao cua anh) va --cmp-h (chieu cao con lai tu mep tren
   khung toi day man hinh). Chua co thi --ar = 10, tuc la rong het cot nhu cu. */
.compare {
  margin-inline: auto;
  width: min(100%, calc(var(--cmp-h, 100vh) * var(--ar, 10)));
}

@media (min-width: 960px) {
  main.wrap { max-width: 1180px; }

  .workspace {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
  }
  .workspace .step { margin: 24px 0 30px; }
  .workspace .submit-bar { margin: 8px 0 24px; }
  .ws-left .dz-preview { max-height: 46vh; }
  /* Cot hep lai nen tieu de buoc bi gay hai dong; thu chu cho gon mot dong */
  .workspace .step-title { font-size: 19px; }
  .ws-left .dropzone:not(.has-image) { min-height: 300px; }

  /* Man cho, loi, tra vat tu: mot cot, khong can rong ca trang */
  #waiting, #errorBox { max-width: 820px; margin-inline: auto; }
  /* Tra vat tu la noi dung doc tiep tieu de trang: thang le trai voi tieu de */
  #identifyResult { max-width: 820px; }

  /* Ket qua: anh ben trai cao vua man hinh, dau muc + nut ben phai. Cot anh
     rong dung bang anh (khong du chieu ngang thi co lai), ca cum canh giua. */
  .results {
    display: grid;
    grid-template-columns:
      min(calc(100% - 352px), calc(var(--cmp-h, 100vh) * var(--ar, 10)))
      320px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "media head" "media side";
    /* Can TRAI: anh doc hep hon khung ma can giua thi lech khoi le tieu de trang
       (ra soat 12/10/2026). */
    justify-content: start;
    column-gap: 32px;
    align-items: start;
    margin-top: 20px;
  }
  /* Cot phai: moi khoang cach giua cac hang deu 10px cho deu tay */
  .results .res-head { grid-area: head; }
  .results .res-head .step-head { margin-bottom: 14px; }
  .results .result-tabs { gap: 10px; margin-bottom: 10px; }
  .results .compare { grid-area: media; width: 100%; }
  .results .res-side { grid-area: side; }
  .results .result-actions { grid-template-columns: 1fr; gap: 10px; margin-top: 0; }
  .results .result-actions-sub { margin-top: 10px; }
  .results .result-hint { margin: 12px 0 0; }
  .results .cta { margin-top: 16px; }
}

/* Anh va nhan dien dung yen ben trai trong luc khach dien ben phai. Chi bat
   khi man du cao: cot trai cao hon man hinh ma van dinh thi phan duoi (nhan
   dien, nut chup anh) bi che cho toi tan cuoi trang. */
@media (min-width: 960px) and (min-height: 760px) {
  .ws-left { position: sticky; top: 76px; }
  /* Tu cuon toi mot buoc ben phai: dau muc dung ngang dau muc buoc 1 ben trai
     (76px + 24px phia tren dau muc), khong lech 16px nhu truoc (ra soat 12/10/2026). */
  .ws-right .step, .step:not(#step1) { scroll-margin-top: 100px; }
}

/* Tu cuon toi buoc tiep theo (cuonToi trong app.js): chua cho thanh dieu huong
   dinh dau trang, khong thi dau muc buoc bi no che mat. */
.step, .detect-box, .submit-bar { scroll-margin-top: 84px; }
.submit-bar { scroll-margin-bottom: 16px; }

/* Nut "Tiep tuc" cuoi buoc 3 */
.note-next { margin-top: 18px; gap: 8px; }
.note-next svg { width: 18px; height: 18px; }

/* =============================================================================
   NEN TANG 3 MANG: chon mang, thu gon tung buoc, BuildX de xuat, lua chon nhanh,
   du toan theo dien tich, xuat bang du toan, nhan bao gia
   ========================================================================== */

/* --- Buoc 0: ba the mang ---------------------------------------------------- */
.mang-buoc { margin: 18px 0 34px; }
.mang-grid { display: grid; gap: 12px; }
@media (min-width: 760px) { .mang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.mang-the {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px; row-gap: 3px;
  align-content: start;
  width: 100%; padding: 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mang-the:hover, .mang-the:focus-visible { border-color: var(--green-500); box-shadow: var(--shadow); outline: none; }
.mang-the.is-active { border-color: var(--green-600); box-shadow: 0 0 0 2px var(--green-600) inset; }
.mang-the > :not(.mang-the-icon) { grid-column: 2; }
.mang-the-icon {
  grid-row: 1 / span 4;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--green-50); color: var(--green-700);
  display: grid; place-items: center;
}
.mang-the-icon svg { width: 25px; height: 25px; }
.mang-the-ten { font-size: 17.5px; font-weight: 720; letter-spacing: -.01em; }
.mang-the-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.mang-the-ds { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.mang-the-dem {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 13px; font-weight: 660; color: var(--green-700);
}
.mang-the-mui { width: 16px; height: 16px; }
@media (min-width: 760px) {
  .mang-the { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .mang-the:hover { transform: translateY(-2px); }
  .mang-the > :not(.mang-the-icon) { grid-column: 1; }
  .mang-the-icon { grid-row: auto; margin-bottom: 10px; width: 52px; height: 52px; }
  .mang-the-ten { font-size: 19px; }
}

/* Thanh mang da chon (thay cho ba the) */
.mang-bar {
  display: flex; align-items: center; gap: 10px;
  width: fit-content; max-width: 100%;
  margin: 14px 0 0; padding: 5px 8px 5px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface);
}
.mang-bar-icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-50); color: var(--green-700);
  display: grid; place-items: center;
}
.mang-bar-icon svg { width: 17px; height: 17px; }
.mang-bar-text { font-size: 14px; color: var(--ink-2); min-width: 0; }
.mang-bar-text b { color: var(--ink); font-weight: 680; }
.mang-bar .link-btn {
  min-height: 36px; padding: 0 8px;
  color: var(--green-700); font-weight: 620; white-space: nowrap;
}

/* --- Moi luc chi mo mot buoc; buoc da xong thu gon thanh mot dong ---------- */
.step-edit {
  display: none; margin-left: auto; min-height: 40px; padding: 0 4px;
  color: var(--green-700); font-weight: 620; text-decoration: none;
}
.step-sum {
  margin: 3px 0 0 38px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#stepTool.is-gon, #stepNote.is-gon, #step2.is-gon {
  margin: 12px 0; padding: 10px 12px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.step.is-gon > .step-body { display: none; }
.step.is-gon .step-edit { display: inline-flex; align-items: center; }
.step.is-gon .step-head { margin-bottom: 0; cursor: pointer; }
.step.is-gon .step-sum { cursor: pointer; }
.step.is-gon .step-title { font-size: 16px; }
.step.is-gon .step-num { width: 24px; height: 24px; font-size: 12.5px; background: var(--green-600); }
.step.is-gon .step-sum { margin-left: 35px; }

/* Dien thoai: da chon cong cu thi anh thu nho lai, khong bat khach cuon qua anh */
@media (max-width: 959px) {
  #step1.is-thu-nho { margin: 16px 0 12px; }
  #step1.is-thu-nho .dropzone { margin-top: 10px; }
  #step1.is-thu-nho .dz-preview { max-height: 128px; object-fit: cover; }
  #step1.is-thu-nho .btn-camera,
  #step1.is-thu-nho .advice-weak,
  #step1.is-thu-nho .warnings { display: none; }
  #step1.is-thu-nho .detect-box { margin-top: 8px; padding: 9px 12px; }
}

/* --- Buoc 2: cong cu de xuat, cong cu mang khac --------------------------- */
#toolNote { margin-bottom: 12px; }
/* Dong rieng: nut cao 40px (de bam) ma nam giua dong chu thi gian dong ca doan (ra soat 12/10/2026) */
.tool-chuyen-mang { display: block; margin-top: 2px; text-align: left; color: var(--green-700); font-weight: 620; min-height: 40px; }
.tool-pick.is-de-xuat {
  border-color: var(--green-500);
  background: linear-gradient(135deg, var(--green-50), var(--surface) 70%);
  box-shadow: 0 0 0 1px var(--green-500) inset;
}
@media (min-width: 620px) { .tool-pick.is-de-xuat { grid-column: 1 / -1; } }
.tag-de-xuat {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 3px; padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--green-700); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.tag-de-xuat::before { content: "★"; font-size: 10px; letter-spacing: 0; }
.tool-pick-mang { margin-top: 3px; font-size: 11.5px; font-weight: 620; color: var(--green-700); }
.tool-khac {
  margin-top: 16px; padding: 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2);
}
.tool-khac-title { margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.tool-khac-title span { font-weight: 400; color: var(--ink-3); }
.tool-choice-khac .tool-pick { min-height: 0; padding: 10px 12px; background: var(--surface); }
.tool-choice-khac .tool-pick-icon { width: 32px; height: 32px; border-radius: 9px; }
.tool-choice-khac .tool-pick-icon svg { width: 17px; height: 17px; }

/* --- Buoc 3: khung "BuildX de xuat" ---------------------------------------- */
.bx-goi-y {
  margin: 4px 0 14px; padding: 12px 13px 13px;
  border: 1px solid var(--green-100); border-left: 4px solid var(--green-600);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--green-50), var(--surface));
}
.bx-goi-y-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bx-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--green-800); color: #fff;
  font-size: 12px; font-weight: 720; letter-spacing: .03em;
}
.bx-badge::before { content: "✦"; color: var(--green-400); font-size: 12px; }
.bx-goi-y-diem { margin: 0; flex: 1 1 200px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.bx-goi-y-list { display: flex; flex-direction: column; gap: 8px; }
.bx-chip {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--green-100); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13.5px; line-height: 1.45; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.bx-chip:hover { border-color: var(--green-500); }
.bx-chip-dau {
  position: relative; flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--green-600); border-radius: 50%;
}
.bx-chip-dau::before, .bx-chip-dau::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--green-700); transform: translate(-50%, -50%);
}
.bx-chip-dau::before { width: 9px; height: 1.6px; }
.bx-chip-dau::after { width: 1.6px; height: 9px; }
.bx-chip.is-on { border-color: var(--green-600); background: var(--green-50); }
.bx-chip.is-on .bx-chip-dau { background: var(--green-600); }
.bx-chip.is-on .bx-chip-dau::before {
  width: 5px; height: 9px; background: none;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -62%) rotate(45deg);
}
.bx-chip.is-on .bx-chip-dau::after { display: none; }
.bx-chip-chu { min-width: 0; overflow-wrap: anywhere; }
/* Goi y da nam o khung BuildX de xuat: hang chip cu duoi o mo ta de trong */
.note-chips:empty { display: none; }

/* --- Lua chon nhanh (nganh hang, kieu bien, pham vi) ----------------------- */
.tuy-chon { display: grid; gap: 12px; margin: 0 0 14px; }
.tuy-chon-nhan { margin: 0 0 7px; font-size: 14px; font-weight: 600; }
.chip-chon { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-o {
  min-height: 40px; padding: 7px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.chip-o:hover { border-color: var(--green-600); }
.chip-o.is-on {
  border-color: var(--green-700); background: var(--green-700); color: #fff; font-weight: 620;
}

/* --- Kieu 'option': chon mot trong vai lua chon ---------------------------- */
.lua-chon-grid { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 620px) { .lua-chon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lua-chon {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px; min-height: 84px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.lua-chon:hover { border-color: var(--green-500); }
.lua-chon.is-selected { border-color: var(--green-600); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-600) inset; }
.lua-chon-ten { font-size: 15px; font-weight: 680; }
.lua-chon-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* --- Buoc tai anh: loi di khong can anh (mang du toan) --------------------- */
.du-toan-tat { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 620px) { .du-toan-tat { grid-template-columns: 1fr 1fr; } }
.du-toan-tat-item {
  display: block; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-size: 14px; line-height: 1.45; text-decoration: none;
}
.du-toan-tat-item:hover { border-color: var(--green-500); background: var(--green-50); }
.du-toan-tat-item b { color: var(--green-700); }
.du-toan-tat-item span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }

/* Du toan phuong an: chon mot phuong an da tao */
.pa-chon { margin-top: 14px; }
.pa-chon-title { margin: 0 0 8px; font-size: 14px; font-weight: 650; }
.pa-chon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { .pa-chon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pa-chon-item {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pa-chon-item:hover { border-color: var(--green-500); }
.pa-chon-item img { width: 100%; height: 96px; object-fit: cover; display: block; background: var(--surface-2); }
.pa-chon-ten { padding: 7px 9px 0; font-size: 12.5px; font-weight: 650; }
.pa-chon-phu { padding: 0 9px 8px; font-size: 11.5px; color: var(--ink-3); }
.pa-chon-or { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }

/* --- Du toan nhanh theo dien tich ----------------------------------------- */
.dt-form {
  max-width: 760px; margin: 20px 0 34px; padding: 20px;  /* thang le trai dong chon mang phia tren */
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.dt-nhom { margin-bottom: 18px; }
.dt-nhan { margin: 0 0 8px; font-size: 14.5px; font-weight: 650; }
.dt-luoi { display: grid; gap: 12px; margin-bottom: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .dt-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dt-o { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; font-size: 13px; color: var(--ink-2); }
.dt-o input {
  width: 100%; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px;
}
.dt-o input:focus { outline: 2px solid var(--green-500); outline-offset: 1px; border-color: var(--green-600); }
.dt-form .submit-hint { color: var(--warn-ink); font-weight: 600; margin: 0 0 10px; }
.dt-form .note-hint { text-align: center; }

/* --- Ket qua thiet ke: "Phuong an nay het bao nhieu?" ---------------------- */
.du-toan-pa { margin-top: 14px; }
.du-toan-pa .result-hint { margin-top: 6px; }

/* --- Ket qua boc tach / du toan: nut bao gia, tai bang du toan ------------- */
.bt-bao-gia {
  margin-top: 12px; min-height: 42px; padding: 0 16px;
  border: 0; border-radius: var(--radius-pill);
  background: #fff; color: var(--green-800);
  font: inherit; font-size: 14px; font-weight: 720; cursor: pointer;
}
.bt-bao-gia:hover { background: var(--green-50); }
.bt-xuat {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.bt-xuat-nhan { margin-right: auto; font-size: 14px; font-weight: 650; }
.bt-xuat .btn { gap: 6px; }
.bt-xuat svg { width: 16px; height: 16px; }
/* Du toan theo dien tich: khong co anh, danh sach rong het hang */
.bt-layout.bt-khong-anh { display: block; }
.bt-layout.bt-khong-anh .bt-list { max-height: none; overflow: visible; }
@media (min-width: 860px) {
  .bt-layout.bt-khong-anh .bt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* --- Hop "Nhan bao gia chi tiet" ------------------------------------------- */
.lh-hop {
  width: min(440px, calc(100vw - 32px)); padding: 0;
  border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 60px rgba(15, 30, 20, .3);
}
.lh-hop::backdrop { background: rgba(15, 30, 20, .55); }
.lh-hop form { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 20px; }
.lh-tieu-de { margin: 0; font-size: 20px; font-weight: 720; }
.lh-phu { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.lh-o { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.lh-o input, .lh-o textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 400;
}
.lh-o textarea { min-height: 70px; resize: vertical; }
.lh-o input:focus, .lh-o textarea:focus { outline: 2px solid var(--green-500); outline-offset: 1px; }
.lh-dong-y { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.lh-dong-y a { color: inherit; text-decoration: underline; }
/* Captcha Turnstile (che do interaction-only): vo hinh, chi hien khung khi can khach tick. */
.captcha-hop { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 2147483000; display: flex; justify-content: center; pointer-events: none; }
.captcha-hop > * { pointer-events: auto; }
.lh-loi { margin: 0; font-size: 13px; font-weight: 600; color: var(--danger, #b42318); }
.lh-nut { display: flex; gap: 10px; margin-top: 4px; }
.lh-nut .btn { flex: 1; }
.lh-nut .btn-primary { flex: 1.4; }
.lh-xong {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--green-50); color: var(--green-800); font-size: 14px; font-weight: 620;
}

/* --- Lich su: du toan theo dien tich khong co anh -------------------------- */
.history-icon {
  display: grid; place-items: center; height: 86px;
  background: var(--green-50); color: var(--green-700);
}
.history-icon svg { width: 30px; height: 30px; }

/* --- Dong "con thieu gi" bam duoc ----------------------------------------- */
.submit-hint.is-link { color: var(--green-700); font-weight: 620; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.note-count { margin-left: auto; }
/* Man rat hep: the mang chi giu ten + mo ta, ba the vua mot man hinh */
@media (max-width: 480px) { .mang-the-ds { display: none; } }
/* Du toan phuong an: da co phuong an de chon thi o tai anh thu nho lai */
#designPick:not([hidden]) ~ #uploadForm .dropzone:not(.has-image) { min-height: 150px; }
/* Man rong: nhan nhom nam sat ba nut ben duoi (de len le 10px cua .results .result-actions-sub) */
.results .lam-tiep-nhan + .result-actions-sub { margin-top: 0; }

/* The phong cach dang chu (ngoai that, san vuon chua co anh minh hoa rieng) */
.style-card.is-chu { color: #fff; }
.style-card.is-chu::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .5));
}
.style-chu {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 12px 14px; text-align: left;
}
.style-chu b { font-size: 16px; font-weight: 720; line-height: 1.2; }
.style-chu small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.style-chu span { font-size: 12.5px; line-height: 1.35; opacity: .92;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.style-card.is-chu .style-check { z-index: 2; }
.style-grid.is-chu { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .style-grid.is-chu { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479px) {
  .style-grid.is-chu .style-card::before { padding-top: 78%; }
  .style-chu { padding: 10px 11px; }
  .style-chu b { font-size: 14.5px; }
  .style-chu span { -webkit-line-clamp: 3; }
}