/* ============================================================
   ADSHOPKEYS Account Dashboard — đồng bộ nhận diện thương hiệu
   Bảng màu lấy từ logo: xanh ngọc → xanh dương/tím + navy + hồng
   ============================================================ */

/* ---------- Khối dashboard thống nhất (bọc bằng JS, chạy với mọi theme) ---------- */
.adk-shell {
  display: flex !important; gap: 24px; align-items: flex-start;
  background: var(--adk-bg);
  border: 1px solid var(--adk-line);
  border-radius: 20px; padding: 20px;
  margin: 6px 0 30px;
  font-family: inherit; /* khớp font của theme */
}
.adk-shell .woocommerce-MyAccount-navigation {
  width: 268px !important; max-width: 268px; flex: none !important; float: none !important;
  background: var(--adk-navy);
  border-radius: 16px; padding: 14px;
  box-shadow: var(--adk-shadow);
  position: sticky; top: 90px; margin: 0 !important;
}
.adk-shell .woocommerce-MyAccount-content {
  flex: 1 !important; float: none !important; width: auto !important;
  min-width: 0; margin: 0 !important;
}
@media (max-width: 900px) {
  .adk-shell { flex-direction: column; padding: 12px; }
  .adk-shell .woocommerce-MyAccount-navigation { width: 100% !important; max-width: none; position: static; }
}

/* ---------- Khối người dùng ---------- */
.adk-user-chip {
  display: flex; gap: 10px; align-items: center;
  background: rgba(255,255,255,.08); border-radius: 12px;
  padding: 12px; margin-bottom: 10px;
}
.adk-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--adk-grad); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
}
.adk-user-meta { min-width: 0; }
.adk-user-meta b { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adk-user-meta small { display: block; color: #7FDCEC; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Menu sidebar ---------- */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 2px 0; }
.woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: #B9C7DD; font-size: 13.5px; font-weight: 500;
  text-decoration: none; transition: .15s;
}
.woocommerce-MyAccount-navigation li a:hover { background: rgba(255,255,255,.07); color: #fff; }
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--adk-grad); color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px -6px rgba(59,91,219,.55);
}
/* Nhãn nhóm chèn bằng JS */
.adk-nav-group {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #5D7397; font-weight: 700;
  padding: 14px 12px 4px; list-style: none;
}
/* Đăng xuất */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 10px; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  justify-content: center;
  border: 1px solid rgba(255,120,120,.35);
  background: rgba(220,38,38,.12); color: #FCA5A5; font-weight: 600;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: rgba(220,38,38,.24); color: #fff; }

/* Biểu tượng menu (chèn bằng JS) */
.adk-nav-ic { width: 17px; height: 17px; flex: none; opacity: .9; }

/* ---------- Tiêu đề trang ---------- */
.adk-page-head { margin-bottom: 18px; }
.adk-page-head h2 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; color: var(--adk-ink); }
.adk-page-head p { color: var(--adk-muted); font-size: 13.5px; margin: 0; }

/* ---------- Thẻ hero (chữ ký thương hiệu) ---------- */
.adk-hero {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 22px 24px; margin-bottom: 18px;
  background: var(--adk-grad); color: #fff;
  box-shadow: 0 16px 34px -14px rgba(59,91,219,.5);
}
.adk-hero::before {
  content: "$"; position: absolute; right: 6px; top: -34px;
  font-size: 190px; font-weight: 800; opacity: .1;
  transform: rotate(12deg); line-height: 1;
}
.adk-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.adk-hero-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.adk-hero-amount { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.adk-hero-amount .woocommerce-Price-amount { color: #fff; }
.adk-hero-cut { border-top: 2px dashed rgba(255,255,255,.4); margin: 16px -24px 14px; position: relative; }
.adk-hero-cut::before, .adk-hero-cut::after {
  content: ""; position: absolute; top: -9px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--adk-bg);
}
.adk-hero-cut::before { left: -9px; } .adk-hero-cut::after { right: -9px; }
.adk-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.adk-hero-stats small { display: block; font-size: 11.5px; opacity: .88; }
.adk-hero-stats b { font-size: 15px; font-weight: 800; }

/* ---------- Thẻ nội dung ---------- */
.adk-card {
  background: #fff; border: 1px solid var(--adk-line);
  border-radius: var(--adk-r); box-shadow: var(--adk-shadow);
  margin-bottom: 18px; overflow: hidden;
}
.adk-card-h {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--adk-line);
}
.adk-card-h b { font-size: 15px; font-weight: 700; color: var(--adk-ink); }
.adk-card-b { padding: 18px; }

