/* ĐOẠT BẢO v1286 - toàn bộ chữ + hình dùng chung một hệ tọa độ theo khung */
.son-mon-grid.son-mon-grid-icons .son-mon-card[data-son-mon-action="doat-bao"]:last-child{
  grid-column:auto!important;
}

.doat-bao-dialog{
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
  max-width:none;
  max-height:none;
}
.doat-bao-dialog::backdrop{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);
}

/* Khung gốc 3:4. Mọi thành phần bên trong bám theo chính khung này. */
.doat-bao-shell{
  position:relative;
  width:min(430px,94vw);
  aspect-ratio:3/4;
  margin:auto;
  box-sizing:border-box;
  background:url('/doat-bao/khung-doat-bao.webp') center/100% 100% no-repeat;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.55));
  overflow:hidden;
  container-type:inline-size;
}

/* nút đóng */
.doat-bao-close{
  position:absolute;
  z-index:8;
  right:6.8%;
  top:5.1%;
  width:8cqw;
  height:8cqw;
  min-width:28px;
  min-height:28px;
  max-width:36px;
  max-height:36px;
  padding:0;
  border:1px solid rgba(255,226,147,.7);
  border-radius:50%;
  background:#132947d9;
  color:#ffe7a3;
  font:900 clamp(20px,5.4cqw,24px)/1 sans-serif;
  cursor:pointer;
}

/* vùng tiêu đề */
.doat-bao-title{
  position:absolute;
  left:18%;
  right:18%;
  top:9.1%;
  height:4.8%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#ffe5a2;
  font:900 clamp(15px,4.25cqw,19px)/1 Georgia,serif;
  letter-spacing:.04em;
  text-shadow:0 2px 8px #000;
  white-space:nowrap;
  overflow:hidden;
}

.doat-bao-wallet{
  position:absolute;
  left:18%;
  right:18%;
  top:14.5%;
  height:3.2%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:clamp(9px,2.55cqw,11px);
  line-height:1;
  color:#d7e9ff;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  white-space:nowrap;
  overflow:hidden;
}
.doat-bao-wallet b{
  color:#ffd66d;
  font-size:1.15em;
}

/* Vùng rương: cố định trọn trong ô lớn phía trên của ảnh nền */
.doat-bao-grid{
  position:absolute;
  left:20.5%;
  top:19.4%;
  width:59%;
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:1.15cqw;
  box-sizing:border-box;
}

.doat-bao-chest{
  position:relative;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  filter:brightness(.78) saturate(.9);
  transition:filter .12s,transform .12s;
}
.doat-bao-chest img{
  position:absolute;
  inset:6%;
  width:88%;
  height:88%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
}

