/* Trang tài khoản thành viên - phong cách Apple (System Settings / Apple ID) */
.acc-page{
    --acc-accent:var(--cl-0,#008001);
    --acc-accent-dark:#02690a;
    --acc-accent-soft:rgba(0,128,1,.1);
    --acc-card:#ffffff;
    --acc-border:#e6e6ea;
    --acc-text:#1d1d1f;
    --acc-text-2:#6e6e73;
    --acc-danger:#ff3b30;
    --acc-radius:20px;
    --acc-radius-sm:12px;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--acc-text);
    -webkit-font-smoothing:antialiased;
}
.acc-page *{box-sizing:border-box}
.acc-grid{display:flex;align-items:flex-start;gap:24px}
.acc-side{width:300px;flex:0 0 300px}
.acc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px}

@keyframes accIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* thẻ hồ sơ */
.acc-profile{background:var(--acc-card);border-radius:var(--acc-radius);padding:24px 20px;text-align:center;border:1px solid var(--acc-border);box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 28px rgba(0,0,0,.06);margin-bottom:16px;animation:accIn .5s ease both}
.acc-avatar{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--acc-accent),var(--acc-accent-dark))}
.acc-profile-name{font-size:16px;font-weight:600;letter-spacing:-.01em}
.acc-profile-sub{font-size:13px;color:var(--acc-text-2);margin-top:2px;word-break:break-word}
/* thẻ hạng thành viên / điểm tích lũy - màu theo hạng: thường (xanh lá), Bạc, Vàng */
.acc-loyalty{--lt-c1:var(--acc-accent);--lt-c2:var(--acc-accent-dark);--lt-soft:var(--acc-accent-soft);
    background:linear-gradient(160deg,var(--lt-soft),var(--acc-card) 55%);border-radius:var(--acc-radius);padding:18px;border:1px solid var(--acc-border);box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 28px rgba(0,0,0,.06);margin-bottom:16px;animation:accIn .5s ease .03s both}
.acc-loyalty.is-silver{--lt-c1:#8a94a6;--lt-c2:#5b6475;--lt-soft:rgba(138,148,166,.18)}
.acc-loyalty.is-gold{--lt-c1:#e0a91b;--lt-c2:#b7791f;--lt-soft:rgba(224,169,27,.18)}
.acc-loyalty-top{display:flex;align-items:center;gap:12px}
.acc-loyalty-badge{width:40px;height:40px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;background:linear-gradient(135deg,var(--lt-c1),var(--lt-c2))}
.acc-loyalty-tier{flex:1;min-width:0}
.acc-loyalty-label{font-size:12px;color:var(--acc-text-2)}
.acc-loyalty-name{font-size:15px;font-weight:600;color:var(--lt-c2)}
.acc-loyalty-pill{flex:none;font-size:13px;font-weight:700;color:#fff;background:var(--lt-c1);padding:3px 10px;border-radius:999px}
.acc-loyalty-points{margin-top:14px;font-size:13px;color:var(--acc-text-2)}
.acc-loyalty-points strong{font-size:26px;font-weight:700;color:var(--acc-text);letter-spacing:-.02em;margin-right:4px}
.acc-loyalty-bar{height:8px;border-radius:4px;background:rgba(0,0,0,.07);overflow:hidden;margin-top:10px}
.acc-loyalty-bar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--lt-c1),var(--lt-c2))}
.acc-loyalty-note{font-size:13px;color:var(--acc-text-2);margin-top:8px;line-height:1.45}
.acc-loyalty-note b{color:var(--acc-text);font-weight:600}
.acc-loyalty-rule{font-size:12px;color:var(--acc-text-2);margin-top:12px;padding-top:10px;border-top:1px dashed var(--acc-border)}
.acc-loyalty-rule i{margin-right:4px;opacity:.7}

