/* ===== Ola 5 — style.css (dùng chung cho 4 màn hình) ===== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Quicksand:wght@500;600;700&display=swap');

:root{
  --ola-green: #2fae4e;
  --ola-green-dark: #1f8a3a;
  --ola-red: #e0432f;
  --ola-red-dark: #b8321f;
  --ink: #1c2b22;
  --muted: #5c7267;
  --field-bg: #f3f7f4;
  --field-border: #cfe0d5;
}

*{ box-sizing:border-box; }
/* Ép mọi phần tử có thuộc tính [hidden] luôn bị ẩn thật sự — tránh bị các rule
   display:flex/inline-block phía dưới (cùng độ ưu tiên CSS) ghi đè làm lộ khung rỗng. */
[hidden]{ display:none !important; }
html{ height:100%; margin:0; overflow-x:hidden; }
body{
  margin:0; min-height:100%; width:100%;
  font-family:'Quicksand',sans-serif;
  background:radial-gradient(ellipse at top,#eaf6ee,#cfe9d6 70%);
  display:flex; align-items:center; justify-content:center;
  padding:24px 0;
  -webkit-user-select:none; user-select:none;
  overflow-x:hidden;
  overscroll-behavior:none;
}

#phone{
  position:relative;
  width:320px; height:700px;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 0 0 8px #1c2b22, 0 24px 50px rgba(0,0,0,.35);
}

/* Trên thiết bị di động thật: web hiển thị full toàn bộ khung màn hình,
   bỏ khung viền/bezel giả lập điện thoại (chỉ dùng để xem trước trên desktop).
   Một số trình duyệt/webview di động TÍNH SAI đơn vị svh/dvh (dù báo là có
   hỗ trợ), gây ra khoảng trống thừa ở đáy trang. Vì vậy calc(var(--vh)*100)
   — do JS đo chính xác chiều cao thật rồi gán vào — được đặt SAU CÙNG để
   luôn là nguồn quyết định cuối cùng, ghi đè lên cả dvh/svh gốc của trình
   duyệt. vh/svh/dvh chỉ còn là lớp nền dự phòng cho trường hợp JS chưa kịp
   chạy (ví dụ ngay khung hình đầu tiên trước khi script thực thi). */
@media (max-width: 560px){
  html, body{
    height:100vh;
    height:100svh;
    height:100dvh;
    height:calc(var(--vh, 1vh) * 100);
    overflow:hidden;
  }
  body{ padding:0; }
  #phone{
    width:100vw;
    height:100vh;
    height:100svh;
    height:100dvh;
    height:calc(var(--vh, 1vh) * 100);
    border-radius:0; box-shadow:none;
  }
  .screen{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Tăng cỡ chữ "Tên đăng nhập / Mật khẩu / Số điện thoại" (label + input)
     chỉ trên di động, tại 3 màn: đăng nhập, đăng ký, lấy lại mật khẩu. */
  #screen-login .field label,
  #screen-register .field label,
  #screen-forgot .field label{
    font-size:15px;
  }
  #screen-login .field input,
  #screen-register .field input,
  #screen-forgot .field input{
    font-size:16px;
  }

  /* Khung "Khoảnh khắc" to hơn một chút trên di động cho dễ bấm/xem */
  .moments-row{ padding:12px 38px; gap:10px; }
  .moment-card{ width:82px; gap:5px; }
  .moment-thumb{ width:82px; height:122px; border-radius:15px; }
  .moment-card .m-label{ font-size:12px; max-width:82px; }
  .moments-nav-btn{ width:30px; height:30px; }
  .moments-nav-btn span{ border-top-width:6px; border-bottom-width:6px; }
  .moments-nav-prev span{ border-right-width:8px; }
  .moments-nav-next span{ border-left-width:8px; }

  /* Popup "bạn bè online/offline" to hơn trên di động (đang bị quá nhỏ) */
  .friend-status-toast{
    font-size:15px;
    padding:12px 16px;
    border-radius:16px 16px 4px 16px;
    max-width:80%;
  }
  .friend-status-toast .fst-dot{ width:9px; height:9px; margin-right:7px; }
}
#phoneBg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; image-rendering:pixelated;
}

.screen{
  position:absolute; inset:0;
  z-index:1;
  display:none;
  flex-direction:column;
  align-items:center;
}
.screen.active{ display:flex; }

/* ---------- 1. LOGIN ---------- */
#screen-login{ padding:0 20px 22px; }
.brand{ display:flex; flex-direction:column; align-items:center; margin:26px 0 14px; }
.brand h1{ font-family:'Baloo 2',sans-serif; font-size:28px; color:var(--ola-green-dark); margin:6px 0 0; text-shadow:1px 2px 0 rgba(255,255,255,.6); }
.brand h1 span{ color:var(--ola-red); }
.tagline{ font-size:11px; color:var(--muted); margin:2px 0 0; }