.db-chest-lid,.db-chest-body{
  position:absolute;
  inset:0;
  display:block;
  transition:transform .38s ease,opacity .28s;
}
.db-chest-lid{
  clip-path:inset(0 0 49% 0);
  transform-origin:50% 54%;
}
.db-chest-body{
  clip-path:inset(48% 0 0 0);
}
.doat-bao-chest.is-active{
  filter:brightness(1.45) saturate(1.25) drop-shadow(0 0 7px #77dcff);
  transform:scale(1.06);
}
.doat-bao-chest.is-win{
  filter:brightness(1.8) saturate(1.35) drop-shadow(0 0 12px #ffe56d);
  transform:scale(1.12);
}
.doat-bao-chest.is-open .db-chest-lid{
  transform:translateY(-30%) rotateX(-38deg);
  opacity:.88;
}
.doat-bao-chest.is-open .db-chest-body{
  transform:scale(1.04);
}

/* Nút nằm đúng trong thanh trang trí giữa khung */
.doat-bao-spin{
  position:absolute;
  left:50%;
  top:63.35%;
  transform:translate(-50%,-50%);
  display:block;
  width:31%;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:4;
}
.doat-bao-spin img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
}
.doat-bao-spin:disabled{
  filter:grayscale(.3);
  opacity:.65;
  cursor:wait;
}

/* bỏ dòng trắng trạng thái */
.doat-bao-status{
  display:none!important;
}

/* Vùng lịch sử nằm trọn trong ô dưới của nền */
.doat-bao-history{
  position:absolute;
  left:12%;
  top:71.2%;
  width:76%;
  height:18.2%;
  margin:0;
  padding:2.15cqw 2.2cqw 1.7cqw;
  box-sizing:border-box;
  border:0;
  border-radius:2.2cqw;
  background:transparent;
  overflow:hidden;
}
.doat-bao-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2cqw;
  height:12%;
  margin:0 0 1.25cqw;
  font-size:clamp(8px,2.25cqw,10px);
  line-height:1;
  color:#ffe08a;
  white-space:nowrap;
}
.doat-bao-history-head span{
  font-size:.82em;
  color:#9fb6ce;
}
.doat-bao-history-list{
  height:calc(88% - 1.25cqw);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.doat-bao-history-row{
  display:grid;
  grid-template-columns:10.5cqw 1fr;
  gap:1.2cqw;
  padding:1cqw .2cqw;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:clamp(8px,2.05cqw,9px);
  line-height:1.2;
}
.doat-bao-history-row time{color:#8ba3bc}
.doat-bao-history-row span{
  color:#e8f1fb;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.db-r-ha{color:#73d68b!important}
.db-r-trung{color:#67c8ff!important}
.db-r-cuc{color:#d78cff!important}
.db-r-so{color:#e3e9ef!important}
.doat-bao-empty{
  text-align:center;
  color:#879cb1;
  font-size:clamp(8px,2.15cqw,10px);
  padding-top:4.4cqw;
}

/* popup quà */
.doat-bao-reward-layer{
  position:absolute;
  z-index:7;
  inset:0;
  display:grid;
  place-items:center;
  background:radial-gradient(circle,rgba(53,151,255,.22),rgba(0,0,0,.52) 50%,rgba(0,0,0,.72));
  animation:dbFade .18s ease;
}
.doat-bao-reward-layer[hidden]{display:none}
.db-reward-card{
  text-align:center;
  min-width:55%;
  max-width:74%;
  padding:3.7cqw 3.2cqw;
  border:1px solid rgba(255,222,120,.75);
  border-radius:3.7cqw;
  background:linear-gradient(180deg,rgba(18,49,82,.96),rgba(4,18,38,.97));
  box-shadow:0 0 28px rgba(255,213,86,.35);
}
.db-reward-kicker{
  font-size:clamp(8px,2.1cqw,9px);
  color:#ffe391;
  letter-spacing:.08em;
  margin-bottom:1.6cqw;
}
.db-reward-card img{
  display:block;
  width:17.5cqw;
  height:17.5cqw;
  object-fit:contain;
  margin:0 auto 1.2cqw;
}
.db-reward-stone{
  font-size:12.5cqw;
  line-height:1;
  margin:1cqw 0 1.8cqw;
}
.db-reward-card strong{
  display:block;
  font-size:clamp(12px,3.5cqw,15px);
  color:#fff1bd;
}
.db-reward-card small{
  display:block;
  margin-top:1cqw;
  color:#a9bad0;
  font-size:clamp(8px,2.1cqw,9px);
}
.db-reward-card em{
  display:block;
  margin-top:.7cqw;
  color:#ffd86f;
  font-style:normal;
  font-weight:900;
}
@keyframes dbFade{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}

/* Mobile chỉ đổi kích thước cả khung; không đổi tọa độ riêng -> luôn đồng bộ */
@media(max-width:480px){
  .doat-bao-shell{width:min(390px,97vw)}
}

/* v1287: trình chỉnh bố cục admin. Inline % từ server là nguồn duy nhất cho PC + mobile. */
.doat-bao-title,.doat-bao-wallet,.doat-bao-grid,.doat-bao-spin,.doat-bao-history{right:auto!important;box-sizing:border-box}
.doat-bao-grid{aspect-ratio:auto!important}
.doat-bao-spin{transform:none!important}
.doat-bao-spin img{width:100%;height:100%;object-fit:contain}
.doat-bao-admin-tools{position:absolute;z-index:20;left:50%;top:1.2%;transform:translateX(-50%);display:flex;gap:4px;align-items:center;justify-content:center;white-space:nowrap}
.doat-bao-admin-tools[hidden]{display:none!important}
.doat-bao-admin-tools button{min-height:26px;padding:4px 8px;border:1px solid rgba(255,221,132,.75);border-radius:7px;background:rgba(9,34,62,.94);color:#ffe39a;font:700 10px/1.1 Arial,sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.doat-bao-admin-tools button:hover{background:rgba(18,57,94,.98)}
.doat-bao-dialog.is-layout-editing [data-db-layout]{outline:1px dashed #ffe36d!important;outline-offset:1px;cursor:move!important;touch-action:none;overflow:visible!important;background-color:rgba(26,124,199,.08)}
.doat-bao-dialog.is-layout-editing [data-db-layout]::before{content:attr(data-db-layout);position:absolute;z-index:25;left:1px;top:1px;padding:1px 3px;border-radius:3px;background:rgba(0,0,0,.72);color:#ffe36d;font:700 7px/1.15 Arial,sans-serif;pointer-events:none;text-transform:uppercase}
.doat-bao-dialog.is-layout-editing [data-db-layout].is-layout-selected{outline:2px solid #6ee7ff!important;background-color:rgba(110,231,255,.10)}
.db-layout-resize{position:absolute!important;z-index:30!important;right:-5px!important;bottom:-5px!important;width:13px!important;height:13px!important;border:1px solid #fff0a3!important;border-radius:3px!important;background:#29a9d8!important;box-shadow:0 0 5px rgba(0,0,0,.7)!important;cursor:nwse-resize!important;touch-action:none!important}
.doat-bao-dialog.is-layout-editing .doat-bao-spin{pointer-events:auto}
@media(max-width:480px){.doat-bao-admin-tools{top:.8%}.doat-bao-admin-tools button{min-height:24px;padding:3px 6px;font-size:9px}}
/* v1288: chữ tùy chỉnh do admin thêm/xóa, dùng cùng hệ tọa độ % với khung */
.doat-bao-custom-texts{position:absolute;inset:0;z-index:6;pointer-events:none}
.doat-bao-custom-text{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;text-align:center;font-weight:800;line-height:1.1;text-shadow:0 2px 6px rgba(0,0,0,.9);white-space:normal;overflow:hidden;word-break:break-word;pointer-events:none}
.doat-bao-dialog.is-layout-editing .doat-bao-custom-text{pointer-events:auto!important;cursor:move!important;outline:1px dashed #ffb84d!important;background:rgba(255,184,77,.07)}
.doat-bao-dialog.is-layout-editing .doat-bao-custom-text::before{content:'CHỮ';position:absolute;left:1px;top:1px;padding:1px 3px;border-radius:3px;background:rgba(0,0,0,.72);color:#ffdb8a;font:700 7px/1.15 Arial,sans-serif;pointer-events:none}
.doat-bao-dialog.is-layout-editing .doat-bao-custom-text.is-layout-selected{outline:2px solid #6ee7ff!important;background:rgba(110,231,255,.10)}
.doat-bao-admin-tools{max-width:88%;flex-wrap:wrap;row-gap:3px}
.doat-bao-admin-tools [data-db-delete-text]{color:#ffc0b5;border-color:rgba(255,130,110,.8)}

/* v1289: luôn hiện nút Sửa/Xóa chữ khi đang sửa; chỉ disable khi chưa chọn chữ */
.doat-bao-admin-tools button:disabled{opacity:.42;filter:grayscale(.35);cursor:not-allowed}
.doat-bao-admin-tools [data-db-delete-text]{display:inline-flex;align-items:center;justify-content:center}
.db-text-delete{display:none}
.doat-bao-dialog.is-layout-editing .doat-bao-custom-text .db-text-delete{display:grid;place-items:center;position:absolute;z-index:40;right:-9px;top:-9px;width:20px;height:20px;padding:0;border:1px solid rgba(255,220,200,.95);border-radius:50%;background:#8d2730;color:#fff;font:900 16px/18px Arial,sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.6);cursor:pointer;touch-action:manipulation}
.doat-bao-dialog.is-layout-editing .doat-bao-custom-text.is-layout-selected .db-text-delete{background:#cf3241;transform:scale(1.06)}

/* v1290: title/wallet built-in can be selected and deleted by admin */
.doat-bao-dialog.is-layout-editing [data-db-layout="title"],.doat-bao-dialog.is-layout-editing [data-db-layout="wallet"]{cursor:move!important}
.doat-bao-dialog.is-layout-editing [data-db-layout="title"].is-layout-selected,.doat-bao-dialog.is-layout-editing [data-db-layout="wallet"].is-layout-selected{outline:2px solid #6ee7ff!important;background:rgba(110,231,255,.10)!important}

/* v1291: nút Sửa/Xóa áp dụng cho phần tử đang chọn */
.doat-bao-admin-tools [data-db-delete-text]{color:#ffc0b5;border-color:rgba(255,130,110,.8)}
.doat-bao-admin-tools button:disabled{opacity:.38;cursor:not-allowed}

/* v1293: lịch sử chung toàn server: giờ + tên Đạo Hữu + vật phẩm */
.doat-bao-history-row{
  display:grid!important;
  grid-template-columns:10.5cqw minmax(0,1fr) auto minmax(0,1.45fr)!important;
  align-items:center;
  gap:.9cqw!important;
}
.doat-bao-history-row time{color:#8ba3bc!important;white-space:nowrap}
.doat-bao-history-row .db-history-name{color:#f4f7fb!important;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doat-bao-history-row .db-history-sep{color:#71869d!important}
.doat-bao-history-row .db-history-reward{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doat-bao-history-row .db-history-reward.db-r-ha{color:#73d68b!important}
.doat-bao-history-row .db-history-reward.db-r-trung{color:#67c8ff!important}
.doat-bao-history-row .db-history-reward.db-r-cuc{color:#d78cff!important}
.doat-bao-history-row .db-history-reward.db-r-so{color:#e3e9ef!important}


/* v1294 - phần quà hiện nổi, không dùng khung, đưa cao lên */
.doat-bao-reward-layer{
  position:absolute;
  z-index:7;
  inset:0;
  display:block;
  background:transparent !important;
  pointer-events:none;
  animation:none;
}
.doat-bao-reward-layer[hidden]{display:none}
.db-reward-float{
  position:absolute;
  left:50%;
  top:29%;
  transform:translate(-50%,-50%);
  width:72%;
  text-align:center;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  animation:dbRewardFloat .22s ease;
}
.db-reward-float img{
  display:block;
  width:80px;
  height:80px;
  object-fit:contain;
  margin:0 auto 4px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.42));
}
.db-reward-float .db-reward-kicker{
  margin-bottom:6px;
  font-size:10px;
  color:#ffe391;
  letter-spacing:.08em;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.db-reward-float .db-reward-stone{
  font-size:58px;
  line-height:1;
  margin:0 0 4px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.42));
}
.db-reward-float strong{
  display:block;
  font-size:18px;
  line-height:1.15;
  font-weight:900;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.35);
}
.db-reward-float small{
  display:block;
  margin-top:3px;
  color:#dce8f6;
  font-size:10px;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
}
.db-reward-float em{
  display:block;
  margin-top:3px;
  color:#ffd86f;
  font-style:normal;
  font-weight:900;
  font-size:14px;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
}
.db-reward-float.db-reward-empty strong{color:#fff1bd}
@keyframes dbRewardFloat{from{opacity:0;transform:translate(-50%,-46%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:480px){
  .db-reward-float{top:28%; width:76%}
  .db-reward-float img{width:68px;height:68px}
  .db-reward-float .db-reward-stone{font-size:52px}
  .db-reward-float strong{font-size:16px}
}