@font-face {
  font-family: 'Patrick Hand';
  src: url('phong/PatrickHand-Regular.ttf') format('truetype');
  font-display: swap;
}
:root { --giay: #f4efe6; --muc: #2b2722; --mo: #8a8174; --vien: #2b2722; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--giay); color: var(--muc); }
body { font: 20px/1.3 'Patrick Hand', 'Segoe UI', 'Microsoft YaHei', 'Yu Gothic UI', 'Meiryo', 'Malgun Gothic', sans-serif; overflow: hidden; user-select: none; -webkit-user-select: none; }
textarea { user-select: text; -webkit-user-select: text; }
#stage { position: fixed; inset: 0; overflow: hidden; }
#c { position: absolute; display: block; image-rendering: pixelated; outline: none; touch-action: none; }

button, select { font: inherit; color: inherit; }
.nut { background: none; border: 0; padding: 8px 12px; cursor: pointer; color: var(--mo); }
.nut:hover, .nut:focus-visible { color: var(--muc); }
select { background: var(--giay); border: 1px solid var(--mo); border-radius: 4px; padding: 0 4px; cursor: pointer; }

#thanh-tren { position: fixed; top: 6px; right: 10px; display: flex; gap: 4px; align-items: center; z-index: 5; padding: 0 6px; border-radius: 10px; background: rgba(255, 253, 248, .82); }
#thanh-tren .nut { color: #6f675c; }
#goi-y { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--mo); pointer-events: none; }
#goi-y > div { display: table; margin: 2px auto; padding: 0 10px; border-radius: 4px; background: rgba(244, 239, 230, .82); }
#goi-y-nhac { color: var(--muc); }
#thanh-camera kbd { font: 15px/1 'Patrick Hand', sans-serif; color: var(--muc); padding: 1px 6px; border: 1px solid var(--mo); border-bottom-width: 2px; border-radius: 4px; background: #fffdf6; }
#goi-y > div[hidden] { display: none; }
#thanh-camera { position: fixed; right: 10px; top: 56px; display: flex; gap: 4px; z-index: 5; }
#thanh-camera .nut { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 28px; line-height: 1; padding: 6px 10px 4px; min-width: 46px; border: 1px solid var(--mo); border-radius: 6px; background: rgba(255, 253, 248, .7); }


/* báo lớn giữa màn hình: cá cắn câu, bắt được, cá thoát */
#bao {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 7; pointer-events: none;
  font-size: 46px; line-height: 1.1; text-align: center; color: #fffdf6; white-space: nowrap;
  text-shadow: 0 3px 0 #2b2722, 0 -2px 0 #2b2722, 3px 0 0 #2b2722, -3px 0 0 #2b2722, 0 6px 12px rgba(0,0,0,.35);
}
#bao[hidden] { display: none; }
#bao.gap { color: #ffe066; animation: nhip .45s ease-in-out infinite alternate; }
@keyframes nhip { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.12); } }

