/* Bộ màu chung (Đ3, docs/ke-hoach-do-hoa-va-qua.md): xanh ngọc = chính, vàng = thưởng/sao, tím = phép/tháp.
   Sửa màu ở đây là đổi cho mọi bảng, nút, hộp thoại, thẻ câu hỏi. */
:root {
  --chinh: #12a594;
  --chinh-dam: #0b6e63;
  --chinh-nhat: #dcf5f0;
  --chinh-vien: #7fd8cb;
  --thuong: #ffc845;
  --thuong-dam: #a8660a;
  --thuong-nhat: #fff4d6;
  --phep: #7e57c2;
  --phep-nhat: #ede7f6;
  --nen: #fffaf2;
  --chu: #2f3a3a;
  --nut-cao: 48px; /* nút bấm tối thiểu cho ngón tay trẻ em */
}

/* Biểu tượng hệ thống (game-icons, bieu-tuong/he-thong/): ảnh trắng dùng làm mặt nạ, tô theo màu chữ */
.bt {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  margin-right: 0.35em;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #8fd3ff;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#canh {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Lớp nhận chạm toàn màn hình: nửa trái = joystick, nửa phải = xoay camera */
#vung-cham {
  position: fixed;
  inset: 0;
  touch-action: none;
}

#joystick {
  position: fixed;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 3px solid rgba(255, 255, 255, 0.7);
  pointer-events: none;
  display: none;
}

#nut-joystick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

#nut-nhay {
  position: fixed;
  right: calc(28px + env(safe-area-inset-right));
  bottom: calc(28px + env(safe-area-inset-bottom));
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(255, 140, 60, 0.85);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  touch-action: none;
}

#nut-nhay:active {
  transform: scale(0.94);
}

#nut-tuong-tac {
  position: fixed;
  right: calc(28px + env(safe-area-inset-right));
  bottom: calc(160px + env(safe-area-inset-bottom));
  padding: 14px 22px;
  border-radius: 18px;
  border: 4px solid #fff;
  background: rgba(155, 93, 229, 0.9);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  touch-action: none;
}

#nut-tuong-tac[hidden] {
  display: none;
}

#nut-nem {
  position: fixed;
  right: calc(150px + env(safe-area-inset-right));
  bottom: calc(28px + env(safe-area-inset-bottom));
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(255, 93, 143, 0.9);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  touch-action: none;
}

#nut-nem[hidden] {
  display: none;
}

#nut-xuong {
  position: fixed;
  right: calc(150px + env(safe-area-inset-right));
  bottom: calc(28px + env(safe-area-inset-bottom));
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(6, 170, 140, 0.92);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  touch-action: none;
}

#nut-xuong[hidden] {
  display: none;
}

#nut-dung {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  top: calc(20px + env(safe-area-inset-top));
  z-index: 9;
  padding: 10px 16px;
  border-radius: 14px;
  border: 3px solid #fff;
  background: rgba(90, 90, 110, 0.85);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  min-height: var(--nut-cao);
}

#nut-dung::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  margin-right: 0.35em;
  background-color: currentColor;
  -webkit-mask: url(../bieu-tuong/he-thong/stop.png) center / contain no-repeat;
  mask: url(../bieu-tuong/he-thong/stop.png) center / contain no-repeat;
}

#nut-dung[hidden] {
  display: none;
}

#so-sao {
  position: fixed;
  left: calc(150px + env(safe-area-inset-left));
  top: calc(16px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--nut-cao);
  box-sizing: border-box;
  padding: 6px 14px;
  border-radius: 14px;
  border: 3px solid var(--thuong);
  background: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  font-weight: 800;
  color: var(--thuong-dam);
  cursor: pointer;
  z-index: 5;
}

#so-sao::before,
#so-sao::after {
  content: '';
  width: 24px;
  height: 24px;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

#so-sao::before {
  background-color: var(--thuong);
  -webkit-mask-image: url(../bieu-tuong/he-thong/star.png);
  mask-image: url(../bieu-tuong/he-thong/star.png);
}

