/* assets/account_box.css
 * Thông tin tài khoản (PC + Mobile, UC-friendly)
 * Mục tiêu:
 *  - PC: 2 cột như layout cũ
 *  - Mobile: các ô hiển thị 2 cột, kiểu thẻ màu nhạt (như hình mẫu)
 */

.user-panel{
  background:#fff;
  border:1px solid #e7eef5;
  border-radius:14px;
  padding:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.user-panel-head{margin-bottom:10px;}
.user-panel-title{font-weight:900;letter-spacing:.3px;text-transform:uppercase;color:#0b1b2b;font-size:14px;}

/* 2 cột (PC) */
.user-2col{width:100%;}
.user-col{float:left;width:49%;}
.user-col + .user-col{float:right;}

.user-item{
  background:#f3fbf5; /* xanh nhạt */
  border:1px solid #dcefe2;
  border-radius:12px;
  padding:10px 10px;
  margin-bottom:10px;
  box-sizing:border-box;
  overflow:hidden;
}

.user-item.full{width:100% !important;float:none !important;clear:both !important;}

.user-label{
  display:inline-block;
  background:#1f7a3b;
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:7px 12px;
  border-radius:999px;
}

.user-value{
  float:right;
  font-weight:900;
  color:#176a33;
  font-size:14px;
  padding-top:4px;
}

/* form chọn server */
.server-inline{display:block;margin:0;}
.server-inline select{
  width:100%;
  max-width:100%;
  height:34px;
  border-radius:10px;
  border:1px solid #d7e3ee;
  padding:0 10px;
  box-sizing:border-box;
  background:#fff;
}

.server-inline .btn,
.server-inline .btn-primary,
.server-inline input[type=submit]{
  margin-top:8px;
  width:120px;
  height:34px;
  border-radius:999px;
  border:0;
  background:#1f7a3b;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

/* Badge server */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #dbe7ff;
  background:#eef5ff;
  color:#0b4aa2;
  font-weight:800;
  font-size:12px;
}

/* Clearfix */
.user-2col:after{content:"";display:block;clear:both;}

/* ===== Mobile: chuyển các ô sang 2 cột ===== */
@media (max-width: 680px){
  .user-col{float:none;width:100%;}

  /* 2 cột dạng thẻ */
  .user-col .user-item{
    float:left;
    width:48%;
    margin-right:4%;
  }
  .user-col .user-item:nth-child(2n){margin-right:0;}

  /* Tên nhân vật + Chọn server luôn full width */
  .user-col .user-item.full{width:100%;margin-right:0;}

  /* value xuống 1 dòng nếu dài */
  .user-value{max-width:58%;text-align:right;word-break:break-word;}
}

/* =====================================================
 * Layout mới theo mẫu (PC: 4 ô / hàng, Mobile: 2 ô / hàng)
 * Dùng cho tất cả trang trong /home
 * ===================================================== */

.acc-grid{width:100%;}

/* UC-safe: dùng float thay vì CSS grid */
.acc-item{
  float:left;
  width:23.5%;
  margin-right:2%;
  margin-bottom:10px;
  background:#f7fbf8;
  border:1px dashed #bfe2c8;
  border-radius:10px;
  padding:10px;
  box-sizing:border-box;
  overflow:hidden;
}
.acc-item:nth-child(4n){margin-right:0;}

.acc-k{
  font-weight:900;
  font-size:12px;
  color:#1b1f23;
}
.acc-v{
  margin-top:8px;
  font-weight:900;
  font-size:14px;
  color:#1f7a3b;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ô server: select + nút nằm cùng hàng */
.acc-server .acc-v{margin-top:6px;text-align:left;white-space:normal;}
.acc-server-row{width:100%;display:block;}
/* UC-safe: KHÔNG dùng calc()/gap. Dùng float + % để select + nút luôn cùng 1 hàng */
.acc-server-row select{
  float:left;
  width:78%;
  height:34px;
  border-radius:10px;
  border:1px solid #d7e3ee;
  padding:0 10px;
  box-sizing:border-box;
  background:#fff;
}
.acc-server-row input[type=submit],
.acc-server-row .btn{
  float:left;
  width:20%;
  max-width:110px;
  min-width:68px;
  height:34px;
  margin-left:2%;
  margin-top:0;
  border-radius:999px;
  border:0;
  background:#1f7a3b;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.acc-server-row:after{content:"";display:block;clear:both;}

.acc-grid:after{content:"";display:block;clear:both;}

@media (max-width: 680px){
  .acc-item{width:48%;margin-right:4%;}
  .acc-item:nth-child(2n){margin-right:0;}
  /* Giữ 2 cột nút/select cùng hàng trên mobile */
  .acc-server-row select{width:74%;}
  .acc-server-row input[type=submit],
  .acc-server-row .btn{width:24%;margin-left:2%;}
}



/* Server select nằm dưới (full width) */
.acc-server-wide{
  clear:both;
  width:100%;
  margin:0 0 10px 0;
  background:#f7fbf8;
  border:1px dashed #bfe2c8;
  border-radius:10px;
  padding:10px;
  box-sizing:border-box;
}
.acc-server-wide .acc-v{margin-top:8px;text-align:left;white-space:normal;}
.acc-server-wide .acc-server-row{max-width:520px;}
@media (max-width:680px){
  .acc-server-wide .acc-server-row{max-width:none;}
}

/* Search row (box xanh) dùng chung */
.search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 14px 0;}
/* Tránh rớt hàng trên PC: cho cụm search co giãn */
.search-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:1 1 360px;min-width:260px;}
.search-input{height:36px;border-radius:12px;border:1px solid #d7e3ee;padding:0 12px;min-width:180px;max-width:520px;flex:1 1 220px;box-sizing:border-box;background:#fff;}
.btn{display:inline-block;padding:8px 14px;border-radius:999px;border:0;cursor:pointer;font-weight:900;}
.btn-ghost{background:#eaf2ff;color:#2563eb;}
.search-right{flex:1;min-width:240px;border:1px solid #ffd8a8;background:#fff7e6;border-radius:12px;padding:8px 12px;box-sizing:border-box;}
.marquee-inline{color:#b45309;font-weight:900;}