#loginForm, #registerForm, #forgotForm{ width:100%; display:flex; flex-direction:column; gap:10px; }
.field label{ display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.field input{ width:100%; padding:9px 10px; border-radius:10px; border:1.5px solid var(--field-border);
  background:var(--field-bg); font-family:'Quicksand',sans-serif; font-size:13px; color:var(--ink); outline:none;
  transition:border-color .15s, box-shadow .15s; }
.field input:focus{ border-color:var(--ola-green); box-shadow:0 0 0 3px rgba(47,174,78,.15); }
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:34px; }
.pw-wrap .pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:14px; opacity:.6; padding:2px 4px; }
.pw-wrap .pw-toggle:hover{ opacity:1; }
.form-msg{ min-height:16px; font-size:11.5px; color:var(--ola-red-dark); font-weight:700; text-align:center; }
.form-msg.ok{ color:var(--ola-green-dark); }
.checkrow{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); cursor:pointer; padding:1px 0; }
.gender-field{ margin-bottom:10px; }
.gender-row{ display:flex; align-items:center; gap:22px; margin-top:2px; }
.gender-row .gender-opt{ gap:5px; }
.gender-icon{ font-size:14px; font-weight:700; line-height:1; }
.gender-icon-male{ color:#2f8fd6; }
.gender-icon-female{ color:#e0568c; }
.checkrow-terms{ margin-top:14px; }
.checkrow .chkbox{ position:relative; width:18px; height:18px; flex:0 0 18px; }
.checkrow .chkbox-box{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.checkrow .chkbox-tick{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated;
  opacity:0; transition:opacity .1s; }
.checkrow.checked .chkbox-tick{ opacity:1; }
button, .p-buy, .gc-play, .scat, .sd-action, .bank-actions li, .menu-grid li, .gadget-cell{
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover:not(:disabled):not(.pw-toggle):not(.linklike):not(.hdr-menu):not(.hdr-back), .p-buy:hover, .gc-play:hover, .sd-action:hover, .bank-actions li:hover{
  transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.15);
}
#loginForm .linklike, #registerForm .linklike, #forgotForm .linklike{ margin-top:0; }
.links{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:0; font-size:11px; }
.links a{ color:var(--muted); text-decoration:none; }
.links a:hover{ text-decoration:underline; }
.links .sep{ color:var(--field-border); }
#yahooLogo{ height:14px; vertical-align:middle; image-rendering:pixelated; }

/* nút 3 mảnh dùng chung */
.btn3{ display:flex; align-items:stretch; height:30px; border:none; padding:0; margin-top:4px; cursor:pointer; width:100%;
  border-radius:8px; overflow:hidden;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.btn3.small{ width:auto; height:26px; margin-top:0; flex-shrink:0; }
.btn3 .l, .btn3 .r{ width:8px; flex:0 0 8px; overflow:hidden; }
.btn3 .l img, .btn3 .r img{ height:100%; width:8px; display:block; image-rendering:pixelated; }
.btn3 .m{ position:relative; flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:4px;
  overflow:hidden; font-family:'Baloo 2',sans-serif; font-size:14px; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); padding:0 8px;}
.btn3.small .m{ font-size:11px; }
.btn3 .m img.pushicon{ position:relative; width:14px; height:13px; z-index:1; }
.btn3 .m img:not(.pushicon){ position:absolute; inset:0; width:100%; height:100%; z-index:-1; image-rendering:pixelated; }
.btn3 .m *{ position:relative; z-index:1; }
.btn3:hover{ transform:translateY(-2px); filter:brightness(1.06) drop-shadow(0 5px 6px rgba(0,0,0,.3)); }
.btn3:active{ transform:translateY(1px); filter:none; }
.login-actions{ display:flex; flex-direction:column; gap:22px; }
.btn-row{ display:flex; gap:8px; margin-top:0; }
.btn-row .btn3{ margin-top:0; flex:1; }

/* ---------- 2. LOADING ---------- */
#screen-loading{ justify-content:center; align-items:center; gap:16px; background:rgba(255,255,255,.55); }
#loadingLogo{ width:64px; image-rendering:pixelated; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
#spinner{
  width:18px; height:18px;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  animation:spinFrames .9s steps(14) infinite;
}
@keyframes spinFrames{ from{ background-position:0 0; } to{ background-position:-252px 0; } }
#loadingText{ font-size:12px; color:var(--muted); font-weight:600; }

/* ---------- header dùng chung cho Trang chủ + Menu ---------- */
.app-header{
  width:100%; height:38px; flex:0 0 38px;
  background:linear-gradient(180deg,var(--ola-green),var(--ola-green-dark));
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px; box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.hdr-logo{ height:16px; image-rendering:pixelated; }
.hdr-title{ font-family:'Baloo 2',sans-serif; color:#fff; font-size:15px; text-shadow:0 1px 1px rgba(0,0,0,.3); }
#chatroomTitle{ cursor:pointer; }
.hdr-menu, .hdr-back{ background:none; border:none; color:#fff; font-size:18px; cursor:pointer; padding:4px 8px; }
#editModeBtn{ font-family:'Baloo 2',sans-serif; font-size:15px; }
.hdr-spacer{ width:26px; }

/* ---------- Dùng chung: quickbar/qtab (Proposal) + feed (ME) ---------- */
.quickbar{ display:flex; flex:0 0 auto; border-bottom:1px solid var(--field-border); background:#fff; }
.qtab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0; background:none; border:none;
  font-size:10.5px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
.qtab img{ width:22px; height:22px; image-rendering:pixelated; }
.qtab.active{ color:var(--ola-green-dark); border-color:var(--ola-green); font-weight:700; }

.composer{ background:#fff; padding:8px 10px; border-bottom:6px solid var(--field-bg); flex:0 0 auto; }
.composer-row{ display:flex; align-items:center; gap:8px; }
.avatar{
  width:30px; height:30px; border-radius:50%; flex:0 0 30px;
  background:linear-gradient(135deg,var(--ola-green),var(--ola-green-dark));
  color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-size:14px;
}
.composer-row input{ flex:1; min-width:0; border:1.5px solid var(--field-border); background:var(--field-bg); border-radius:12px;
  padding:12px 14px; font-size:13px; outline:none; font-family:'Quicksand',sans-serif; min-height:38px; }
.composer-row input:focus{ border-color:var(--ola-green); }
.composer-tools{ display:flex; align-items:center; gap:8px; margin-top:6px; padding-left:38px; }
.composer-tools img{ width:19px; height:19px; image-rendering:pixelated; cursor:pointer; opacity:.85; }
.composer-tools img:hover{ opacity:1; }
.composer-tools .btn3{ margin-left:auto; }

.feed{ list-style:none; margin:0; padding:8px 0; overflow-y:auto; flex:1 1 auto; display:flex; flex-direction:column; gap:8px; }
.feed li{ background:#fff; padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.feed .fr{ display:flex; gap:8px; align-items:flex-start; }
.feed .avatar{ width:26px; height:26px; flex:0 0 26px; font-size:12px; }
.feed .body{ flex:1; min-width:0; }
.feed .name{ font-size:12px; font-weight:700; color:var(--ink); }
.feed .time{ font-size:10px; color:var(--muted); margin-left:6px; font-weight:500; }
.feed .text{ font-size:12.5px; color:var(--ink); margin-top:14px; margin-left:-34px; }
.feed .actions{ display:flex; gap:14px; margin-top:6px; font-size:11px; color:var(--muted); }
.feed .actions span{ cursor:pointer; }
.feed .actions span:hover{ color:var(--ola-green-dark); }

/* ---------- 3. TRANG CHỦ = LƯỚI GADGET ---------- */
#screen-home{ align-items:stretch; background:transparent; }

/* Các màn hình danh sách/nội dung cần giãn hết chiều ngang, tránh thừa lề 2 bên
   (trước đây thiếu align-items:stretch nên co theo nội dung, để lộ khoảng trống). */
#screen-me,
#screen-me-profile,
#screen-me-following,
#screen-allfeatures,
#screen-chatfriends,
#screen-chatlist{ align-items:stretch; }
.gadget-grid{ list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,3.5vw,18px);
  overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.gadget-cell{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:clamp(8px,2.5vw,12px) 2px;
  border-radius:12px; cursor:pointer; font-size:clamp(12.5px,3.5vw,14.5px); line-height:1.25; color:var(--ink); text-align:center; }
.gadget-cell:hover{ background:var(--field-bg); }
.gadget-cell img{ width:clamp(42px,12vw,56px); height:clamp(42px,12vw,56px); image-rendering:auto; object-fit:contain; }
.gadget-ico-logout{ width:clamp(42px,12vw,56px); height:clamp(42px,12vw,56px); display:flex; align-items:center; justify-content:center;
  font-size:clamp(26px,7vw,34px); color:var(--ola-red); }
.gadget-cell.editing{ animation:gadgetShake .25s infinite; cursor:grab; }
@keyframes gadgetShake{ 0%,100%{ transform:rotate(-1deg); } 50%{ transform:rotate(1deg); } }
.gadget-remove{ position:absolute; top:-4px; right:4px; width:18px; height:20px; image-rendering:pixelated;
  cursor:pointer; z-index:2; }

/* ---------- 3. TRANG CHỦ = "DANH BẠ" (đúng ảnh chụp gốc) ---------- */
.home-compose{ flex:0 0 auto; display:flex; align-items:center; gap:8px; margin:8px 10px; padding:6px 6px 6px 12px;
  background:#fff; border:1px solid var(--field-border); border-radius:16px; }
.home-compose img{ width:20px; height:20px; image-rendering:pixelated; flex:0 0 auto; }
.home-compose input{ flex:1; min-width:0; border:none; outline:none; font-size:12.5px; color:var(--ink);
  font-family:'Quicksand',sans-serif; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.home-compose input::placeholder{ color:var(--muted); }
.home-compose button{ flex:0 0 auto; background:var(--ola-green); color:#fff; border:none; border-radius:12px;
  padding:6px 12px; font-size:11px; font-weight:700; cursor:pointer; font-family:'Baloo 2',sans-serif; }

.home-avatar-wrap{ position:relative; width:38px; height:38px; flex:0 0 38px; cursor:pointer; }
.home-avatar{ width:100%; height:100%; border-radius:50%; overflow:hidden; background-color:var(--field-bg);
  background-image:url('../images/replyme-smile.png'); background-repeat:no-repeat; background-position:center;
  background-size:60%; border:1.5px solid var(--field-border); transition:filter .15s ease; }
.home-avatar.has-photo{ background-size:cover; background-position:center; }
.home-avatar-plus{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%; background:var(--ola-green); color:#fff;
  font-size:13px; line-height:15px; text-align:center; font-weight:700; pointer-events:none;
  box-shadow:0 0 0 1.5px #fff; opacity:0; transition:opacity .15s ease; }

/* Máy tính (có chuột thật): hover mới làm mờ avatar và hiện dấu "+" */
@media (hover:hover) and (pointer:fine){
  .home-avatar-wrap:hover .home-avatar{ filter:brightness(.5); }
  .home-avatar-wrap:hover .home-avatar-plus{ opacity:1; }
}
/* Thiết bị di động (chạm): không cần hiệu ứng mờ/dấu "+", chạm vào avatar là đổi ảnh ngay */
@media (hover:none), (pointer:coarse){
  .home-avatar-plus{ display:none; }
}

/* ---------- SHEET TẠO PHÒNG CHAT MỚI ---------- */
.new-room-avatar-wrap{ width:56px; height:56px; flex:0 0 56px; align-self:center; margin-bottom:10px; }
.new-room-name-input{ width:100%; padding:9px 10px; margin-bottom:10px; border-radius:10px;
  border:1.5px solid var(--field-border); background:var(--field-bg); font-size:13px; outline:none;
  font-family:'Quicksand',sans-serif; box-sizing:border-box; }
.new-room-name-input:focus{ border-color:var(--ola-green); box-shadow:0 0 0 3px rgba(47,174,78,.15); }

/* Ảnh đại diện tùy chỉnh (thay cho chữ cái) dùng chung mọi nơi hiển thị avatar của "bạn" */
.avatar.has-photo{ background-image:var(--my-avatar-url); background-size:cover; background-position:center;
  color:transparent; background-color:transparent; }
.m-avatar.has-photo{ background-image:var(--my-avatar-url); background-size:cover; background-position:center;
  background-repeat:no-repeat; color:transparent; }

/* ---------- KHOẢNH KHẮC (Stories) ---------- */
.moments-wrap{ position:relative; flex:0 0 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  border-bottom:1px solid rgba(255,255,255,.6); }
/* Luôn canh các thẻ khoảnh khắc cân đối ở giữa khung; khi số lượng nhiều vượt
   quá chiều rộng thì tự động chuyển sang cuộn ngang bình thường (không còn
   bị dồn/dính cứng vào mép phải khung hình như trước). */
.moments-row{ display:flex; gap:8px; padding:10px 34px; overflow-x:auto; scroll-behavior:smooth;
  justify-content:center; scrollbar-width:none; -ms-overflow-style:none; }
.moments-row::-webkit-scrollbar{ display:none; }
.moment-card{ flex:0 0 auto; width:72px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
/* 2 nút mũi tên tam giác trái/phải, chỉ hiện khi danh sách khoảnh khắc nhiều
   tới mức bị tràn (JS gắn class .has-overflow lên .moments-wrap). */
.moments-nav-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:24px; height:24px; border-radius:50%; border:none; padding:0;
  background:rgba(28,43,34,.55); display:none; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.moments-wrap.has-overflow .moments-nav-btn{ display:flex; }
.moments-nav-prev{ left:4px; }
.moments-nav-next{ right:4px; }
.moments-nav-btn span{ width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.moments-nav-prev span{ border-right:7px solid #fff; margin-right:2px; }
.moments-nav-next span{ border-left:7px solid #fff; margin-left:2px; }
.moments-nav-btn:active{ background:rgba(28,43,34,.8); }
.moment-thumb{ position:relative; width:72px; height:108px; border-radius:13px; overflow:hidden;
  border:2.5px solid var(--ola-green); display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; }
.moment-thumb.empty{ border-color:var(--field-border); }
.moment-thumb .m-avatar{ position:absolute; bottom:4px; left:4px; width:24px; height:24px; border-radius:50%;
  background:var(--ola-green-dark); color:#fff; font-family:'Baloo 2',sans-serif; font-size:11px; display:flex;
  align-items:center; justify-content:center; border:1.5px solid #fff; }
.moment-thumb .m-add{ position:absolute; bottom:2px; right:2px; width:20px; height:20px; border-radius:50%;
  background:var(--ola-green); border:1.5px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; }
.moment-thumb .m-cam{ width:28px; height:28px; image-rendering:pixelated; }
.moment-thumb .m-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:#fff; font-size:22px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.moment-card .m-label{ font-size:11px; color:var(--ink); max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- màn xem toàn màn hình ---- */
#screen-moment{ background:#000; padding:0; }
.moment-view{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; }
.moment-progress{ position:absolute; top:8px; left:8px; right:8px; height:3px; display:flex; gap:4px; z-index:3; }
.moment-progress-seg{ flex:1; height:100%; background:rgba(255,255,255,.35); border-radius:2px; overflow:hidden; }
.moment-progress-seg-fill{ display:block; height:100%; width:0%; background:#fff; border-radius:2px; }
.moment-head{ position:absolute; top:16px; left:8px; right:8px; display:flex; align-items:center; gap:8px; z-index:3; }
.moment-avatar{ width:26px; height:26px; border-radius:50%; background:var(--ola-green); color:#fff; font-family:'Baloo 2',sans-serif;
  font-size:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.moment-name{ color:#fff; font-size:12px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.moment-time{ color:rgba(255,255,255,.75); font-size:10px; margin-left:-2px; }
#momentCloseBtn{ margin-left:auto; background:none; border:none; color:#fff; font-size:18px; cursor:pointer; }
.moment-media{ flex:1; display:flex; align-items:center; justify-content:center; color:#fff; font-size:48px; }
.moment-nav{ position:absolute; top:0; bottom:0; width:50%; z-index:2; cursor:pointer; }
.moment-nav-left{ left:0; }
.moment-nav-right{ right:0; }
.moment-viewers{ position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); padding:10px 14px; display:none; }
.moment-viewers.show{ display:block; }
.moment-viewers .mv-title{ color:#fff; font-size:11px; font-weight:700; margin-bottom:6px; }
.moment-viewers ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; max-height:120px; overflow-y:auto; }
.moment-viewers li{ color:#fff; font-size:11.5px; display:flex; align-items:center; gap:6px; }
.moment-viewers .mv-avatar{ width:18px; height:18px; border-radius:50%; background:var(--ola-green); color:#fff;
  font-size:9px; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; }

.acc-list{ list-style:none; margin:0; padding:0 0 10px; overflow-y:auto; flex:0 1 auto; background:transparent;
  scrollbar-width:none; -ms-overflow-style:none; }
.acc-list::-webkit-scrollbar{ display:none; }
.acc-load-more{ text-align:center; font-size:11px; color:var(--muted); padding:10px; }
.acc-group{ border-top:1px solid rgba(255,255,255,.5); }
.acc-head{ display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; background:rgba(220,230,224,.5);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  font-size:14px; font-weight:700; color:var(--ink); }
.acc-arrow{ width:11px; height:6px; image-rendering:pixelated; }
.acc-edit-label{ margin-left:auto; border:none; background:none; padding:2px 4px; font-size:12px;
  line-height:1; cursor:pointer; opacity:.7; }
.acc-edit-label:hover{ opacity:1; }
.acc-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.acc-actions button{ border:none; background:none; padding:3px; font-size:12px; line-height:1;
  cursor:pointer; opacity:.55; border-radius:6px; }
.acc-actions button:hover{ opacity:1; background:rgba(0,0,0,.06); }
.acc-body{ list-style:none; margin:0; padding:0; max-height:600px; overflow:hidden; transition:max-height .2s ease;
  background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.acc-group.collapsed .acc-body{ max-height:0; }
.acc-item{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--field-bg); cursor:pointer; }
.acc-item:hover{ background:var(--field-bg); }
.acc-empty{ padding:14px; font-size:11.5px; color:var(--muted); text-align:center; list-style:none; }

/* ---------- NÚT TAM GIÁC GỢI Ý CUỘN (thay thanh cuộn) ---------- */
.scroll-hint{ position:absolute; left:50%; transform:translateX(-50%); width:30px; height:18px;
  display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.28); border-radius:9px;
  color:#fff; font-size:10px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:4; cursor:pointer; }
.scroll-hint.show{ opacity:.85; pointer-events:auto; }
.scroll-hint.show:hover{ opacity:1; }
.scroll-hint.up{ top:4px; }
.scroll-hint.down{ bottom:4px; }
.acc-avatar-wrap{ flex:0 0 auto; display:flex; border-radius:50%; }
.acc-avatar-wrap.has-moment{ padding:2px; border:2.5px solid var(--ola-green); }
.acc-ico{ width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:var(--field-bg);
  display:flex; align-items:center; justify-content:center; font-size:15px; position:relative; }
.acc-ico.acc-ico-photo{ background-size:cover; background-position:center; }
.acc-ico img:not(.dot){ width:18px; height:18px; object-fit:contain; image-rendering:pixelated; }
.acc-ico .dot{ position:absolute; bottom:-1px; right:-1px; width:8px; height:8px; image-rendering:pixelated; }
.acc-text{ display:flex; flex-direction:column; min-width:0; flex:1; }
.acc-text b{ font-size:12px; color:var(--ink); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-text small{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-side{ display:flex; align-items:center; flex:0 0 auto; margin-left:auto; padding-left:6px; }
.acc-online{ display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--ola-green-dark); }
.acc-online::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ola-green); flex:0 0 6px; }
.acc-text .status-line{ display:flex; align-items:center; gap:4px; }
.acc-text .status-dot{ width:8px; height:8px; flex:0 0 8px; image-rendering:pixelated; }
.acc-text .status-dot.device-icon{ width:11px; height:11px; flex:0 0 11px; object-fit:contain; color:var(--muted); }
.acc-text b.marquee{ display:block; text-overflow:clip; font-size:13.5px; }
.acc-text b.marquee span{ display:inline-block; white-space:nowrap; will-change:transform; }

/* ---------- 5. DANH SÁCH CHAT ---------- */
.chat-list{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); width:100%; }
.chat-list li{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--field-bg); cursor:pointer; }
.chat-list li:hover{ background:var(--field-bg); }
.chat-list .avatar{ width:36px; height:36px; flex:0 0 36px; font-size:15px; }
.chat-list .ci-body{ flex:1; min-width:0; }
.chat-list .ci-row1{ display:flex; justify-content:space-between; align-items:baseline; }
.chat-list .ci-name{ font-size:13px; font-weight:700; color:var(--ink); }
.chat-list .ci-time{ font-size:10px; color:var(--muted); }
.chat-list .ci-last{ font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-list .ci-side{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto; }
.chat-list .ci-online{ display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--ola-green-dark); }
.chat-list .ci-online::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ola-green); flex:0 0 6px; }
.chat-list .ci-dot{ width:9px; height:9px; }
.chat-list .ci-badge{ background:var(--ola-red); color:#fff; font-size:10px; font-weight:700; border-radius:9px;
  padding:1px 6px; flex:0 0 auto; }

/* ---------- 6c. THÀNH VIÊN TRONG PHÒNG CHAT ---------- */
.hdr-count{ font-size:11px; color:rgba(255,255,255,.85); font-weight:700; padding-right:2px; }
.room-members-list .rm-name-row{ display:flex; align-items:center; gap:6px; }
.room-members-list .rm-role{ font-size:9.5px; font-weight:700; color:#fff; background:var(--ola-green);
  border-radius:8px; padding:1px 6px; flex:0 0 auto; }
.room-members-list .ci-last.rm-status{ font-weight:600; }
.room-members-list .ci-last.rm-status.is-online{ color:var(--ola-green-dark); }
.room-members-list .ci-last.rm-status.is-offline{ color:var(--muted); }
.room-members-list .ci-dot{ width:10px; height:10px; }

/* ---------- 6. CỬA SỔ CHAT ---------- */
#screen-chatroom{ align-items:stretch; }
.msg-list{ list-style:none; margin:0; padding:10px; overflow-y:auto; flex:1 1 auto; background:var(--field-bg);
  display:flex; flex-direction:column; gap:8px; }

.msg-row{ display:flex; }
.msg-row.owner{ justify-content:flex-end; }
.msg-row.opponent{ justify-content:flex-start; }
.msg-row.system{ justify-content:center; }

.msg-row .msg-col{ display:flex; flex-direction:column; max-width:72%; }
.msg-row.owner .msg-col{ align-items:flex-end; }
.msg-row.opponent .msg-col{ align-items:flex-start; }

.bubble{ max-width:100%; padding:7px 12px; font-size:12.5px; line-height:1.4; color:var(--ink);
  border-radius:14px; box-shadow:0 1px 3px rgba(28,43,34,.10); }
.bubble .who{ display:block; font-size:10.5px; font-weight:700; color:var(--ola-green-dark); margin-bottom:2px; }
.bubble .who.who-clickable{ cursor:pointer; width:fit-content; }
.bubble .who.who-clickable:hover{ text-decoration:underline; }
.sd-action:disabled{ opacity:.6; cursor:default; }
.sd-action:disabled:hover{ background:var(--field-bg); }
.bubble .time{ display:block; font-size:9px; color:var(--muted); margin-top:3px; text-align:right; }
.bubble .msg-mention{ color:#1a73d6; font-weight:700; background:#eaf3fd; border-radius:4px; padding:0 2px; }

/* Trích dẫn tin nhắn được trả lời (hiện trong bubble, phía trên nội dung) */
.bubble .msg-quote{ display:block; font-size:10.5px; line-height:1.35; color:var(--muted);
  background:rgba(28,43,34,.06); border-left:3px solid var(--ola-green); border-radius:6px;
  padding:3px 7px; margin-bottom:4px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bubble .msg-quote b{ color:var(--ola-green-dark); font-weight:700; }
.bubble .msg-quote:hover{ background:rgba(28,43,34,.1); }
.bubble.owner-b .msg-quote{ background:rgba(255,255,255,.2); border-left-color:#fff; color:rgba(255,255,255,.9); }
.bubble.owner-b .msg-quote b{ color:#fff; }

/* Icon "↩ Trả lời" ngay dưới mỗi tin nhắn */
.msg-actions{ display:flex; margin-top:2px; }
.msg-row.owner .msg-actions{ justify-content:flex-end; }
.msg-row.opponent .msg-actions{ justify-content:flex-start; }
.msg-reply-btn{ border:none; background:none; padding:0 2px; font-size:10.5px; color:var(--muted); cursor:pointer; }
.msg-reply-btn:hover{ color:var(--ola-green-dark); text-decoration:underline; }

/* Highlight tạm thời khi nhảy tới đúng tin nhắn (từ trích dẫn hoặc từ thông báo) */
.msg-row.msg-highlight .bubble{ box-shadow:0 0 0 2px var(--ola-green), 0 1px 3px rgba(28,43,34,.10); }

.bubble.owner-b{
  background-color:var(--ola-green);
  color:#fff;
  border:1px solid var(--ola-green-dark);
  border-bottom-right-radius:4px;
}
.bubble.owner-b .time{ color:rgba(255,255,255,.85); }
.bubble.opponent-b{
  background-color:#ffffff;
  border:1.5px solid #bfe1f0;
  border-bottom-left-radius:4px;
}
.bubble.system-b{
  background-color:#efe6fb;
  border:1px solid #d9c6f5;
  font-size:11px; color:var(--muted); text-align:center;
  max-width:88%; border-radius:14px;
}

/* Khung "Đang trả lời ..." hiện phía trên ô nhập, đóng bằng nút ✕ */
.chat-reply-preview{ flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:6px 10px; background:var(--field-bg); border-top:1px solid var(--field-border); }
.chat-reply-preview .crp-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-reply-preview .crp-label{ font-size:10px; color:var(--ola-green-dark); font-weight:700; }
.chat-reply-preview .crp-text{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-reply-preview .crp-close{ flex:0 0 auto; border:none; background:none; font-size:13px; color:var(--muted); cursor:pointer; padding:2px 4px; }
.chat-reply-preview .crp-close:hover{ color:var(--ola-red-dark); }

.chat-mention-suggest{ flex:0 0 auto; margin:0 10px; border-radius:10px 10px 0 0; border-bottom:none; }
.chat-mention-suggest[hidden]{ display:none; }

.chat-input-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:8px 10px; background:#fff; border-top:1px solid var(--field-border);
  box-shadow:0 -2px 6px rgba(28,43,34,.05);
}
.chat-input-bar img{ width:20px; height:20px; image-rendering:pixelated; cursor:pointer; opacity:.85; }
.chat-input-bar img:hover{ opacity:1; }
.chat-input-bar input{ flex:1; border:1.5px solid var(--field-border); background:#ffffff; border-radius:18px;
  padding:8px 14px; font-size:12.5px; color:var(--ink); outline:none; font-family:'Quicksand',sans-serif;
  box-shadow:inset 0 1px 2px rgba(28,43,34,.05); }
.chat-input-bar input::placeholder{ color:var(--muted); }
.chat-input-bar input:focus{ border-color:var(--ola-green); box-shadow:0 0 0 3px rgba(47,174,78,.15); }
.chat-input-bar button{ background:none; border:none; cursor:pointer; padding:2px; }
.chat-input-bar button img{ width:22px; height:21px; }
.btn-text-send{ flex:0 0 auto; background:var(--ola-green); color:#fff; font-family:'Quicksand',sans-serif;
  font-weight:700; font-size:12.5px; border-radius:16px; padding:8px 16px !important; opacity:1; }
.btn-text-send:active{ opacity:.85; }

/* ---------- 6b. THẦY BÓI OLA ---------- */
#screen-fortune{ align-items:stretch; }
.fortune-hero{ flex:0 0 auto; text-align:center; padding:12px 16px 10px; background:#fff;
  border-bottom:1px solid var(--field-border); }
.fortune-hero img{ width:82px; height:auto; image-rendering:auto; filter:drop-shadow(0 3px 6px rgba(28,43,34,.18)); }
.fortune-hero p{ margin:6px 0 0; font-size:11.5px; color:var(--muted); }
.bubble.opponent-b.fortune-b{ background-color:#fff7e6; border-color:#f3d798; }

/* ---------- 7. CÁ NHÂN ---------- */
#screen-profile{ align-items:stretch; }
.profile-body{ flex:1 1 auto; overflow-y:auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); padding:14px 16px 18px; }
.profile-top{ display:flex; flex-direction:column; align-items:center; margin-bottom:10px; }
.avatar.big{ width:64px; height:64px; font-size:26px; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.pname{ font-family:'Baloo 2',sans-serif; font-size:17px; color:var(--ink); margin-top:8px; }
.pnick{ font-size:11.5px; color:var(--muted); margin-top:2px; }

.profile-info{ list-style:none; margin:0 0 12px; padding:0; border-top:1px solid var(--field-bg); }
.profile-info li{ display:flex; justify-content:space-between; align-items:center; padding:7px 2px;
  border-bottom:1px solid var(--field-bg); font-size:12px; }
.pi-label{ color:var(--muted); font-weight:600; display:flex; align-items:center; gap:4px; }
.pi-ico{ width:14px; height:12px; image-rendering:pixelated; }
.pi-val{ color:var(--ink); font-weight:700; text-align:right; }

.profile-actions{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.profile-actions .pushicon{ width:16px; height:14px; }

.profile-edit{ border-top:6px solid var(--field-bg); padding-top:12px; }
.profile-edit .field{ margin-bottom:8px; }
.linklike{ display:block; width:100%; text-align:center; background:none; border:none; margin-top:10px;
  color:var(--ola-green-dark); font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline; }

/* ---------- 8. CỬA HÀNG ---------- */
#screen-shop{ align-items:stretch; }
.hdr-cart-ico{ width:18px; height:18px; image-rendering:pixelated; vertical-align:middle; }
.cart-badge{ background:#fff; color:var(--ola-green-dark); font-size:9px; font-weight:800; border-radius:8px;
  padding:0 4px; margin-left:2px; vertical-align:top; }

.ken-bar{ flex:0 0 auto; width:100%; display:flex; align-items:center; justify-content:space-between;
  background:#fff8e6; padding:6px 12px; font-size:12px; color:var(--ink); border-bottom:1px solid var(--field-border); }
.ken-bar b{ color:#c98a00; }
.ken-bar button{ background:var(--ola-green); color:#fff; border:none; border-radius:10px; padding:4px 10px;
  font-size:11px; font-weight:700; cursor:pointer; font-family:'Baloo 2',sans-serif; }

.shop-cats{ flex:0 0 auto; display:flex; gap:6px; overflow-x:auto; padding:8px 10px; background:#fff;
  border-bottom:6px solid var(--field-bg); }
.scat{ flex:0 0 auto; display:flex; align-items:center; gap:4px; background:var(--field-bg); border:1px solid var(--field-border);
  border-radius:14px; padding:5px 10px; font-size:11px; color:var(--muted); cursor:pointer; white-space:nowrap; }
.scat img{ width:16px; height:16px; image-rendering:pixelated; }
.scat.active{ background:var(--ola-green); border-color:var(--ola-green-dark); color:#fff; font-weight:700; }

.product-grid{ list-style:none; margin:0; padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:10px;
  overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.product-grid li{ border:1px solid var(--field-border); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:4px; }
.product-grid .p-ico{ width:100%; height:64px; display:flex; align-items:center; justify-content:center;
  background:var(--field-bg); border-radius:8px; }
.product-grid .p-ico img{ width:38px; height:38px; image-rendering:pixelated; }
.product-grid .p-name{ font-size:11.5px; font-weight:700; color:var(--ink); line-height:1.3; }
.product-grid .p-price{ font-size:11px; color:#c98a00; font-weight:800; }
.product-grid .p-buy{ margin-top:2px; background:var(--ola-green); color:#fff; border:none; border-radius:8px;
  padding:5px 0; font-size:11px; font-weight:700; cursor:pointer; font-family:'Baloo 2',sans-serif; }
.product-grid .p-buy:active{ transform:translateY(1px); }

/* ---------- 9. NHẬT KÝ ---------- */
#screen-journal{ align-items:stretch; }
.journal-wrap{ flex:1 1 auto; overflow-y:auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); position:relative; }

.journal-list{ list-style:none; margin:0; padding:0; }
.journal-list li{ padding:10px 14px; border-bottom:1px solid var(--field-bg); cursor:pointer; }
.journal-list li:hover{ background:var(--field-bg); }
.journal-list .j-title{ font-size:13px; font-weight:700; color:var(--ink); }
.journal-list .j-meta{ font-size:10.5px; color:var(--muted); margin:2px 0 3px; }
.journal-list .j-excerpt{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.journal-editor{ display:none; flex-direction:column; gap:8px; padding:14px; }
.journal-editor.open{ display:flex; }
#journalTitle{ border:1.5px solid var(--field-border); background:var(--field-bg); border-radius:10px;
  padding:8px 10px; font-size:13px; font-weight:700; outline:none; font-family:'Quicksand',sans-serif; }
#journalTitle:focus{ border-color:var(--ola-green); }
#journalContent{ border:1.5px solid var(--field-border); background:var(--field-bg); border-radius:10px;
  padding:8px 10px; font-size:12px; min-height:220px; resize:none; outline:none; font-family:'Quicksand',sans-serif; line-height:1.5; }
#journalContent:focus{ border-color:var(--ola-green); }
.journal-editor-actions{ display:flex; flex-direction:column; gap:2px; }

.journal-reader{ display:none; flex-direction:column; padding:14px; }
.journal-reader.open{ display:flex; }
.journal-reader h3{ font-family:'Baloo 2',sans-serif; font-size:16px; color:var(--ink); margin:0 0 4px; }
.reader-meta{ font-size:11px; color:var(--muted); margin-bottom:8px; }
#readerContent{ font-size:12.5px; color:var(--ink); line-height:1.6; white-space:pre-wrap; }

/* ---------- 10. THÔNG BÁO ---------- */
#screen-notify .hdr-menu{ font-size:11px; font-family:'Quicksand',sans-serif; font-weight:700; }
.notify-list{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); width:100%; }
.notify-list li{ display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-bottom:1px solid var(--field-bg); }
.notify-list li.unread{ background:#f2fbf3; }
.notify-list li.clickable{ cursor:pointer; }
.notify-list .n-ico{ width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:var(--field-bg);
  display:flex; align-items:center; justify-content:center; font-size:14px; }
.notify-list .n-body{ flex:1; }
.notify-list .n-text{ font-size:12px; color:var(--ink); line-height:1.4; transition:opacity .2s ease, font-weight .2s ease; }
.notify-list .n-text .n-mention{ color:var(--ola-green-dark, #2e7d32); font-weight:700; cursor:pointer; }
.notify-list .n-text .n-mention:hover{ text-decoration:underline; }
.notify-list li.unread .n-text{ font-weight:700; opacity:1; }
.notify-list li:not(.unread) .n-text{ font-weight:400; opacity:.55; }
.notify-list .n-time{ font-size:10px; color:var(--muted); margin-top:2px; }
.notify-list .n-actions{ display:flex; gap:8px; margin-top:8px; }
.notify-list .n-act{ flex:0 0 auto; padding:6px 14px; border:none; border-radius:8px; font-size:11px; font-weight:700; cursor:pointer; }
.notify-list .n-act-accept{ background:var(--ola-green); color:#fff; }
.notify-list .n-act-accept:hover{ background:var(--ola-green-dark); }
.notify-list .n-act-decline{ background:var(--field-bg); color:var(--ink); border:1px solid var(--field-border); }
.notify-list .n-act-decline:hover{ background:#e9f0eb; }
.notify-empty{ text-align:center; color:var(--muted); font-size:12px; padding:30px 10px; }

/* ---------- 11. THẺ NHỚ ---------- */
#screen-sdcard{ align-items:stretch; position:relative; }
.sd-info{ flex:0 0 auto; font-size:11px; color:var(--muted); padding:6px 12px; background:#fff8e6;
  border-bottom:1px solid var(--field-border); }
.sd-grid{ list-style:none; margin:0; padding:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.sd-grid li{ display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; }
.sd-thumb{ width:100%; aspect-ratio:1/1; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; }
.sd-thumb img{ width:26px; height:26px; object-fit:contain; image-rendering:pixelated; }
.sd-fname{ font-size:9.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.sd-pager{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:6px 12px;
  background:#fff; border-top:1px solid var(--field-border); font-size:11px; }
.sd-pager button{ background:none; border:none; color:var(--ola-green-dark); font-weight:700; cursor:pointer; font-size:11px; }
.sd-pager button:disabled{ color:var(--field-border); cursor:default; }

.sd-sheet{ position:absolute; inset:0; background:rgba(0,0,0,.4); display:none; align-items:flex-end; z-index:10; }
.sd-sheet.open{ display:flex; }
.sd-sheet-inner{ width:100%; background:#fff; border-radius:16px 16px 0 0; padding:16px; display:flex; flex-direction:column;
  gap:6px; align-items:center; max-height:85%; overflow-y:auto; }
.sd-sheet-thumb{ width:64px; height:64px; border-radius:10px; margin-bottom:4px; }
.sd-sheet-name{ font-size:12px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.sd-action{ width:100%; padding:9px 0; border:none; background:var(--field-bg); border-radius:10px; font-size:12px;
  color:var(--ink); font-weight:600; cursor:pointer; }
.sd-action:hover{ background:#e7f3e9; }
.sd-action.danger{ color:var(--ola-red-dark); }
.sd-action-ico{ width:13px; height:13px; vertical-align:middle; image-rendering:pixelated; margin-right:2px; }

/* Hàng tiêu đề popup thành viên: tên tài khoản + nhãn "Đã là bạn bè" cùng 1 hàng (chỉ hiện khi đã là bạn) */
.ma-title-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.ma-title-row h3{ margin:0 !important; }
.ma-friend-badge{ font-size:11px; font-weight:700; color:var(--ola-green-dark); white-space:nowrap; }
.ma-friend-badge[hidden]{ display:none; }

/* Nút "Kết bạn" / "Đã gửi lời mời": căn giữa màn hình popup, không dính hàng với nút khác */
.ma-friend-center-btn{ display:block; width:auto; margin:0 auto 8px; padding:8px 22px; border:none; border-radius:10px;
  background:var(--field-bg); font-size:12px; font-weight:700; color:var(--ink); cursor:pointer; }
.ma-friend-center-btn:hover:not(:disabled){ background:#e7f3e9; }
.ma-friend-center-btn:disabled{ cursor:default; opacity:.7; }
.ma-friend-center-btn[hidden]{ display:none; }

/* Nút "Xóa bạn bè": hiển thị riêng 1 hàng như các nút hành động khác, chỉ khi đã là bạn bè */
#maUnfriendBtn[hidden]{ display:none; }

/* ---------- 12. TÌM HÀNG XÓM ---------- */
#screen-gps{ align-items:stretch; }
.radar-wrap{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; padding:16px 0 8px;
  background:radial-gradient(ellipse at center,#0d4a52,#062a30 75%); }
.radar{ position:relative; width:140px; height:140px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle,#0e5a63,#083339); box-shadow:inset 0 0 20px rgba(0,0,0,.5); }
.radar-ring{ position:absolute; border:1px solid rgba(120,255,200,.35); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
.radar-ring.r1{ width:46px; height:46px; }
.radar-ring.r2{ width:92px; height:92px; }
.radar-ring.r3{ width:138px; height:138px; }
.radar-sweep{
  position:absolute; top:50%; left:50%; width:50%; height:2px; background:linear-gradient(90deg,rgba(120,255,200,.9),transparent);
  transform-origin:0 0; animation:sweep 3s linear infinite;
}
@keyframes sweep{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.radar-me{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%;
  background:var(--ola-green); color:#fff; font-family:'Baloo 2',sans-serif; font-size:11px; display:flex; align-items:center;
  justify-content:center; box-shadow:0 0 0 3px rgba(47,174,78,.35); z-index:2; }
.radar-status{ color:#bfe9e0; font-size:11px; margin-top:8px; }

.neighbor-list{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); width:100%; }
.neighbor-list li{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--field-bg); }
.neighbor-list .avatar{ width:34px; height:34px; flex:0 0 34px; }
.neighbor-list .nb-body{ flex:1; }
.neighbor-list .nb-name{ font-size:12.5px; font-weight:700; color:var(--ink); }
.neighbor-list .nb-dist{ font-size:10.5px; color:var(--muted); }
.neighbor-list .nb-add{ background:var(--ola-green); color:#fff; border:none; border-radius:8px; padding:5px 10px;
  font-size:10.5px; font-weight:700; cursor:pointer; font-family:'Baloo 2',sans-serif; flex:0 0 auto; }
.neighbor-list .nb-add:disabled{ background:var(--field-border); cursor:default; }

/* ---------- 13. TẢI XUỐNG ---------- */
.dl-list{ list-style:none; margin:0; padding:10px; overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); width:100%;
  display:flex; flex-direction:column; gap:10px; }
.dl-list li{ border:1px solid var(--field-border); border-radius:10px; padding:9px 11px; }
.dl-row1{ display:flex; align-items:center; gap:8px; }
.dl-ico{ width:28px; height:28px; flex:0 0 28px; border-radius:7px; background:var(--field-bg);
  display:flex; align-items:center; justify-content:center; }
.dl-ico img{ width:18px; height:18px; object-fit:contain; image-rendering:pixelated; }
.dl-name{ flex:1; font-size:12px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-size{ font-size:10px; color:var(--muted); flex:0 0 auto; }
.dl-bar-wrap{ height:6px; background:var(--field-bg); border-radius:4px; margin-top:7px; overflow:hidden; }
.dl-bar{ height:100%; background:var(--ola-green); border-radius:4px; transition:width .2s linear; }
.dl-row2{ display:flex; justify-content:space-between; align-items:center; margin-top:5px; }
.dl-status{ font-size:10.5px; color:var(--muted); }
.dl-status.done{ color:var(--ola-green-dark); font-weight:700; }
.dl-actions button{ background:none; border:none; font-size:10.5px; color:var(--ola-green-dark); font-weight:700;
  cursor:pointer; margin-left:8px; }
.dl-actions button.rm{ color:var(--ola-red-dark); }

/* ---------- 14. ĐẬP TRỨNG ---------- */
#screen-egg{ align-items:stretch; background:linear-gradient(180deg,#fff8e6,#fff); }
.egg-toprow{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 8px; font-size:11.5px; color:var(--ink); font-weight:600; white-space:nowrap; }
.egg-history-link{ display:inline-block; width:auto; margin:0; padding:0; flex:0 0 auto;
  font-size:11.5px; color:var(--ola-green-dark); font-weight:700; }
.egg-price{ flex:0 0 auto; text-align:center; font-size:11.5px; color:var(--muted); padding:6px 10px;
  background:#fff3cf; border-bottom:1px solid #f0dca0; }
.egg-price b{ color:#c98a00; }

.egg-players{ flex:0 0 auto; list-style:none; display:flex; gap:6px; padding:8px 10px; margin:0;
  overflow-x:auto; background:#fff; border-bottom:1px solid var(--field-bg); }
.egg-players li{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:0 0 auto; width:52px; }
/* Avatar bạn bè trong Đập Trứng: ảnh thật (nếu có) hoặc icon mặc định của web
   (giống ô avatar tại Trang Chủ / "Có gì vui hôm nay ?") khi chưa có avatar. */
.egg-players .avatar{
  width:30px; height:30px; font-size:13px;
  background:var(--field-bg) url('../images/replyme-smile.png') no-repeat center;
  background-size:60%; border:1.5px solid var(--field-border); color:transparent;
}
.egg-players .avatar.has-photo{
  background-color:transparent; background-size:cover; background-position:center;
  border-color:transparent;
}
.egg-players .ep-name{ font-size:9px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52px; }
.egg-players .ep-state{ font-size:8.5px; color:var(--muted); }
.egg-players li.ready .ep-state{ color:var(--ola-green-dark); font-weight:700; }
/* Bạn bè (khác "Bạn") có thể bấm avatar/nick để mở nhắn tin riêng với họ */
.egg-players li.ep-clickable{ cursor:pointer; }
.egg-players li.ep-clickable:hover .ep-name{ color:var(--ola-green-dark); text-decoration:underline; }

.egg-grid{ flex:1 1 auto; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px; align-content:start; }
.egg-cell{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:url('../images/hammer-single.png') 4 3, pointer; }
.egg-cell.cracked, .egg-cell.swinging{ cursor:default; }
/* Khung ảnh trứng kích thước cố định để trứng vỡ (breakingegg.png, tỉ lệ khác
   với egg.png) không làm co giãn chiều cao hàng, gây dính lên hàng trên. */
.egg-img-wrap{ position:relative; width:40px; height:54px; display:flex; align-items:flex-end; justify-content:center; }
.egg-img-wrap img{ max-width:100%; max-height:100%; width:auto; height:auto;
  image-rendering:pixelated; filter:drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
/* Ảnh "bàn" (ban.png) nằm cố định dưới đáy khung, mỗi quả trứng đứng trên bàn */
.egg-img-wrap .egg-table-img{ position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:34px; height:10px; max-width:none; max-height:none; z-index:1; filter:none; }
.egg-img-wrap .egg-img{ position:relative; z-index:2; margin-bottom:1px; }
.egg-cell.cracked .egg-img-wrap .egg-img{ opacity:.55; }
.egg-cell .egg-num{ font-size:10px; color:var(--muted); }
.egg-cell.win .egg-num{ color:var(--ola-red-dark); font-weight:800; }

/* Hiệu ứng giơ búa lên rồi gõ xuống khi bấm đập trứng */
@keyframes eggHammerSwing{
  0%   { transform:rotate(-65deg) translate(-8px,-16px); opacity:0; }
  18%  { opacity:1; }
  50%  { transform:rotate(-65deg) translate(-8px,-16px); opacity:1; }
  72%  { transform:rotate(12deg) translate(3px,4px); opacity:1; }
  100% { transform:rotate(12deg) translate(3px,4px); opacity:0; }
}
.egg-cell-hammer{
  position:absolute; top:-6px; right:0; width:24px; height:auto;
  transform-origin:78% 22%; pointer-events:none; z-index:3;
  image-rendering:pixelated;
  animation:eggHammerSwing .32s ease-in-out forwards;
}

.egg-actions{ flex:0 0 auto; padding:10px 14px 14px; background:#fff; border-top:1px solid var(--field-bg); }

/* ---------- 15. ĐỌC BÁO ---------- */
#screen-rss{ align-items:stretch; position:relative; }
.rss-list{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); width:100%; }
.rss-list li{ display:flex; gap:8px; padding:10px 14px; border-bottom:1px solid var(--field-bg); cursor:pointer; }
.rss-list li:hover{ background:var(--field-bg); }
.rss-list .r-mark{ flex:0 0 auto; display:flex; align-items:center; }
.rss-list .r-mark img{ width:16px; height:16px; object-fit:contain; image-rendering:pixelated; }
.rss-list .r-body{ flex:1; }
.rss-list .r-title{ font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.35; }
.rss-list .r-meta{ font-size:10px; color:var(--muted); margin-top:2px; }

.rss-pager{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:6px 12px;
  background:#fff; border-top:1px solid var(--field-border); font-size:11px; }
.rss-pager button{ background:none; border:none; color:var(--ola-green-dark); font-weight:700; cursor:pointer; font-size:11px; }
.rss-pager button:disabled{ color:var(--field-border); cursor:default; }

.rss-article{ position:absolute; inset:38px 0 0; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); display:none; flex-direction:column; padding:14px; overflow-y:auto; }
.rss-article.open{ display:flex; }
#artTitle{ font-family:'Baloo 2',sans-serif; font-size:15px; color:var(--ink); margin:0 0 4px; }
.art-meta{ font-size:10.5px; color:var(--muted); margin-bottom:10px; }
#artBody{ font-size:12px; color:var(--ink); line-height:1.6; white-space:pre-wrap; flex:1; }
.art-actions{ display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--field-bg); padding-top:10px; margin-top:10px; }
.art-actions button{ background:var(--field-bg); border:none; border-radius:8px; padding:8px 0; font-size:11.5px;
  color:var(--ink); font-weight:600; cursor:pointer; }
.art-actions button:hover{ background:#e7f3e9; }
.art-actions button img{ width:13px; height:13px; vertical-align:middle; image-rendering:pixelated; margin-right:2px; }

/* ---------- 16. CÀI ĐẶT ---------- */
#screen-settings{ align-items:stretch; }
.settings-body{ flex:1 1 auto; overflow-y:auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); padding:12px 16px 20px; }
.set-group{ margin-bottom:16px; }
.set-title{ font-family:'Baloo 2',sans-serif; font-size:13px; color:var(--ola-green-dark); margin-bottom:6px;
  padding-bottom:4px; border-bottom:1px solid var(--field-bg); }
.set-group .checkrow{ padding:4px 0; }
.set-slider-row{ display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--ink); margin-top:6px; }
.set-slider-row input[type=range]{ width:100%; accent-color:var(--ola-green); }
.set-val{ align-self:flex-end; font-size:10.5px; color:var(--muted); font-weight:700; }

/* ---------- 16. CÀI ĐẶT (lưới danh mục) ---------- */
#screen-settings{ align-items:stretch; position:relative; }
.set-grid{ grid-template-columns:repeat(4,1fr); }
.settings-panel{ position:absolute; inset:38px 0 0; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); display:none; flex-direction:column; }
.settings-panel.open{ display:flex; }
.settings-panel .linklike{ text-align:left; padding:10px 14px 0; width:auto; margin:0; }
.settings-body{ flex:1 1 auto; overflow-y:auto; padding:10px 16px 20px; }
.set-empty{ font-size:12px; color:var(--muted); text-align:center; padding:30px 10px; line-height:1.6; }

/* ---------- 17. HỖ TRỢ ---------- */
#screen-support{ align-items:stretch; padding:14px 16px; gap:12px; }
.tip-wrap{ flex:1 1 auto; display:flex; flex-direction:column; }
.tip-card{ flex:1; background:#fff; border:1.5px solid var(--field-border); border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 16px; gap:8px; }
.tip-num{ font-family:'Baloo 2',sans-serif; color:var(--ola-green-dark); font-size:13px; font-weight:800; }
.tip-title{ font-family:'Baloo 2',sans-serif; font-size:16px; color:var(--ink); }
.tip-desc{ font-size:12px; color:var(--muted); line-height:1.5; }
.tip-pager{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding-top:10px; font-size:11px; }
.tip-pager button{ background:none; border:none; color:var(--ola-green-dark); font-weight:700; cursor:pointer; font-size:11px; }
.tip-pager button:disabled{ color:var(--field-border); cursor:default; }

/* ---------- 18. DANH BẠ ---------- */
#screen-contact{ align-items:stretch; position:relative; }
.contact-filter{ flex:0 0 auto; padding:8px 14px; background:#fff; border-bottom:1px solid var(--field-bg); }
.contact-groups{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); width:100%; }
.cg-header{ display:flex; align-items:center; justify-content:space-between; padding:8px 14px; background:var(--field-bg);
  cursor:pointer; font-size:11.5px; font-weight:700; color:var(--ink); }
.cg-header .cg-count{ color:var(--muted); font-weight:600; }
.cg-nicks{ list-style:none; margin:0; padding:0; }
.cg-nicks.collapsed{ display:none; }
.cg-nicks li{ display:flex; align-items:center; gap:9px; padding:8px 14px; border-bottom:1px solid var(--field-bg); cursor:pointer; }
.cg-nicks li:hover{ background:var(--field-bg); }
.cg-nicks .avatar{ width:28px; height:28px; flex:0 0 28px; font-size:12px; position:relative; }
.cg-nicks .dot{ position:absolute; bottom:-1px; right:-1px; width:8px; height:8px; image-rendering:pixelated; }
.cg-nicks .cn-body{ flex:1; }
.cg-nicks .cn-name{ font-size:12px; font-weight:700; color:var(--ink); }
.cg-nicks .cn-msg{ font-size:10px; color:var(--muted); }

/* ---------- 19. KHO ẢNH ---------- */
#screen-album{ align-items:stretch; position:relative; }
.album-info{ flex:0 0 auto; font-size:11px; color:var(--muted); padding:6px 12px; background:#fff8e6;
  border-bottom:1px solid var(--field-border); }
.album-grid{ list-style:none; margin:0; padding:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.album-grid li{ aspect-ratio:1/1; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; cursor:pointer; }
.album-grid li img{ width:26px; height:26px; object-fit:contain; image-rendering:pixelated; }
.album-preview{ width:120px; height:120px; border-radius:10px; margin-bottom:6px; display:flex; align-items:center;
  justify-content:center; font-size:34px; color:#fff; }
.album-preview img{ width:44px; height:44px; object-fit:contain; image-rendering:pixelated; }
.profile-info li.clickable{ cursor:pointer; }
.profile-info li.clickable:hover{ background:var(--field-bg); }

/* ---------- 20. NẠP KEN ---------- */
#screen-bank{ align-items:stretch; }
.bank-body{ flex:1 1 auto; overflow-y:auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.bank-balance{ text-align:center; padding:14px; font-size:13px; color:var(--ink); background:#fff8e6;
  border-bottom:1px solid var(--field-border); }
.bank-balance b{ color:#c98a00; font-family:'Baloo 2',sans-serif; font-size:16px; }
.bank-actions{ list-style:none; margin:0; padding:0; }
.bank-actions li{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--field-bg);
  font-size:12.5px; color:var(--ink); cursor:pointer; font-weight:600; }
.bank-actions li:hover{ background:var(--field-bg); }
.ba-ico{ font-size:16px; width:22px; text-align:center; }
.ba-ico-img{ width:20px; height:20px; object-fit:contain; image-rendering:pixelated; }

.bank-card-form{ display:none; flex-direction:column; gap:8px; padding:14px 16px; flex:1 1 auto; overflow-y:auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.bank-card-form.open{ display:flex; }
.form-sub-title{ font-family:'Baloo 2',sans-serif; font-size:14px; color:var(--ola-green-dark); margin-bottom:2px; }
.card-price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:4px; }
.card-price-grid button{ padding:8px 0; border:1.5px solid var(--field-border); background:var(--field-bg); border-radius:8px;
  font-size:11.5px; font-weight:700; color:var(--ink); cursor:pointer; }
.card-price-grid button.active{ background:var(--ola-green); border-color:var(--ola-green-dark); color:#fff; }

/* ---------- 21. BOX ---------- */
#screen-box{ align-items:stretch; }
.box-mode-row{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 14px; background:#fff8e6;
  border-bottom:1px solid var(--field-border); font-size:11.5px; color:var(--ink); }
.box-mode-row select{ flex:1; border:1px solid var(--field-border); border-radius:8px; padding:4px 6px; font-size:11px;
  font-family:'Quicksand',sans-serif; background:#fff; }

.box-compose{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 12px; background:#fff;
  border-bottom:6px solid var(--field-bg); }
.box-ico{ width:22px; height:22px; image-rendering:pixelated; flex:0 0 auto; }
.box-compose input{ flex:1; border:1.5px solid var(--field-border); background:var(--field-bg); border-radius:16px;
  padding:7px 12px; font-size:12px; outline:none; font-family:'Quicksand',sans-serif; }
.box-compose input:focus{ border-color:var(--ola-green); }
.box-compose button{ background:var(--ola-green); color:#fff; border:none; border-radius:14px; padding:7px 12px;
  font-size:11px; font-weight:700; cursor:pointer; font-family:'Baloo 2',sans-serif; flex:0 0 auto; }

.box-list{ list-style:none; margin:0; padding:10px 12px; overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  display:flex; flex-direction:column; gap:8px; }
.box-list li{ background:var(--field-bg); border-radius:10px; padding:8px 10px; }
.box-list .bx-name{ font-size:11.5px; font-weight:700; color:var(--ola-green-dark); }
.box-list .bx-time{ font-size:9.5px; color:var(--muted); margin-left:6px; font-weight:500; }
.box-list .bx-text{ font-size:12px; color:var(--ink); margin-top:2px; }

/* ---------- 22. BANG HỘI ---------- */
#screen-clan{ align-items:stretch; }
.clan-empty{ flex:1 1 auto; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:20px; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); text-align:center; }
.clan-empty.show{ display:flex; }
.clan-empty-ico{ width:56px; height:auto; image-rendering:pixelated; opacity:.8; }
.clan-empty p{ font-size:12px; color:var(--muted); margin:0; }
.clan-empty .field{ width:100%; }
.clan-empty input{ width:100%; padding:9px 10px; border-radius:10px; border:1.5px solid var(--field-border);
  background:var(--field-bg); font-size:13px; outline:none; font-family:'Quicksand',sans-serif; text-align:center; }

.clan-info{ display:none; flex-direction:column; flex:1 1 auto; overflow-y:auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); padding:14px 16px; }
.clan-info.show{ display:flex; }
.clan-banner{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:8px; }
.clan-banner img{ width:40px; height:40px; image-rendering:pixelated; }
.clan-name{ font-family:'Baloo 2',sans-serif; font-size:16px; color:var(--ink); }

/* ---------- 23. CAMERA ---------- */
#screen-camera{ align-items:stretch; background:#111; }
.cam-modes{ flex:0 0 auto; display:flex; background:#000; }
.cmode{ flex:1; background:none; border:none; color:#999; font-size:11px; padding:8px 0; cursor:pointer;
  border-bottom:2px solid transparent; }
.cmode.active{ color:#fff; border-color:var(--ola-green); font-weight:700; }

.cam-view{ flex:1 1 auto; position:relative; background:#000; display:flex; align-items:center; justify-content:center;
  overflow:hidden; }
#camVideo{ width:100%; height:100%; object-fit:cover; display:none; }
#camCanvas{ display:none; }
#camPhotoResult{ width:100%; height:100%; object-fit:cover; display:none; }
.cam-audio-viz{ display:none; flex-direction:column; align-items:center; gap:8px; color:#fff; font-size:40px; }
#camAudioTime{ font-size:14px; font-family:'Baloo 2',sans-serif; }
.cam-error{ color:#f5b9b0; font-size:12px; text-align:center; padding:0 24px; display:none; }

.cam-actions{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:16px; padding:14px; background:#000; }
.cam-shutter{ width:56px; height:56px; border-radius:50%; background:#fff; border:4px solid #999; cursor:pointer; font-size:0; }
.cam-shutter:active{ transform:scale(.92); }
.cam-actions .linklike{ color:#fff; width:auto; margin:0; }
.cam-actions .btn3{ width:auto; }

/* ---------- 24. TRUNG TÂM GAME ---------- */
#screen-calon, #screen-bom, #screen-loan12, #screen-loan12b{ align-items:stretch; background:#000; }
.game-frame-wrap{ flex:1 1 auto; min-height:0; width:100%; position:relative; }
.game-frame{ position:absolute; inset:0; width:100%; height:100%; border:none; display:block; background:#0a2740; }

#screen-gamecenter{ align-items:stretch; }
.gc-banner{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:12px 16px;
  background:linear-gradient(135deg,var(--ola-green),var(--ola-green-dark)); color:#fff; }
.gc-banner img{ width:30px; height:30px; image-rendering:pixelated; }
.gc-banner span{ font-family:'Baloo 2',sans-serif; font-size:14px; }

.gc-list{ list-style:none; margin:0; padding:12px; display:flex; flex-direction:column; gap:10px;
  overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.gc-list li{ display:flex; align-items:center; gap:10px; border:1px solid var(--field-border); border-radius:10px; padding:10px; }
.gc-thumb{ width:44px; height:44px; border-radius:8px; flex:0 0 44px; display:flex; align-items:center;
  justify-content:center; font-size:20px; color:#fff; }
.gc-thumb img{ width:28px; height:auto; image-rendering:pixelated; }
.gc-body{ flex:1; }
.gc-name{ font-size:12.5px; font-weight:700; color:var(--ink); }
.gc-desc{ font-size:10.5px; color:var(--muted); margin-top:2px; }
.gc-play{ background:var(--ola-green); color:#fff; border:none; border-radius:8px; padding:6px 12px;
  font-size:11px; font-weight:700; cursor:pointer; font-family:'Baloo 2',sans-serif; flex:0 0 auto; }

/* ---------- 25. KHO MEDIA ---------- */
#screen-media{ align-items:stretch; }
.media-grid{ list-style:none; margin:0; padding:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.media-grid li{ aspect-ratio:1/1; border-radius:8px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; font-size:20px; color:#fff; cursor:pointer; }
.media-grid li img{ width:24px; height:24px; object-fit:contain; image-rendering:pixelated; }
.media-grid .m-label{ font-size:9px; font-weight:700; }

/* ---------- 26. XÁC THỰC NICK ---------- */
#screen-verify{ align-items:stretch; }
.verify-body{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:24px 20px; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); text-align:center; }
.verify-ico{ width:40px; height:auto; image-rendering:pixelated; }
.verify-desc{ font-size:12px; color:var(--muted); margin:0; }
.verify-step{ width:100%; display:flex; flex-direction:column; gap:8px; }
.verify-done{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.verify-badge{ background:#e7f3e9; color:var(--ola-green-dark); font-family:'Baloo 2',sans-serif; font-size:14px;
  padding:8px 16px; border-radius:20px; border:1.5px solid var(--ola-green); }
.verify-done p{ font-size:12px; color:var(--muted); margin:0; }
.verify-mini{ background:none; border:1px solid var(--ola-green); color:var(--ola-green-dark); border-radius:6px;
  padding:1px 6px; font-size:9.5px; font-weight:700; cursor:pointer; margin-left:4px; }

/* ---------- Bình luận & Lịch sử (Đọc báo) ---------- */
.art-comments{ border-top:1px solid var(--field-bg); padding-top:10px; margin-top:10px; }
.art-comments-title{ font-family:'Baloo 2',sans-serif; font-size:12px; color:var(--ola-green-dark); margin-bottom:6px; }
.art-comments ul{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; }
.art-comments li{ background:var(--field-bg); border-radius:8px; padding:6px 8px; font-size:11.5px; }
.art-comments li b{ color:var(--ola-green-dark); margin-right:4px; }
.art-comment-input{ display:flex; gap:6px; }
.art-comment-input input{ flex:1; border:1.5px solid var(--field-border); border-radius:14px; padding:6px 10px;
  font-size:11.5px; outline:none; font-family:'Quicksand',sans-serif; }
.art-comment-input button{ background:var(--ola-green); color:#fff; border:none; border-radius:14px; padding:6px 12px;
  font-size:11px; font-weight:700; cursor:pointer; font-family:'Baloo 2',sans-serif; }

.rss-history{ position:absolute; inset:38px 0 0; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); display:none; flex-direction:column; padding-bottom:12px; }
.rss-history.open{ display:flex; }
.rss-history .rss-list{ flex:1 1 auto; }
.rss-history .linklike{ padding:0 16px; }

/* ---------- 28. KHO VIP ---------- */
#screen-vipstore{ align-items:stretch; }
.vip-current{ flex:0 0 auto; display:flex; justify-content:space-between; padding:8px 14px; font-size:11.5px;
  color:var(--ink); background:#fff8e6; border-bottom:1px solid var(--field-border); }
.vip-current b{ color:#c98a00; }
.vip-privacy{ flex:0 0 auto; padding:8px 14px; background:#fff; border-bottom:1px solid var(--field-bg); }
.vip-grid{ list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.vip-grid li{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px; border-radius:10px;
  cursor:pointer; font-size:9.5px; color:var(--ink); text-align:center; border:1.5px solid transparent; }
.vip-grid li.active{ border-color:var(--ola-green); background:#e7f3e9; }
.vip-grid .vip-ico{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#fff; }
.vip-actions{ flex:0 0 auto; display:flex; flex-direction:column; gap:2px; padding:10px 14px 14px; background:#fff;
  border-top:1px solid var(--field-bg); }

/* ---------- HỘP THOẠI XÁC NHẬN DÙNG CHUNG (softkey) ---------- */
.confirm-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); display:none;
  align-items:center; justify-content:center; z-index:50; }
.confirm-overlay.open{ display:flex; }
.confirm-box{ width:78%; background:#fff; border-radius:12px; padding:18px 16px 14px; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3); }
.confirm-box p{ font-size:12.5px; color:var(--ink); line-height:1.5; margin:0 0 14px; white-space:pre-wrap; }
.confirm-keys{ display:flex; border-top:1px solid var(--field-bg); }
.confirm-keys button{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:none; border:none; padding:10px 0 2px; font-size:12.5px; font-weight:700; cursor:pointer;
  font-family:'Baloo 2',sans-serif; color:var(--ink); }
.confirm-keys button img{ width:17px; height:17px; image-rendering:pixelated; }
.confirm-keys button:first-child{ border-right:1px solid var(--field-bg); color:var(--ola-red-dark); }
.confirm-keys button:last-child{ color:var(--ola-green-dark); }

/* ---------- 1b. ĐĂNG KÝ ---------- */
#screen-register, #screen-forgot{ padding:26px 20px 22px; }
#screen-register .links a, .checkrow a{ color:var(--ola-green-dark); text-decoration:underline; }

/* ---------- POPUP ĐIỀU KHOẢN ---------- */
.terms-box{ width:88%; text-align:left; max-height:80%; display:flex; flex-direction:column; }
.terms-box h3{ font-family:'Baloo 2',sans-serif; font-size:15px; color:var(--ink); margin:0 0 10px; text-align:center; }
.terms-content{ overflow-y:auto; flex:1; margin-bottom:10px; }
.terms-content p{ font-size:11.5px; color:var(--muted); line-height:1.6; margin:0 0 8px; }
.terms-box .linklike{ margin:0; }

/* ---------- 23. LỜI CẦU HÔN ---------- */
#screen-proposal{ align-items:stretch; }
.married-banner{ flex:0 0 auto; background:#fff0f5; border-bottom:1px solid #f5c9d8; padding:8px 14px;
  font-size:11.5px; color:var(--ink); text-align:center; }
.married-banner b{ color:var(--ola-red-dark); }
.proposal-list{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); width:100%; }
.proposal-list li{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--field-bg); }
.proposal-list .avatar{ width:32px; height:32px; flex:0 0 32px; }
.proposal-list .pr-body{ flex:1; }
.proposal-list .pr-name{ font-size:12.5px; font-weight:700; color:var(--ink); }
.proposal-list .pr-text{ font-size:10.5px; color:var(--muted); }
.proposal-list .pr-actions{ display:flex; gap:6px; flex:0 0 auto; }
.proposal-list .pr-actions button{ border:none; border-radius:8px; padding:5px 9px; font-size:10.5px; font-weight:700;
  cursor:pointer; font-family:'Baloo 2',sans-serif; }
.proposal-list .pr-accept{ background:var(--ola-green); color:#fff; }
.proposal-list .pr-cancel{ background:var(--field-bg); color:var(--ola-red-dark); }

/* Ẩn thanh cuộn mặc định toàn app — dùng nút tam giác gợi ý thay thế */
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ display:none; width:0; height:0; }

/* ---------- 5 ICON TĨNH (chỉ hiển thị ảnh, không có chức năng/link) ---------- */
/* Chỉ hiện sau khi đăng nhập: mặc định ẩn, JS gắn class .is-authed lên #phone
   khi vào các màn hình sau đăng nhập (xem PRE_LOGIN_SCREENS trong app.js).
   Dùng class thay vì :has() để chắc chắn hoạt động trên mọi trình duyệt/webview,
   kể cả các bản cũ chưa hỗ trợ :has(). */
.static-tab-icons{
  display:none;
  position:absolute; left:0; right:0; bottom:0;
  z-index:5;
  height:66px; box-sizing:border-box;
  align-items:center; justify-content:space-around;
  padding:6px 2px;
  background:rgba(233,248,224,.92);
  border-top:1px solid rgba(0,0,0,.12);
  pointer-events:auto;
}
.static-tab-icon{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:3px 3px; border-radius:10px;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background .12s ease;
}
.static-tab-icon:active{ background:rgba(0,0,0,.08); }
.static-tab-icon.tab-active{ background:rgba(76,175,80,.16); }
.static-tab-icons img{
  width:32px; height:32px;
  image-rendering:pixelated;
}
.static-tab-icon span{
  font-size:10.5px; font-weight:600; color:var(--ink);
  font-family:'Quicksand',sans-serif; line-height:1.15;
  text-align:center;
}
.static-tab-icon.tab-active span{ color:var(--ola-green-dark,#2e7d32); }
#phone.is-authed .static-tab-icons{
  display:flex;
}

/* Icon "Thông Báo" / "Phòng" rung liên tục + đổi nhãn thành "Xem" màu đỏ khi có nội dung mới
   liên quan tới bạn chưa xem; dừng rung + nhãn trở lại ban đầu ngay khi xem xong. */
@keyframes tabNotifyShake{
  0%, 100% { transform:rotate(0deg); }
  10%, 30%, 50%, 70% { transform:rotate(-14deg); }
  20%, 40%, 60%, 80% { transform:rotate(14deg); }
  90% { transform:rotate(0deg); }
}
.static-tab-icon.has-unread img{
  animation:tabNotifyShake 1.2s ease-in-out infinite;
  transform-origin:50% 15%;
}
.static-tab-icon.has-unread span{
  color:#e5342a;
  font-weight:800;
}

/* Chừa khoảng trống đáy màn hình đang hiển thị (sau đăng nhập) để nội dung
   như "Chat Nhóm" không bị 6 icon tĩnh che mất, vẫn kéo/vuốt xem được toàn bộ */
#phone.is-authed .screen.active{
  bottom:66px;
}

/* ---------- POPUP TRƯỢT LÊN: BẠN BÈ ONLINE/OFFLINE ----------
   Neo sát viền trên của thanh 6 icon tĩnh, ngay khu vực 2 icon
   "Cửa hàng - Cài đặt" (2 icon cuối bên phải). Trượt lên khi xuất hiện,
   tự ẩn sau ~3 giây (điều khiển bằng class .show trong JS). */
.friend-status-toast{
  position:absolute;
  right:4px;
  bottom:66px;
  z-index:30;
  max-width:62%;
  background:rgba(28,43,34,.92);
  color:#fff;
  font-family:'Quicksand',sans-serif;
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
  padding:10px 14px;
  border-radius:14px 14px 3px 14px;
  box-shadow:0 4px 12px rgba(0,0,0,.28);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(.94);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.friend-status-toast.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
.friend-status-toast .fst-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:6px; vertical-align:middle;
}
.friend-status-toast.is-online .fst-dot{ background:#4ee06a; }
.friend-status-toast.is-offline .fst-dot{ background:#9aa8a0; }

/* ---------- POPUP "BẠN ĐÃ ĐƯỢC NHẮC ĐẾN TRONG MỘT BÌNH LUẬN" ---------- */
.mention-toast{
  position:absolute;
  left:8px; right:8px; top:54px;
  z-index:40;
  display:flex; align-items:flex-start; gap:8px;
  background:rgba(28,43,34,.95);
  color:#fff;
  font-family:'Quicksand',sans-serif;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-10px) scale(.97);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  cursor:pointer;
}
.mention-toast.show{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
.mention-toast.is-demo{ background:rgba(58,143,214,.95); border:1px dashed rgba(255,255,255,.65); }
.mention-toast .mt-ico{ font-size:18px; line-height:1.2; flex:0 0 auto; }
.mention-toast .mt-body{ flex:1; min-width:0; }
.mention-toast .mt-title{ font-size:10px; font-weight:700; opacity:.85; text-transform:uppercase; letter-spacing:.02em; margin-bottom:2px; }
.mention-toast .mt-text{ font-size:12px; font-weight:600; line-height:1.35; }

/* Bình luận vừa được điều hướng tới từ 1 thông báo -> nhấp nháy nền vàng nhạt ~2 giây để dễ nhận ra */
.post-comment-list li.cmt-highlight{
  animation:cmtHighlightFlash 2.2s ease;
  border-radius:8px;
}
@keyframes cmtHighlightFlash{
  0%{ background:#fff4c2; }
  100%{ background:transparent; }
}

/* ---------- 16. ME CÁ NHÂN (trang blog riêng từng thành viên) ---------- */
.mp-body{ flex:1 1 auto; overflow-y:auto; background:rgba(255,255,255,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); padding-bottom:18px; }

.mp-cover-wrap{ position:relative; width:100%; height:120px; background:linear-gradient(135deg,var(--ola-green),var(--ola-green-dark)); cursor:pointer; overflow:hidden; }
.mp-cover{ width:100%; height:100%; background-color:transparent; background-repeat:no-repeat; background-position:center; background-size:cover; }
.mp-cover-actions{ position:absolute; top:8px; display:flex; align-items:center; gap:6px; }
.mp-cover-actions-left{ left:8px; }
.mp-cover-actions-right{ right:8px; }
.mp-cover-icon-btn{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; padding:0;
  color:#fff; background:rgba(0,0,0,.45); font-size:13px; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:background .15s ease; cursor:pointer; }
.mp-music-play:disabled{ opacity:.35; cursor:default; }
.mp-cover-wrap:hover .mp-cover-icon-btn{ background:rgba(0,0,0,.65); }
.mp-cover-wrap.readonly{ cursor:default; }
.mp-cover-wrap.readonly .mp-music-select{ display:none; }
.mp-cover-wrap.readonly .mp-cover-plus{ display:none; }
.mp-music-play.is-playing{ background:rgba(47,174,78,.85); }

/* ---------- 16b. CHỌN NHẠC NỀN (kho nhạc theo thể loại) ---------- */
.mp-music-off-row{ display:block; width:calc(100% - 20px); margin:10px; padding:10px 12px; text-align:left; font-size:12.5px; font-weight:700;
  color:var(--ink); background:var(--field-bg); border:1px solid var(--field-border); border-radius:10px; cursor:pointer; }
.mp-music-off-row.active{ background:var(--ola-green); border-color:var(--ola-green-dark); color:#fff; }

.mp-music-list{ list-style:none; margin:0; padding:0 10px 14px; display:flex; flex-direction:column; gap:8px; }
.mp-music-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; background:#fff; border:1px solid var(--field-border);
  border-radius:10px; cursor:pointer; }
.mp-music-item.selected{ border-color:var(--ola-green); background:#eaf7ee; }
.mp-music-preview{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:none; background:var(--ola-green); color:#fff;
  font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mp-music-preview.is-playing{ background:var(--ola-red); }
.mp-music-info{ flex:1 1 auto; min-width:0; }
.mp-music-title{ font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-music-cat{ font-size:10.5px; color:var(--muted); margin-top:2px; }
.mp-music-check{ flex:0 0 auto; width:18px; text-align:center; font-size:13px; color:var(--ola-green-dark); opacity:0; }
.mp-music-item.selected .mp-music-check{ opacity:1; }
.mp-music-empty{ padding:16px; text-align:center; font-size:11.5px; color:var(--muted); }

.mp-avatar-wrap{ position:relative; width:72px; height:72px; margin:-36px auto 0; border-radius:50%; cursor:pointer; }
.mp-avatar.avatar.big{ width:72px; height:72px; font-size:28px; border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.2); }
.mp-avatar-wrap .home-avatar-plus{ opacity:0; }
.mp-avatar-wrap:hover .home-avatar-plus{ opacity:1; }
.mp-avatar-wrap.readonly{ cursor:default; }
.mp-avatar-wrap.readonly .home-avatar-plus{ display:none; }

.mp-name{ text-align:center; font-family:'Baloo 2',sans-serif; font-size:16px; color:var(--ink); margin:8px 0 10px; }

.mp-actions{ display:flex; justify-content:center; gap:8px; padding:0 14px; }
.mp-act{ flex:1 1 0; max-width:110px; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--field-bg); border:none; border-radius:10px; padding:7px 4px; font-size:10.5px; font-weight:700;
  color:var(--ink); cursor:pointer; }
.mp-act:hover{ background:#e7f3e9; }
.mp-act.active{ background:var(--ola-green); color:#fff; }
.mp-act.pending{ background:#fff3cd; color:#8a6300; }
.mp-act-ico{ width:16px; height:16px; image-rendering:pixelated; }

/* Nút nổi "Nhắn tin" (3 chấm) ở Trang ME cá nhân của người khác — luôn hiển thị bất kể cuộn trang,
   bo tròn, nền mờ nhưng vẫn thấy rõ nội dung phía sau, để bấm 1 phát chuyển sang nhắn tin riêng. */
.mp-msg-fab{ position:absolute; right:14px; bottom:64px; z-index:5; display:flex; flex-direction:column;
  align-items:center; gap:2px; padding:9px 10px 7px; border:none; border-radius:16px;
  background:rgba(28,43,34,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  color:#fff; font-size:10.5px; font-weight:700; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.25); }
.mp-msg-fab:hover{ background:rgba(28,43,34,.72); }
.mp-msg-fab-ico{ width:18px; height:18px; image-rendering:pixelated; filter:invert(1) brightness(2); }
.mp-msg-fab[hidden]{ display:none; }

.mp-followers{ display:block; width:auto; margin:10px auto 0; text-align:center; font-size:11px; color:var(--ola-green-dark); font-weight:700; }

.mp-kiss-wrap{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:10px 0 4px; }
.mp-kiss-ico{ width:58px; height:45px; image-rendering:pixelated; cursor:pointer; transition:transform .15s ease; }
.mp-kiss-ico:hover{ transform:scale(1.08); }
.mp-kiss-ico.readonly{ cursor:default; }
.mp-kiss-ico.readonly:hover{ transform:none; }
.mp-kiss-ico.sent{ animation:mpKissPop .35s ease; }
@keyframes mpKissPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
.mp-kiss-count{ font-size:11px; color:var(--muted); font-weight:700; }

.mp-status-row{ display:flex; align-items:flex-start; gap:8px; margin:12px 16px 14px; padding:10px 12px; background:#fff3cf;
  border:1px solid #f0dca0; border-radius:10px; }
.mp-status-text{ flex:1; font-size:12px; color:var(--ink); line-height:1.5; white-space:pre-wrap; }
.mp-status-input{ flex:1; min-width:0; font-family:'Quicksand',sans-serif; font-size:12px; color:var(--ink);
  line-height:1.5; background:#fff; border:1px solid var(--ola-green); border-radius:6px; padding:3px 6px; }
.mp-status-input[hidden]{ display:none; }
.mp-status-edit{ flex:0 0 auto; background:none; border:none; cursor:pointer; font-size:13px; padding:0; }

.mp-info{ margin:10px 16px 0; }

.mp-following-block{ margin:12px 16px 0; }
.mp-following-head{ display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:var(--ink);
  border-top:1px solid var(--field-bg); padding-top:10px; }
.mp-following-head .mp-see-all{ display:inline-block; width:auto; margin:0; font-size:11px; font-weight:700; color:var(--ola-green-dark); }
.mp-following-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; gap:10px; overflow-x:auto; }
.mp-following-list li{ flex:0 0 auto; width:48px; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; }
.mp-following-list .avatar{ width:38px; height:38px; font-size:15px; }
.mp-following-list .mfl-name{ font-size:8.5px; color:var(--ink); max-width:48px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-following-empty{ font-size:11px; color:var(--muted); padding:8px 0; }

.mp-posts-head{ margin:14px 16px 6px; font-size:12.5px; font-weight:700; color:var(--ink); border-top:6px solid var(--field-bg); padding-top:12px; }
.mp-posts{ padding:0 10px; }

.mp-more-box{ width:80%; }
.mp-more-box h3{ margin-bottom:12px; }
.mp-more-box .sd-action{ margin-bottom:8px; }

/* ---------- Kéo chỉnh vị trí ảnh bìa (sau khi chọn ảnh từ máy) ---------- */
.cover-adjust-box{ width:88%; background:#fff; border-radius:12px; padding:14px 14px 0; text-align:center; overflow:hidden; }
.cover-adjust-box h3{ font-family:'Baloo 2',sans-serif; font-size:14px; color:var(--ink); margin:0 0 4px; }
.cover-adjust-hint{ font-size:11px; color:var(--muted); margin:0 0 10px; }
.cover-adjust-frame{ position:relative; width:100%; height:120px; border-radius:8px; overflow:hidden;
  background-color:var(--field-bg); background-repeat:no-repeat; background-size:cover; background-position:50% 50%;
  cursor:grab; touch-action:none; box-shadow:inset 0 0 0 1.5px var(--field-border); }
.cover-adjust-frame.dragging{ cursor:grabbing; }
.cover-adjust-keys{ display:flex; border-top:1px solid var(--field-bg); margin-top:12px; }
.cover-adjust-keys button{ flex:1; border:none; background:none; padding:11px 0; font-size:13px; font-weight:700;
  font-family:'Quicksand',sans-serif; cursor:pointer; }
.cover-adjust-keys button:first-child{ border-right:1px solid var(--field-bg); color:var(--ola-red-dark); }
.cover-adjust-keys button:last-child{ color:var(--ola-green-dark); }

/* ---------- Bài đăng ME (dùng chung: trang tổng hợp ME + trang ME cá nhân) ---------- */
.feed .name{ cursor:pointer; }
.feed .name:hover{ text-decoration:underline; }
.post-stats{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; margin-left:-34px; font-size:10.5px; color:var(--muted); }
.post-stats .post-cmts-toggle{ cursor:pointer; }
.post-stats .post-cmts-toggle:hover{ color:var(--ola-green-dark); text-decoration:underline; }
.post-actions{ display:flex; border-top:1px solid var(--field-bg); margin-top:6px; margin-left:-34px; padding-top:5px; }
.pa-btn{ flex:1; background:none; border:none; font-size:10.5px; font-weight:700; color:var(--muted); padding:4px 0; cursor:pointer; border-radius:6px; }
.pa-btn:hover{ background:var(--field-bg); color:var(--ink); }
.pa-btn.active-like{ color:var(--ola-green-dark); }
.pa-btn.active-dislike{ color:var(--ola-red-dark); }
.post-comments{ margin-left:-34px; width:calc(100% + 34px); min-width:0; box-sizing:border-box;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .32s ease, opacity .28s ease, margin-top .32s ease, padding-top .32s ease; }
.post-comments.open{ margin-top:6px; border-top:1px dashed var(--field-bg); padding-top:6px; max-height:600px; opacity:1; }
.post-comment-list{ list-style:none; margin:0 0 6px; padding:0 3px 0 0; display:flex; flex-direction:column; gap:4px;
  max-height:190px; overflow-y:auto; }
.post-comment-list li{ font-size:11px; color:var(--ink); background:var(--field-bg); border-radius:8px; padding:5px 8px; word-break:break-word; overflow-wrap:anywhere; }
.post-comment-list li b{ color:var(--ola-green-dark); margin-right:4px; }
.cmt-row{ display:block; }
.cmt-reply-tag{ color:var(--ola-green-dark); font-weight:700; margin-right:3px; }
.cmt-reply-btn{ display:inline-block; border:none; background:none; padding:0; margin-top:3px; font-size:10px;
  font-weight:700; color:var(--muted); cursor:pointer; }
.cmt-reply-btn:hover{ color:var(--ola-green-dark); text-decoration:underline; }
.pa-comment .cmt-count{ color:#e53935; font-weight:700; margin-left:3px; }
.post-comment-empty{ font-size:10.5px; color:var(--muted); }
.post-comment-input{ display:flex; gap:6px; align-items:center; width:100%; min-width:0; box-sizing:border-box; }
.post-comment-input .cmt-text-input{ flex:1; min-width:0; border:1px solid var(--field-border); background:#fff; border-radius:10px;
  padding:6px 10px; font-size:11px; outline:none; font-family:'Quicksand',sans-serif; }
.post-comment-input .cmt-send-btn{ flex:0 0 auto; background:var(--ola-green); color:#fff; border:none; border-radius:10px;
  padding:6px 12px; font-size:11px; font-weight:700; cursor:pointer; }

/* Nút Smile / Ảnh trong ô bình luận */
.cmt-icon-btn{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:none; background:var(--field-bg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.cmt-icon-btn:hover{ background:var(--field-border); }
.cmt-icon-btn img{ width:16px; height:16px; image-rendering:pixelated; }

/* Khung gợi ý tag "@tên-nick" — dùng chung cho ô đăng ME và ô bình luận */
.mention-suggest{ display:flex; flex-wrap:wrap; gap:4px; padding:6px; margin-bottom:6px; background:#fff;
  border:1px solid var(--field-border); border-radius:10px; }
.mention-opt{ border:none; background:var(--field-bg); color:var(--ola-green-dark); font-weight:700; font-size:11px;
  padding:4px 8px; border-radius:8px; cursor:pointer; }
.mention-opt:hover{ background:var(--ola-green); color:#fff; }

/* Bảng chọn icon biểu cảm cho bình luận */
.cmt-emoji-panel{ display:flex; flex-wrap:wrap; gap:4px; padding:6px; margin-bottom:6px; background:#fff;
  border:1px solid var(--field-border); border-radius:10px; }
.cmt-emoji-opt{ border:none; background:none; font-size:16px; line-height:1; padding:3px; cursor:pointer; border-radius:6px; }
.cmt-emoji-opt:hover{ background:var(--field-bg); }

/* Ảnh đính kèm trong bình luận: xem trước trước khi gửi + hiển thị sau khi đã gửi */
.cmt-photo-preview{ position:relative; display:inline-block; margin-bottom:6px; }
.cmt-photo-preview img{ width:56px; height:56px; object-fit:cover; border-radius:8px; display:block; }
.cmt-photo-remove{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
  border:1.5px solid #fff; background:var(--ola-red-dark); color:#fff; font-size:10px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.post-comment-list li .cmt-img{ display:block; margin-top:4px; max-width:120px; border-radius:8px; }

/* ---------- Admin: icon Sửa (bút chì) / Xóa (thùng rác) trên bài viết & bình luận ---------- */
.post-head-row{ display:flex; align-items:center; flex-wrap:wrap; }
.post-admin-actions{ display:flex; gap:4px; margin-left:auto; }
.admin-icon-btn{ background:none; border:none; cursor:pointer; font-size:13px; line-height:1;
  padding:3px 5px; border-radius:6px; }
.admin-icon-btn:hover{ background:var(--field-bg); }
.post-edit-textarea{ display:block; width:100%; box-sizing:border-box; resize:vertical; min-height:56px;
  font-size:12px; font-family:'Quicksand',sans-serif; border:1px solid var(--field-border); border-radius:8px;
  padding:6px 8px; outline:none; }
.post-edit-actions{ display:flex; gap:8px; margin-top:6px; }
.post-edit-actions button{ flex:1; border:none; border-radius:8px; padding:6px 0; font-size:11.5px;
  font-weight:700; cursor:pointer; }
.post-edit-save{ background:var(--ola-green); color:#fff; }
.post-edit-cancel{ background:var(--field-bg); color:var(--ink); }

.cmt-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:3px; }
.cmt-foot .cmt-reply-btn{ margin-top:0; }
.cmt-admin-actions{ display:flex; gap:2px; }
.cmt-admin-actions .admin-icon-btn{ font-size:11px; padding:2px 4px; }
.cmt-edit-textarea{ display:block; width:100%; box-sizing:border-box; resize:vertical; min-height:42px;
  font-size:11px; font-family:'Quicksand',sans-serif; border:1px solid var(--field-border); border-radius:6px;
  padding:5px 6px; outline:none; }
.cmt-edit-actions{ display:flex; gap:6px; margin-top:4px; }
.cmt-edit-actions button{ flex:1; border:none; border-radius:6px; padding:4px 0; font-size:10.5px;
  font-weight:700; cursor:pointer; }
.cmt-edit-save{ background:var(--ola-green); color:#fff; }
.cmt-edit-cancel{ background:#fff; color:var(--ink); }