/* Bấm ô sao để xem Việc hôm nay */
#so-sao::after {
  background-color: var(--chinh);
  -webkit-mask-image: url(../bieu-tuong/he-thong/checkmark.png);
  mask-image: url(../bieu-tuong/he-thong/checkmark.png);
}

/* Việc hôm nay */
.ds-viec {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: 19px;
}

.ds-viec li {
  padding: 10px 6px;
  border-bottom: 1px solid #eee2cc;
}

.ds-viec li.xong {
  color: #3a8f4a;
}

/* Hộp thoại NPC */
.hop-thoai {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 250, 242, 0.95);
  border: 3px solid var(--chinh-vien);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  color: var(--chu);
}

.hop-thoai[hidden] {
  display: none;
}

/* :not([hidden]) để hộp thoại có chân dung vẫn ẩn được khi đóng */
.hop-thoai.co-anh:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hop-thoai-anh {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--chinh-nhat);
  border: 3px solid var(--chinh-vien);
}

.hop-thoai-anh[hidden] {
  display: none;
}

.hop-thoai-noidung {
  flex: 1;
  min-width: 0;
}

.hop-thoai-ten {
  font-weight: 800;
  font-size: 18px;
  color: var(--chinh-dam);
}

.hop-thoai-chu {
  font-size: 18px;
  line-height: 1.35;
  margin-top: 2px;
}

.hop-thoai .hang-nut {
  margin-top: 6px;
  flex-wrap: wrap;
}

.hop-thoai .hang-nut button {
  max-width: 100%;
  white-space: normal;
}

/* Màn hẹp (iPad dọc, điện thoại): hộp thoại gọn hơn để còn thấy cảnh */
@media (max-width: 820px) {
  .hop-thoai {
    padding: 8px 12px;
  }
  .hop-thoai-anh {
    width: 48px;
    height: 48px;
  }
  .hop-thoai-chu {
    font-size: 16px;
  }
}

/* Khung chỉ đường */
#chi-duong {
  position: fixed;
  z-index: 6;
  right: calc(16px + env(safe-area-inset-right));
  top: calc(16px + env(safe-area-inset-top));
  max-width: min(320px, 42vw);
  padding: 8px 12px;
  border-radius: 14px;
  border: 3px solid var(--thuong);
  background: rgba(255, 250, 242, 0.92);
  color: #5a3d00;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

body.co-nut-dung #chi-duong {
  top: calc(84px + env(safe-area-inset-top));
}

#chi-duong.thu-gon {
  font-size: 22px;
  padding: 6px 10px;
}

#chi-duong[hidden] {
  display: none;
}

.nut-mu {
  min-height: var(--nut-cao);
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  background: #fff;
  color: var(--chu);
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 700;
}

.nut-mu.dang-chon {
  border-color: var(--chinh);
  background: var(--chinh-nhat);
  color: var(--chinh-dam);
}

/* Màn tối ngắn khi đổi khu */
#man-chuyen {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 30;
}

#man-chuyen.toi {
  opacity: 1;
}

#thong-bao {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;
  text-align: center;
  max-width: 80vw;
  pointer-events: none;
}

#thong-bao:empty {
  display: none;
}

/* ----- Menu và các bảng ----- */
button {
  font-family: inherit;
  cursor: pointer;
}

#nut-menu {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left));
  top: calc(16px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  min-height: var(--nut-cao);
  padding: 8px 18px;
  border-radius: 14px;
  border: 3px solid #fff;
  background: var(--chinh);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  z-index: 20;
}

#nut-menu::before {
  content: '';
  width: 22px;
  height: 22px;
  margin-right: 8px;
  background-color: currentColor;
  -webkit-mask: url(../bieu-tuong/he-thong/menuList.png) center / contain no-repeat;
  mask: url(../bieu-tuong/he-thong/menuList.png) center / contain no-repeat;
}