/* menu điều hướng */
.acc-nav{background:var(--acc-card);border-radius:var(--acc-radius);padding:8px;border:1px solid var(--acc-border);box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 28px rgba(0,0,0,.06);animation:accIn .5s ease .05s both}
.acc-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--acc-text);text-decoration:none;font-size:14px;font-weight:500;transition:background .15s ease,color .15s ease}
.acc-nav a:hover{background:#f2f2f4;color:var(--acc-text)}
.acc-nav a.is-active{background:var(--acc-accent-soft);color:var(--acc-accent-dark)}
.acc-nav a .acc-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex:none}
.acc-nav a.is-danger:hover{background:rgba(255,59,48,.08);color:var(--acc-danger)}
.acc-ic.blue{background:linear-gradient(135deg,#0a84ff,#0060df)}
.acc-ic.orange{background:linear-gradient(135deg,#ff9f0a,#e07c00)}
.acc-ic.red{background:linear-gradient(135deg,#ff453a,#d70015)}
.acc-ic.teal{background:linear-gradient(135deg,#30d0c0,#0a9b8f)}
.acc-ic.gray{background:linear-gradient(135deg,#8e8e93,#636366)}
.acc-nav-divider{height:1px;background:var(--acc-border);margin:6px 4px}

/* thẻ nội dung */
.acc-card{background:var(--acc-card);border-radius:var(--acc-radius);padding:28px;border:1px solid var(--acc-border);box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 28px rgba(0,0,0,.06);animation:accIn .5s ease .1s both}
.acc-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.acc-desc{font-size:14px;color:var(--acc-text-2);margin:0 0 22px}

.acc-alert{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;font-size:14px;font-weight:500;margin-bottom:20px;animation:accIn .35s ease both}
.acc-alert i{font-size:15px}
.acc-alert.success{background:rgba(52,199,89,.12);color:#1b7a34}
.acc-alert.error{background:rgba(255,59,48,.1);color:#c8271f}

/* trường dữ liệu dạng Apple ID */
.acc-field{padding:14px 0;display:flex;flex-direction:column;gap:6px}
.acc-field:first-child{padding-top:0}
.acc-field-row{display:flex;gap:16px}
.acc-field-row .acc-field{flex:1;min-width:0}
.acc-field-row:first-child .acc-field{padding-top:0}
.acc-field label{font-size:12.5px;font-weight:600;color:var(--acc-text-2);text-transform:uppercase;letter-spacing:.03em}
.acc-input-wrap{position:relative}
.acc-field input,.acc-field select{width:100%;border:1px solid var(--acc-border);border-radius:var(--acc-radius-sm);padding:11px 14px;font-size:14px;color:var(--acc-text);background:#fbfbfc;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;font-family:inherit}
.acc-field .acc-input-wrap input{padding-right:42px}
.acc-field input:focus,.acc-field select:focus{outline:none;border-color:var(--acc-accent);box-shadow:0 0 0 4px var(--acc-accent-soft);background:#fff}
.acc-field input[readonly],.acc-field select:disabled{color:var(--acc-text-2);background:#f2f2f4;cursor:not-allowed}
form.was-validated .acc-field input:invalid{border-color:var(--acc-danger)}
.acc-hint{font-size:12.5px;color:var(--acc-text-2)}
.acc-hint.error{color:var(--acc-danger)}

.acc-toggle{position:absolute;right:6px;top:0;bottom:0;border:none;background:none;color:var(--acc-text-2);cursor:pointer;padding:0 10px;font-size:14px}

/* select2 (tỉnh/thành, phường/xã có tìm kiếm) - phối theo phong cách Apple */
.acc-field .select2-container{width:100%!important;font-family:inherit}
.acc-field .select2-container--default .select2-selection--single{height:44px;border:1px solid var(--acc-border);border-radius:var(--acc-radius-sm);background:#fbfbfc;display:flex;align-items:center;padding:0 14px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.acc-field .select2-container--default .select2-selection--single .select2-selection__rendered{padding:0;font-size:14px;color:var(--acc-text);line-height:normal}
.acc-field .select2-container--default .select2-selection--single .select2-selection__placeholder{color:#8e8e93}
.acc-field .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px;right:10px}
.acc-field .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--acc-accent);box-shadow:0 0 0 4px var(--acc-accent-soft);background:#fff}
.acc-field .select2-container--default.select2-container--disabled .select2-selection--single{background:#f2f2f4;color:var(--acc-text-2);cursor:not-allowed}
.acc-field .select2-dropdown{border:1px solid var(--acc-border);border-radius:var(--acc-radius-sm);overflow:hidden;font-family:inherit}
.acc-field .select2-search--dropdown{padding:8px}
.acc-field .select2-search--dropdown .select2-search__field{border:1px solid var(--acc-border);border-radius:8px;padding:8px 10px;font-size:14px;font-family:inherit;outline:none}
.acc-field .select2-results__option{font-size:14px;padding:8px 14px}
.acc-field .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--acc-accent);color:#fff}
.acc-field .select2-results__option[aria-selected=true]{background:var(--acc-accent-soft);color:var(--acc-accent-dark)}

.acc-actions{display:flex;justify-content:flex-end;margin-top:24px}
.acc-btn{appearance:none;border:none;border-radius:980px;padding:11px 26px;font-size:14px;font-weight:600;cursor:pointer;background:var(--acc-accent);color:#fff;transition:transform .12s ease,background .15s ease,opacity .15s ease;font-family:inherit}
.acc-btn:hover{background:var(--acc-accent-dark)}
.acc-btn:active{transform:scale(.97)}
.acc-btn:disabled{opacity:.4;cursor:not-allowed}

/* checklist yêu cầu mật khẩu */
.acc-rules{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.acc-rules li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--acc-text-2);transition:color .15s ease}
.acc-rules li i{width:16px;font-size:13px;color:#c7c7cc;transition:color .15s ease,transform .15s ease}
.acc-rules li.ok{color:#1b7a34}
.acc-rules li.ok i{color:#34c759;transform:scale(1.1)}

/* danh sách đơn hàng */
.acc-orders{display:flex;flex-direction:column;gap:12px}
.acc-order{display:flex;flex-direction:column;border:1px solid var(--acc-border);border-radius:16px;overflow:hidden;transition:box-shadow .15s ease,border-color .15s ease}
.acc-order:hover{border-color:#d0d0d5;box-shadow:0 4px 16px rgba(0,0,0,.05)}
.acc-order-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;background:#fafafa;border-bottom:1px solid var(--acc-border)}
.acc-order-code{font-weight:600;font-size:14px}
.acc-order-pay{font-size:12.5px;color:var(--acc-text-2)}
.acc-order-date{font-size:12.5px;color:var(--acc-text-2);margin-left:auto}
.acc-order-items{display:flex;flex-direction:column}
.acc-order-item{display:flex;align-items:center;gap:12px;padding:14px 16px}
.acc-order-item+.acc-order-item{border-top:1px solid var(--acc-border)}
.acc-order-item-thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:#f2f2f4}
.acc-order-item-info{flex:1;min-width:0}
.acc-order-item-name{font-size:14px;color:var(--acc-text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acc-order-item-variant{font-size:12.5px;color:var(--acc-text-2);margin-top:3px}
.acc-order-item-qty{font-size:12.5px;color:var(--acc-text-2);margin-top:3px}
.acc-order-item-price{flex:none;text-align:right;font-size:13px;white-space:nowrap}
.acc-order-item-price .old{color:var(--acc-text-2);text-decoration:line-through;margin-right:6px;font-size:12px}
.acc-order-item-price .new{color:var(--acc-danger);font-weight:600}
.acc-order-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px;padding:12px 16px;background:#fafafa;border-top:1px solid var(--acc-border)}
.acc-order-total{font-size:13.5px;color:var(--acc-text)}
.acc-order-total strong{color:var(--acc-danger);font-size:16px;margin-left:6px}
.acc-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:980px;font-size:12.5px;font-weight:600;background:#f2f2f4;color:var(--acc-text-2);white-space:nowrap}
.acc-badge.success{background:rgba(52,199,89,.12);color:#1b7a34}
.acc-badge.warning{background:rgba(255,159,10,.15);color:#b06000}
.acc-badge.danger{background:rgba(255,59,48,.1);color:#c8271f}
.acc-badge.info{background:rgba(10,132,255,.1);color:#0060df}
.acc-badge.primary{background:var(--acc-accent-soft);color:var(--acc-accent-dark)}
.acc-link-btn{appearance:none;background:none;cursor:pointer;font-family:inherit;border:1px solid var(--acc-border);border-radius:980px;padding:8px 18px;font-size:13px;font-weight:600;color:var(--acc-text);text-decoration:none;transition:background .15s ease;white-space:nowrap}

/* trang chi tiết đơn hàng */
.acc-order-detail-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--acc-text-2);text-decoration:none;margin-bottom:16px}
.acc-order-detail-back:hover{color:var(--acc-text)}
.acc-order-detail-status{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.acc-order-detail-status .acc-order-date{margin-left:auto}
.acc-order-detail-section{font-size:13px;font-weight:700;color:var(--acc-text-2);text-transform:uppercase;letter-spacing:.03em;margin:24px 0 10px}
.acc-order-detail-section:first-of-type{margin-top:0}
.acc-order-detail-address{font-size:14px;color:var(--acc-text);line-height:1.6}
.acc-order-detail-summary{margin-top:16px;padding-top:12px;border-top:1px solid var(--acc-border);display:flex;flex-direction:column;gap:6px;max-width:320px;margin-left:auto}
.acc-order-detail-summary>div{display:flex;justify-content:space-between;font-size:13.5px;color:var(--acc-text-2)}
.acc-order-detail-summary-total{font-size:15px!important;color:var(--acc-text)!important;font-weight:700;margin-top:4px}
.acc-order-detail-summary-total span:last-child{color:var(--acc-danger)}
.acc-link-btn:hover{background:#f2f2f4;color:var(--acc-text)}
.acc-empty{text-align:center;padding:48px 20px;color:var(--acc-text-2)}
.acc-empty i{font-size:32px;margin-bottom:12px;display:block;color:#c7c7cc}

/* địa chỉ giao hàng */
.acc-address-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.acc-address-card{padding:16px;border:1px solid var(--acc-border);border-radius:16px;transition:box-shadow .15s ease,border-color .15s ease}
.acc-address-card:hover{border-color:#d0d0d5;box-shadow:0 4px 16px rgba(0,0,0,.05)}
.acc-address-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.acc-address-name{font-weight:600;font-size:14px}
.acc-address-text{font-size:13.5px;color:var(--acc-text-2);line-height:1.5}
.acc-address-phone{font-size:13px;color:var(--acc-text-2);margin-top:2px}
.acc-address-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.acc-address-actions button{appearance:none;background:none;border:1px solid var(--acc-border);border-radius:980px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--acc-text);font-family:inherit;transition:background .15s ease}
.acc-address-actions button:hover{background:#f2f2f4}
.acc-address-actions button.danger{color:var(--acc-danger);border-color:rgba(255,59,48,.3)}
.acc-address-actions button.danger:hover{background:rgba(255,59,48,.08)}

.acc-add-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border:1.5px dashed var(--acc-border);border-radius:16px;background:none;color:var(--acc-accent-dark);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s ease,border-color .15s ease}
.acc-add-toggle:hover{background:var(--acc-accent-soft);border-color:var(--acc-accent)}

.acc-checkbox{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--acc-text);cursor:pointer}
.acc-checkbox input{width:16px;height:16px;accent-color:var(--acc-accent);cursor:pointer}

@media(max-width:576px){
    .acc-grid{gap:16px}
    .acc-field-row{flex-direction:column;gap:0}
    .acc-field-row .acc-field{padding-top:14px}
    /* Bỏ khung thẻ nội dung + khung sidebar (hồ sơ, menu) trên mobile — viền/bo
       góc/đổ bóng/padding — để nội dung dùng gần hết chiều ngang; các thẻ mục con
       (đơn hàng/địa chỉ) bên trong vẫn giữ viền riêng để phân tách. */
    .acc-card,.acc-nav{padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
    /* hồ sơ: thu gọn thành hàng ngang (avatar trái, tên/sđt phải) cho đỡ chiếm chỗ */
    .acc-profile{padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;margin-bottom:4px;display:flex;align-items:center;gap:12px;text-align:left}
    .acc-avatar{margin:0;width:48px;height:48px;font-size:20px;flex:none}
    .acc-nav a{padding-left:10px;padding-right:10px}
    .acc-title{font-size:20px}
    .acc-desc{margin-bottom:18px}
    .acc-address-card{padding:14px 12px}
    .acc-address-actions{gap:8px}
}
@media(max-width:400px){
    .acc-address-card{padding:12px 10px}
}
@media(max-width:993px){
    .acc-grid{flex-direction:column}
    .acc-side{width:100%;flex:none}
    .acc-order-date{margin-left:0;width:100%}
    .acc-order-item{align-items:flex-start}
    .acc-order-item-price{text-align:right}
}