/* ---------- Bảng ---------- */
.adk-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.adk-tbl th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--adk-muted); font-weight: 700;
  padding: 10px 16px; background: #F5F8FC; border-bottom: 1px solid var(--adk-line);
}
.adk-tbl td { padding: 12px 16px; border-bottom: 1px solid var(--adk-line); vertical-align: middle; }
.adk-tbl tr:last-child td { border-bottom: none; }
.adk-tbl tr:hover td { background: #FAFCFF; }
.adk-empty { text-align: center; color: var(--adk-muted); padding: 30px 16px !important; }

/* ---------- Nhãn trạng thái ---------- */
.adk-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.adk-tag-ok   { background: var(--adk-ok-bg);   color: var(--adk-ok); }
.adk-tag-warn { background: var(--adk-warn-bg); color: var(--adk-warn); }
.adk-tag-bad  { background: var(--adk-bad-bg);  color: var(--adk-bad); }

/* ---------- Nút ---------- */
.adk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 9px; padding: 8px 14px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  text-decoration: none !important; transition: .15s; line-height: 1.3;
}
.adk-btn-p { background: var(--adk-grad); color: #fff !important; box-shadow: 0 8px 18px -8px rgba(59,91,219,.55); }
.adk-btn-p:hover { filter: brightness(1.07); color: #fff; }
.adk-btn-w { background: #fff; color: var(--adk-blue) !important; }
.adk-btn-o { background: #fff; border: 1px solid var(--adk-line); color: var(--adk-ink) !important; }
.adk-btn-o:hover { border-color: #C6D2E4; background: #F7FAFF; }
.adk-btn-d { background: var(--adk-bad-bg); color: var(--adk-bad) !important; }
.adk-btn-d:hover { background: #FADCDC; }

/* ---------- Trang Bảo mật ---------- */
.adk-opt { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 14px; cursor: pointer; }
.adk-opt b { font-size: 13.5px; color: var(--adk-ink); display: block; }
.adk-opt small { color: var(--adk-muted); font-size: 12.5px; }
.adk-sw { position: relative; width: 44px; height: 24px; flex: none; display: inline-block; }
.adk-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.adk-sw i {
  position: absolute; inset: 0; background: #CBD5E1; border-radius: 99px; transition: .2s;
}
.adk-sw i::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.adk-sw input:checked + i { background: var(--adk-blue); }
.adk-sw input:checked + i::after { transform: translateX(20px); }
.adk-sw input:focus-visible + i { outline: 2px solid var(--adk-cyan); outline-offset: 2px; }

.adk-sessions .adk-session {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px solid var(--adk-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.adk-sessions .adk-session:last-child { margin-bottom: 0; }
.adk-session-info b { font-size: 13.5px; display: block; color: var(--adk-ink); }
.adk-session-info small { color: var(--adk-muted); font-size: 12px; }

.adk-note {
  background: #E8F1FE; border: 1px solid #CBDEFA; color: #1E4FA8;
  border-radius: 12px; padding: 13px 16px; font-size: 13px; margin-bottom: 18px;
}

.adk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---- v2.7.3: responsive mobile cho khối dashboard ---- */
@media (max-width: 768px) {
  /* Bảng (Đơn hàng, Nhật ký, Hoa hồng...) rộng hơn màn hình → cuộn ngang mượt */
  .adk-shell .woocommerce-MyAccount-content table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .adk-shell .woocommerce-MyAccount-content table th,
  .adk-shell .woocommerce-MyAccount-content table td { white-space: nowrap; }
  .adk-shell { border-radius: 14px; }
  .adk-hero { padding: 18px 16px; }
  .adk-hero-amount { font-size: 26px; }
  .adk-hero-stats { gap: 16px; }
  .adk-page-head h2 { font-size: 20px; }
}

/* ============================================================
   v2.7.4 — TRIỆT TRÀN NGANG MOBILE (gốc rễ: flexbox của theme)
   Flatsome bọc nội dung trong .row.row-main (display:flex);
   cột flex mặc định min-width:auto nên bảng rộng bên trong sẽ
   "chống" cả cột phình quá màn hình → mọi card/hero bị cắt phải.
   Tháo chốt min-width trên chuỗi flex, CHỈ trong trang tài khoản.
   ============================================================ */
body.woocommerce-account #content .row-main > div,
body.woocommerce-account #content .row > .col,
body.woocommerce-account #content .large-12,
body.woocommerce-account #content .col-inner {
  min-width: 0 !important;
  max-width: 100% !important;
}
body.woocommerce-account { overflow-x: hidden; }

/* Chốt an toàn nhiều tầng: khối và nội dung không bao giờ vượt khung */
.adk-shell { max-width: 100% !important; box-sizing: border-box; }
.adk-shell .woocommerce-MyAccount-content { max-width: 100%; }
.adk-shell .woocommerce-MyAccount-content > * { max-width: 100%; }
@media (max-width: 900px) {
  .adk-shell .woocommerce-MyAccount-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  .adk-hero, .adk-card { max-width: 100%; }
}

/* ---- v2.7.5: sửa hồi quy PC (row bị dàn full) + iPad content co hẹp ---- */
@media (max-width: 900px) {
  .adk-shell { align-items: stretch; }
  .adk-shell .woocommerce-MyAccount-content { width: 100% !important; }
}

/* ---- v2.7.6: bảng display:block bị co theo nội dung → ép giãn 100% ---- */
@media (max-width: 900px) {
  .adk-shell .woocommerce-MyAccount-content table {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ---- v2.7.7: bảng "Đơn hàng" mobile thẳng khung với sidebar ---- */
@media (max-width: 900px) {
  .adk-shell .woocommerce-MyAccount-content table,
  .adk-shell .woocommerce-MyAccount-content table.shop_table {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 0 16px 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--adk-line) !important;
    border-radius: 12px;
  }
  .adk-shell .woocommerce-MyAccount-content { overflow-x: hidden; }
}

/* ============================================================
   v2.7.8 — Khung bảng hết "hụt đuôi" trên mobile/tablet
   Flatsome bọc bảng trong .touch-scroll-table (khung cuộn của theme).
   Trước đây viền+bo góc vẽ lên CHÍNH BẢNG (bảng rộng hơn màn hình,
   cuộn được) → mép phải của khung trôi ra ngoài màn hình, nhìn như
   hộp bị ngắn. Giờ: khung viền vẽ lên WRAPPER (đứng yên, full ngang),
   bảng chuẩn cuộn BÊN TRONG khung.
   ============================================================ */
@media (max-width: 900px) {
  .adk-shell .touch-scroll-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 0 0 16px;
    background: #fff;
    border: 1px solid var(--adk-line) !important;
    border-radius: 12px;
  }
  .adk-shell .touch-scroll-table table,
  .adk-shell .touch-scroll-table table.shop_table {
    display: table !important;       /* trả về bảng chuẩn bên trong khung */
    width: auto !important;
    min-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
  }
}