.bang {
  position: fixed;
  z-index: 10;
  background: var(--nen);
  border: 3px solid var(--chinh-nhat);
  border-radius: 22px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  padding: 18px 20px;
  color: var(--chu);
  overflow-y: auto;
  max-height: calc(100% - 100px);
  box-sizing: border-box;
  -webkit-user-select: text;
  user-select: text;
}

.bang h2 {
  margin: 0 0 12px;
  font-size: 24px;
  text-align: center;
  color: var(--chinh-dam);
}

.bang h3 {
  margin: 18px 0 8px;
  font-size: 19px;
}

.bang p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.4;
}

.bang-giua {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bang-giua.bang-rong {
  width: min(520px, calc(100% - 32px));
  gap: 6px;
}

.bang-phai {
  right: calc(16px + env(safe-area-inset-right));
  top: 80px;
  width: 340px;
}

/* Màn hình hẹp: bảng tạo hình nằm dưới, nhân vật ở trên */
@media (max-width: 700px) {
  .bang-phai {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
    width: auto;
    max-height: 48%;
  }
}

.nut-lon,
.nut-vua {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nut-cao);
  border: 3px solid var(--chinh-vien);
  border-radius: 16px;
  background: var(--chinh-nhat);
  color: var(--chinh-dam);
  font-weight: 800;
}

.nut-lon {
  padding: 12px 16px;
  font-size: 21px;
}

.nut-vua {
  padding: 10px 18px;
  font-size: 18px;
}

.nut-chinh {
  background: var(--chinh);
  border-color: var(--chinh);
  color: #fff;
}

.nut-lon:disabled,
.nut-vua:disabled {
  opacity: 0.45;
}

.hang-nut {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.nhan {
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0 6px;
}

.hang-mau {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.o-mau {
  width: var(--nut-cao);
  height: var(--nut-cao);
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.15);
}

.o-mau.dang-chon {
  border: 4px solid var(--chinh-dam);
  transform: scale(1.1);
}

.bang textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-family: ui-monospace, Menlo, monospace;
  border-radius: 10px;
  border: 2px solid #ddd;
  padding: 8px;
  word-break: break-all;
}

/* ----- Thẻ câu hỏi ----- */
.the-cau-hoi {
  position: fixed;
  z-index: 8;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 260px));
  max-height: calc(100% - 180px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 20px;
  background: rgba(255, 250, 242, 0.96);
  border: 3px solid var(--chinh-nhat);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  color: var(--chu);
  text-align: center;
}

.the-cau-hoi[hidden],
.the-bai-doc[hidden] {
  display: none;
}

.the-dau {
  font-size: 15px;
  color: var(--chinh-dam);
  font-weight: 700;
}

.the-de {
  font-size: 24px;
  font-weight: 700;
  margin: 6px 0;
  line-height: 1.3;
}

.the-bai-doc {
  text-align: left;
  font-size: 17px;
  line-height: 1.5;
  background: var(--thuong-nhat);
  border-radius: 12px;
  padding: 8px 12px;
  margin: 6px 0;
}

.the-bai-doc p {
  margin: 4px 0;
}

.anh-bai-doc {
  display: block;
  width: 100%;
  max-height: 210px;
  object-fit: cover;
  border-radius: 12px;
  margin: 8px 0;
  background: #fff;
}

.the-loi-nhan {
  font-size: 18px;
  min-height: 0;
  line-height: 1.35;
}

.the-loi-nhan.goi-y {
  color: #8a4b08;
}

.the-loi-nhan.dung {
  color: #1b7a35;
  font-weight: 700;
}

.the-loi-nhan.dap-an {
  color: var(--phep);
}

.the-hang-nut,
.the-nut-chon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.the-nut {
  min-height: var(--nut-cao);
  border: 3px solid transparent;
  border-radius: 14px;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 700;
  background: var(--thuong);
  color: var(--chu);
}