/* trò kéo cá */
#keo-ca {
  --duc: .55;
  position: fixed; left: max(24px, 6vw); top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  padding: 12px 16px; background: rgba(255, 253, 248, var(--duc)); border: 2px solid rgba(43, 39, 34, .6); border-radius: 10px;
  text-shadow: 0 0 3px #fffdf6, 0 0 6px #fffdf6;
}
#keo-ca[hidden] { display: none; }
.keo-ten { font-size: 26px; }
#keo-ca .nho { font-size: 20px; max-width: 300px; text-align: center; }
#keo-ca .kieu[hidden], #khoi-chung[hidden], #khoi-cang[hidden] { display: none; }
#keo-ca .nhan { font-size: 20px; text-align: center; }
#khoi-chung { width: 300px; }
.thanh-ngang { height: 20px; border: 3px solid #2b2722; border-radius: 6px; background: #e9e2d4; overflow: hidden; margin-bottom: 6px; }
.thanh-ngang .day { height: 100%; width: 0; background: #7cc46a; }
.thanh-ngang .day.do { background: #d8402f; }
.dong-ho { position: relative; width: 300px; height: 30px; border: 3px solid #2b2722; border-radius: 6px; background: #e9e2d4; overflow: hidden; }
.dong-ho .vung-do { position: absolute; top: 0; bottom: 0; right: 0; width: 20%; background: rgba(216, 64, 47, .45); }
.dong-ho .vung-xanh { position: absolute; top: 0; bottom: 0; background: rgba(124, 196, 106, .7); }
.dong-ho .kim { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; background: #2b2722; }
.dong-ho .kim.nguy { background: #d8402f; }
.canh-bao { font-size: 30px; color: #d8402f; animation: nhay .25s steps(2) infinite; }
@keyframes nhay { 50% { opacity: .2; } }
.ray-ngang { position: relative; width: 320px; height: 56px; border: 3px solid #2b2722; border-radius: 8px; background: #3c6e78; }
.ray-ngang .giua { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgba(255,255,255,.5); }
.dau-ca { position: absolute; top: 50%; font-size: 34px; line-height: 1; margin-top: -17px; transition: left .25s; }
.dau-tay { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fffdf6; border: 3px solid #2b2722; }
.dau-tay.dung { background: #7cc46a; }
.dau-tay.sai { background: #d8402f; }
.mui-ten { font-size: 28px; color: #2b2722; }
.nhip-khung { position: relative; width: 260px; height: 260px; border-radius: 50%; background: rgba(60, 110, 120, .9); border: 3px solid #2b2722; overflow: hidden; }
.nhip-khung.dung { background: rgba(124, 196, 106, .9); }
.nhip-khung.sai { background: rgba(216, 64, 47, .8); }
.nhip-dich, .nhip-vong { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; border-radius: 50%; transform: translate(-50%, -50%); }
.nhip-dich { border: 6px solid #ffe066; }
.nhip-vong { border: 4px solid #fffdf6; }
.nhip-vong.khop { border-color: #7cc46a; }
.nhip-dem { font-size: 26px; letter-spacing: 2px; }
.guong-dia { position: relative; width: 220px; height: 220px; border-radius: 50%; background: #3c6e78; border: 4px solid #2b2722; }
.guong-tam { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: #e9e2d4; border: 3px solid #2b2722; }
.guong-kim { position: absolute; left: 50%; top: 50%; width: 92px; height: 8px; margin-top: -4px; transform-origin: 0 50%; background: #fffdf6; border-radius: 4px; }
.guong-kim::after { content: ''; position: absolute; right: -10px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: #d8402f; border: 3px solid #2b2722; }

/* hướng dẫn lần đầu: chữ to + hình động thị phạm */
#huong-dan {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none;
  width: min(640px, calc(100vw - 32px)); padding: 20px 28px; text-align: center;
  background: #fffdf8; border: 3px solid var(--vien); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#huong-dan[hidden] { display: none; }
#huong-dan h2 { margin: 0 0 8px; font-size: 40px; }
.hd-chu { font-size: 30px; line-height: 1.3; margin: 0 0 8px; }
#huong-dan .nho { font-size: 24px; color: var(--muc); animation: nhay 1s steps(2) infinite; }
.demo { position: relative; width: 300px; height: 160px; margin: 6px auto; }
.demo .chuot-quay { position: absolute; left: 190px; top: 40px; }
.demo .chuot { width: 44px; height: 68px; border: 4px solid #2b2722; border-radius: 22px; background: #fffdf6; position: relative; }
.demo .chuot::before { content: ''; position: absolute; left: 0; top: 0; width: 50%; height: 40%; border-right: 3px solid #2b2722; border-bottom: 3px solid #2b2722; border-top-left-radius: 18px; background: #fffdf6; }
.demo .phu, .demo .phu2 { position: absolute; }
@keyframes bam { 0% { background: #d8402f; } 50% { background: #fffdf6; } }
/* cang: giữ rồi thả, kim căng lên rồi xuống */
.demo-cang .chuot::before { animation: giu 2.4s steps(1) infinite; }
.demo-cang .phu { left: 10px; top: 60px; width: 160px; height: 26px; background: #e9e2d4; border: 3px solid #2b2722; border-radius: 6px; }
.demo-cang .phu2 { left: 14px; top: 58px; width: 6px; height: 32px; background: #2b2722; animation: kimCang 2.4s linear infinite; }
@keyframes giu { 0% { background: #d8402f; } 60% { background: #fffdf6; } }
@keyframes kimCang { 0% { left: 14px; } 60% { left: 150px; background: #d8402f; } 100% { left: 14px; } }
/* nguoc: cá lao phải, chuột giữ và kéo sang trái */
.demo-nguoc .phu { left: 60px; top: 4px; font-size: 32px; }
.demo-nguoc .phu::before { content: '🐟 ⟶'; display: inline-block; transform: scaleX(1); }
.demo-nguoc .chuot::before { background: #d8402f; }
.demo-nguoc .chuot-quay { animation: keoTrai 1.6s ease-in-out infinite; }
@keyframes keoTrai { 0%, 100% { left: 190px; } 50% { left: 60px; } }
/* nhip: vòng thu nhỏ về vòng đích, nhấp đúng lúc */
.demo-nhip .phu { left: 40px; top: 40px; width: 70px; height: 70px; border-radius: 50%; border: 6px solid #ffe066; }
.demo-nhip .phu2 { left: 75px; top: 75px; width: 70px; height: 70px; margin: -35px; border-radius: 50%; border: 4px solid #2b2722; animation: vongNho 1.4s linear infinite; }
.demo-nhip .chuot::before { animation: bamNhip 1.4s steps(1) infinite; }
@keyframes vongNho { 0% { transform: scale(2.2); } 100% { transform: scale(.9); } }
@keyframes bamNhip { 0%, 70% { background: #fffdf6; } 72% { background: #d8402f; } 90% { background: #fffdf6; } }
/* guong: chuột đi vòng tròn */
.demo-guong .phu { left: 160px; top: 20px; width: 120px; height: 120px; border-radius: 50%; border: 3px dashed #8a8174; }
.demo-guong .chuot-quay { left: 198px; top: 46px; animation: quanh 1.2s linear infinite; }
@keyframes quanh { from { transform: rotate(0) translateX(38px) rotate(0); } to { transform: rotate(360deg) translateX(38px) rotate(-360deg); } }

/* khu thử kéo cá */
#thu-keo label { display: block; margin: 8px 0; }
.thu-ds { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.thu-ds button { font: inherit; font-size: 22px; padding: 8px 14px; border: 2px solid var(--muc); border-radius: 6px; background: #fffdf6; color: var(--muc); cursor: pointer; }
.thu-ds button:hover { background: #3c6e78; color: #fffdf6; }

.nho { font-size: 17px; color: var(--mo); margin: 2px 0; }
dialog button { background: var(--muc); color: var(--giay); border: 0; border-radius: 4px; padding: 6px 14px; cursor: pointer; }

/* bảng P: cửa sổ có thẻ như hộp thoại Properties của Windows */
#bang-chinh {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9;
  width: min(1180px, 94vw); height: min(760px, 88vh); min-width: 420px; min-height: 320px; resize: both; overflow: hidden;
  display: flex; flex-direction: column; background: #f3efe7; border: 2px solid var(--vien); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
#bang-chinh[hidden] { display: none; }
.cs-tieu-de { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 16px; font-size: 26px; cursor: move; background: #fbf8f1; border-bottom: 1px solid #d8d0c2; border-radius: 8px 8px 0 0; }
.cs-tieu-de button { font-size: 22px; width: 40px; height: 34px; border: 0; background: none; cursor: pointer; border-radius: 4px; }
.cs-tieu-de button:hover { background: #d8402f; color: #fff; }
.cs-the { display: flex; flex-wrap: wrap; gap: 2px; padding: 10px 12px 0; border-bottom: 2px solid var(--vien); }
.the { font: inherit; font-size: 24px; padding: 6px 22px; margin-bottom: -2px; cursor: pointer; color: var(--mo);
  background: #e9e2d4; border: 2px solid #b9b0a2; border-bottom-color: var(--vien); border-radius: 8px 8px 0 0; }
.the:hover { color: var(--muc); }
.the.mo { color: var(--muc); background: #fffdf8; border-color: var(--vien); border-bottom-color: #fffdf8; }
.cs-noi-dung { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; background: #fffdf8; }
.trang { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; align-items: start; }
.trang[hidden] { display: none; }
.cot { padding: 0 14px 8px; border: 1px solid #d8d0c2; border-radius: 6px; background: #fff; }
#bang-chinh h3 { margin: 0 -14px 6px; padding: 8px 14px 4px; font-size: 26px; border-bottom: 1px solid var(--mo); background: #f7f3eb; border-radius: 6px 6px 0 0; }
.cs-day { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #d8d0c2; background: #f3efe7; border-radius: 0 0 8px 8px; }
.cs-day .nho { flex: 1; }
.cs-day button { font: inherit; font-size: 22px; min-width: 120px; padding: 6px 16px; cursor: pointer; border-radius: 4px; border: 1px solid var(--muc); background: #fffdf6; color: var(--muc); }
.cs-day #nut-xuat { background: var(--muc); color: var(--giay); }
#bang-chinh > .nho, #kq-xuat { margin: 0 14px; }
.hang { margin: 10px 0; font-size: 22px; }
.hang .tren { display: flex; justify-content: space-between; gap: 8px; }
.hang .gia-tri { font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
.hang input[type=range] { width: 100%; margin: 4px 0; height: 24px; accent-color: #3c6e78; cursor: pointer; }
.hang input[type=checkbox] { width: 24px; height: 24px; vertical-align: -4px; margin-right: 8px; accent-color: #3c6e78; }
.hang .nho { font-size: 18px; }
#kq-xuat { font: 14px/1.3 Consolas, monospace; }

/* đồng hồ thời gian trong ngày (góc trên trái) */
#dong-ho { position: fixed; top: 8px; left: 10px; z-index: 5; width: 176px; text-align: center; cursor: pointer;
  padding: 4px 6px 6px; background: rgba(255, 253, 248, .82); border: 2px solid var(--vien); border-radius: 12px; }
#dong-ho-svg { width: 132px; height: 132px; display: block; margin: 0 auto; }
#dong-ho-svg .chu-buoi { font: 11px 'Patrick Hand', 'Microsoft YaHei', 'Yu Gothic UI', 'Malgun Gothic', sans-serif; fill: #2b2722; pointer-events: none; }
#dong-ho-svg .chu-buoi.sang { fill: #fffdf6; }
#kim-gio { stroke: #2b2722; stroke-width: 4; stroke-linecap: round; }
#dong-ho-chu { font-size: 24px; line-height: 1.1; }

/* báo bắt được cá */
#bao-ca {
  position: fixed; left: 50%; top: 16%; transform: translateX(-50%); z-index: 7; pointer-events: none;
  padding: 12px 28px 14px; text-align: center; background: rgba(255, 253, 248, .92); border: 3px solid var(--vien); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: hienRa .35s ease-out;
}
#bao-ca[hidden] { display: none; }
@keyframes hienRa { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.hinh-ca { image-rendering: pixelated; display: block; margin: 0 auto; }
#bao-ca .hinh-ca { width: 256px; height: 128px; }
.bao-ca-ten { font-size: 36px; line-height: 1.1; }
.bao-ca-kg { font-size: 28px; color: var(--mo); }
.bao-ca-moi { font-size: 28px; color: #fffdf6; background: #d8402f; border-radius: 20px; padding: 0 16px; display: inline-block; animation: nhip .5s ease-in-out infinite alternate; }
#bao-ca .bao-ca-moi[hidden] { display: none; }

/* thời tiết + ví tiền dưới đồng hồ */
.nut-thoi-tiet { font: inherit; font-size: 20px; margin-top: 2px; width: 100%; cursor: pointer; border: 1px solid #b9b0a2; border-radius: 6px; background: #fffdf6; }
.vi-tien { font-size: 18px; margin-top: 3px; cursor: pointer; white-space: nowrap; }
.vi-tien:hover { color: #3c6e78; }

/* cửa hàng */
#cua-hang { width: min(1000px, 94vw); max-width: none; max-height: 88vh; padding: 14px 20px; }
.ch-xu { font-size: 26px; margin-left: auto; }
.ch-noi-dung { padding: 12px 2px; max-height: 60vh; overflow-y: auto; }
.ch-dau { margin-bottom: 10px; }
.ch-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ch-o { padding: 10px 12px; border: 2px solid #d8d0c2; border-radius: 10px; background: #fff; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ch-o.dang { border-color: #3c6e78; box-shadow: 0 0 0 3px rgba(60, 110, 120, .25); }
.ch-o .hinh-ca { width: 128px; height: 64px; }
.ch-ten { font-size: 24px; }
.hinh-do { image-rendering: pixelated; display: block; margin: 0 auto; }
.hinh-can { width: 192px; height: 96px; }
.hinh-moi { width: 128px; height: 96px; }
.hinh-moi-ca { width: 160px; height: 80px; margin: 8px auto; }
#cua-hang button:not(.the), #cua-hang .ch-dau button { font: inherit; font-size: 20px; padding: 4px 14px; border-radius: 6px; border: 1px solid var(--muc); background: var(--muc); color: var(--giay); cursor: pointer; }
#cua-hang button:disabled { opacity: .45; cursor: default; }
#cua-hang .the { background: #e9e2d4; color: var(--mo); }
#cua-hang .the.mo { background: #fffdf8; color: var(--muc); }

/* hướng dẫn câu cá */
#thu-keo { width: min(860px, 94vw); max-width: none; max-height: 90vh; }
#thu-keo h2 { margin: 0 0 4px; font-size: 34px; }
.hd-buoc { margin: 10px 0; padding: 8px 14px; border: 1px solid #d8d0c2; border-radius: 10px; background: #fff; }
.hd-buoc h3 { margin: 0 0 2px; font-size: 26px; }
.hd-buoc p { margin: 0 0 6px; font-size: 20px; }
.hd-ds-kieu { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.hd-kieu { padding: 8px 10px; border: 2px solid #d8d0c2; border-radius: 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.hd-kieu-ten { font-size: 22px; }
.hd-kieu.xong { border-color: #7cc46a; background: #f2faee; }
.hd-kieu.xong button { background: #8a8174; }
.hd-kieu button, #thu-can { font: inherit; font-size: 20px; padding: 4px 14px; border: 0; border-radius: 6px; background: #3c6e78; color: #fffdf6; cursor: pointer; }
/* mời người mới chơi */
.moi-nhap-nhay { color: var(--muc) !important; background: #ffe066 !important; border-radius: 8px; animation: moiNhay 1s ease-in-out infinite; }
@keyframes moiNhay { 50% { box-shadow: 0 0 0 6px rgba(255, 224, 102, .6); transform: scale(1.06); } }
.moi-choi { --mui: 50%; position: fixed; z-index: 8; max-width: 320px; padding: 12px 36px 12px 16px; font-size: 22px; text-align: center;
  background: #fffdf8; border: 3px solid var(--vien); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: noi 1.2s ease-in-out infinite; }
.moi-choi[hidden] { display: none; }
.moi-choi::before { content: ''; position: absolute; top: -14px; left: calc(var(--mui) - 12px); border: 12px solid transparent; border-top: 0; border-bottom: 14px solid var(--vien); }
.moi-choi button#moi-choi-mo { display: block; margin: 8px auto 0; font: inherit; font-size: 20px; padding: 4px 16px; border: 0; border-radius: 6px; background: #3c6e78; color: #fffdf6; cursor: pointer; }
.moi-choi-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--mo); }
@keyframes noi { 50% { transform: translateY(5px); } }
/* danh sách nhạc */
.ds-nhac { position: fixed; z-index: 8; display: flex; flex-direction: column; min-width: 220px; padding: 6px; background: #fffdf8; border: 2px solid var(--vien); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.ds-nhac[hidden] { display: none; }
.ds-nhac button { font: inherit; font-size: 20px; text-align: left; padding: 6px 12px; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--muc); }
.ds-nhac button:hover { background: #e9e2d4; }
.ds-nhac button.dang { color: #3c6e78; }

/* lưu game */
#luu-game { width: min(560px, 94vw); }
#luu-game h2 { margin: 0 0 6px; font-size: 32px; }
#luu-game .thu-ds button { background: #3c6e78; color: #fffdf6; border: 0; }
#luu-bao { min-height: 1.3em; color: #3c6e78; }

/* chọn điểm câu */
#chon-canh { width: min(980px, 94vw); max-width: none; }
#chon-canh h2 { margin: 0 0 10px; font-size: 34px; }
.ds-canh { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.the-canh { font: inherit; cursor: pointer; text-align: center; padding: 10px 12px 12px; border: 3px solid #d8d0c2; border-radius: 12px; color: var(--muc); }
.the-canh:hover { border-color: var(--vien); }
.the-canh.dang { border-color: #3c6e78; box-shadow: 0 0 0 3px rgba(60, 110, 120, .3); }
.the-canh-ho { background: linear-gradient(#e4f0ea, #fff); }
.the-canh-song { background: linear-gradient(#dfeeee, #fff); }
.the-canh-bien { background: linear-gradient(#dbe9f4, #fff8e8); }
.the-canh-bang { background: linear-gradient(#eef4fa, #fff); }
.canh-hinh { display: flex; justify-content: center; gap: 2px; height: 48px; }
.canh-hinh .hinh-ca { width: 64px; height: 32px; margin: 8px 0; }
.canh-ten { font-size: 32px; line-height: 1.1; }
.canh-dem { font-size: 18px; color: #3c6e78; margin-top: 4px; }

/* sổ tay cá */
#so-tay { width: min(1100px, 94vw); max-width: none; max-height: 88vh; padding: 14px 20px; }
.so-tay-dau { display: flex; align-items: baseline; gap: 16px; }
.so-tay-dau h2 { margin: 0; font-size: 34px; }
#so-tay .cs-the { padding: 8px 0 0; }
.so-tay-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 14px 2px; max-height: 60vh; overflow-y: auto; }
.the-ca { padding: 8px 12px 10px; border: 2px solid #d8d0c2; border-radius: 10px; background: #fff; text-align: center; }
.the-ca .hinh-ca { width: 192px; height: 96px; }
.the-ca.chua { background: #f3efe7; }
.ten-ca { font-size: 26px; line-height: 1.1; margin-top: 2px; }
.sao { color: #e0a020; font-size: 18px; letter-spacing: 2px; }
.tt-ca { font-size: 18px; text-align: left; margin-top: 4px; }
.tt-ca b { font-weight: normal; color: var(--mo); }

dialog { border: 2px solid var(--vien); border-radius: 6px; background: #fffdf8; color: var(--muc); max-width: min(560px, calc(100vw - 32px)); padding: 18px 22px; }
dialog::backdrop { background: rgba(244, 239, 230, .7); }
dialog h2 { margin: 0 0 8px; font-size: 28px; }
dialog dt { color: var(--mo); margin-top: 8px; }
dialog dd { margin: 0 0 0 12px; }
dialog form { text-align: right; margin-top: 12px; }