/* Nút đáp án: xanh ngọc nhạt, viền rõ; nút gợi ý/tiếp (ngoài khu chọn) giữ màu vàng */
.the-nut-chon .the-nut {
  background: var(--chinh-nhat);
  border-color: var(--chinh-vien);
  color: var(--chinh-dam);
  font-size: 20px;
  min-width: 70px;
}

/* Câu điền số: ô số + bàn phím cảm ứng */
.the-nut-chon:has(.the-ban-phim) {
  flex-direction: column;
  align-items: center;
}

.the-o-so {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  padding: 6px 18px;
  border-radius: 14px;
  background: #fff;
  border: 3px solid var(--chinh-vien);
  font-size: 34px;
  font-weight: 800;
}

.the-o-so-gia-tri.trong {
  color: #bbb;
}

.the-o-so-don-vi {
  font-size: 20px;
  color: #7a5c3e;
}

.the-ban-phim {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 8px;
}

.the-nut.the-phim {
  background: var(--chinh-nhat);
  min-width: 0;
  height: 54px;
  padding: 0;
  font-size: 24px;
}

.the-nut.the-phim.xoa {
  background: #ffadad;
}

.the-nut.the-phim.ok {
  background: #95d5b2;
}

/* Câu sắp xếp: hàng đã xếp (trên) và các mảnh còn lại (dưới) */
.the-nut-chon:has(.the-hang-xep) {
  flex-direction: column;
  align-items: center;
}

.the-hang-xep {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 14px;
  background: #fff;
  border: 3px dashed var(--chinh-vien);
}

.the-hang-xep.keo {
  background: transparent;
  border: none;
  min-height: 0;
}

.the-hang-xep.sai {
  animation: rung-xep 0.5s;
  border-color: #e07a5f;
}

@keyframes rung-xep {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.the-o-xep {
  min-width: 56px;
  height: 46px;
  border-radius: 12px;
  background: #f1f1f1;
}

.the-nut.the-manh {
  background: var(--chinh-nhat);
  min-height: var(--nut-cao);
  padding: 6px 14px;
  font-size: 20px;
}

.the-nut.the-manh.da-xep {
  background: var(--thuong);
  border-color: var(--thuong);
}

.the-nut.the-kiem-tra {
  width: 160px;
  height: 48px;
  font-size: 20px;
}

.the-nut.the-kiem-tra:disabled {
  opacity: 0.4;
}

/* Câu nối cặp: hai cột, cặp đã nối tô cùng màu */
.the-nut-chon:has(.the-noi-cap) {
  flex-direction: column;
  align-items: center;
}

.the-noi-cap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
  width: 100%;
  align-items: start;
}

.the-noi-cap.sai {
  animation: rung-xep 0.5s;
}

.the-cot-cap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.the-nut.the-cap {
  background: #e8eef3;
  min-height: var(--nut-cao);
  padding: 6px 10px;
  font-size: 18px;
  border: 3px solid transparent;
}

.the-nut.the-cap.chon {
  border-color: var(--chinh);
  background: var(--chinh-nhat);
}

.the-nut.the-cap.mau0 { background: #ffd166; }
.the-nut.the-cap.mau1 { background: #95d5b2; }
.the-nut.the-cap.mau2 { background: #ffadad; }
.the-nut.the-cap.mau3 { background: #bdb2ff; }

@media (max-width: 700px) {
  .the-cau-hoi {
    width: calc(100% - 32px);
    top: 70px;
  }
}

/* ----- Cài đặt, giới hạn thời gian, đo hiệu năng ----- */
.o-ten {
  width: 100%;
  box-sizing: border-box;
  font-size: 20px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #ddd;
  font-family: inherit;
}

.man-nghi {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(38, 70, 83, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}

.man-nghi-chu {
  max-width: 560px;
  margin: 24px;
  color: #fff;
  font-size: 28px;
  line-height: 1.45;
  text-align: center;
}

#do-hieu-nang {
  position: fixed;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  pointer-events: none;
}

#do-hieu-nang[hidden] {
  display: none;
}

/* ----- Bảng đọc sách (trang Sách Phép, truyện đã đọc) ----- */
.bang-doc p {
  font-size: 20px;
  line-height: 1.5;
}

.bang-doc h3 {
  color: var(--phep);
}

/* ----- Báo cáo ----- */
.bang-bao-cao .ghi-chu {
  font-size: 14px;
  color: #666;
}

.bang-muc-kiem {
  width: 100%;
  border-collapse: collapse;
}

.bang-muc-kiem td {
  border-top: 1px solid #eee;
  padding: 6px 4px;
  vertical-align: top;
}

.o-trang-thai {
  width: 36px;
  text-align: center;
  font-weight: 800;
  font-size: 20px;
  color: #999;
}

.tt-T { color: #1b7a35; }
.tt-G { color: #b26a00; }
.tt-C { color: #c0392b; }

.ten-muc {
  font-weight: 700;
  font-size: 15px;
}

.chi-tiet {
  font-size: 13px;
  color: #555;
}

.ds-can-on {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
}

.bao {
  min-height: 1.2em;
  font-size: 15px;
  color: #2e7d32;
  text-align: center;
}

/* Bộ sưu tập */
.o-suu-tam {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.o-suu-tam button {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px dashed #d8c7a8;
  background: #f4ecdd;
  color: #b8a88a;
  font-size: 26px;
  font-weight: 700;
  padding: 0;
}

.o-suu-tam button.co {
  border: 2px solid var(--thuong);
  background: #fff;
  color: #333;
}

.o-suu-tam .but {
  display: inline-block;
  width: 30px;
  height: 10px;
  border-radius: 3px;
  transform: rotate(-45deg);
}

/* Bảng Tạo hình: hàng nút chọn một (cách gọi, bé gái/bé trai, kiểu tóc, váy/quần) */
.hang-chon {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bang-phai .o-ten {
  width: 100%;
  box-sizing: border-box;
}

/* ----- Cửa hàng Sao / Tủ đồ ----- */
.bang-cua-hang {
  width: 390px;
}

.bang-cua-hang .hang-tab {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.luoi-vat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.the-vat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 14px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: var(--chu);
  font-size: 15px;
  font-weight: 700;
}

.the-vat.muc-vua {
  border-color: var(--chinh-vien);
}

.the-vat.muc-quy {
  border-color: var(--thuong);
  background: var(--thuong-nhat);
}

.the-vat.dang-chon {
  border-color: var(--chinh);
  box-shadow: 0 0 0 3px rgba(18, 165, 148, 0.35);
}

.the-vat.sap-co {
  opacity: 0.45;
}

/* Món quà nguồn khác trong Cửa hàng: viền nét đứt tím, nhãn 🔒 + nguồn (phân biệt bằng chữ, không chỉ màu) */
.the-vat.khoa {
  border-style: dashed;
  border-color: var(--phep);
  background: var(--phep-nhat);
}

.gia-the.khoa {
  color: var(--phep);
  font-size: 14px;
}

.gia-the .bt,
.muc-vat .bt {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.25em;
}

.the-vat.dang-mac::after {
  content: '✔';
  position: absolute;
  right: 8px;
  top: 4px;
  color: var(--chinh-dam);
}

.hinh-vat {
  width: 100%;
  height: 54px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

.gia-the {
  color: var(--thuong-dam);
  font-size: 15px;
}

.gia-the.co {
  color: var(--chinh-dam);
}

.nhan-moi {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 1px 7px;
  border-radius: 8px;
  background: #ef476f;
  color: #fff;
  font-size: 12px;
}

.chi-tiet-vat {
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--thuong-nhat);
  text-align: center;
}

.ten-vat {
  font-size: 19px;
  font-weight: 700;
}

.muc-vat {
  font-size: 15px;
  color: #8a6d3b;
  margin-bottom: 4px;
}

.bao-mua {
  font-weight: 700;
}

@media (max-width: 700px) {
  .bang-cua-hang {
    width: auto;
    max-height: 56%;
  }
}