/* ==========================================================

   ROYAL ACCOUNT V3 - PHẤN NỤ HOÀNG CUNG

   Typography: SFU Futura

   ========================================================== */



:root {

    --royal-red: #5B1E1E;

    --royal-jade: #163A33; /* Giữ lại phòng hờ nếu cần ở element khác */

    --royal-gold: #D4A94D;

    --royal-beige: #F3E6C7;

    --royal-ink: #2B1A12;

    --royal-font: 'SFU Futura', sans-serif;

    

    --royal-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);

    --royal-glow: 0 0 15px rgba(212, 169, 77, 0.4);

    --royal-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

}



/* --- Base Wrapper --- */

.royal-account-wrapper {

    font-family: var(--royal-font);

    

    color: var(--royal-ink);

    padding: 10px 20px; /* Đã giảm từ 40px xuống 10px để xích lên trên */

    min-height: auto;

}



.royal-account-shell {

    display: grid;

    grid-template-columns: 1fr;

    gap: 30px;

    max-width: 1280px;

    margin: 0 auto;

    padding-top: 0; /* Đã bỏ padding thừa */

}



@media (min-width: 992px) {

    .royal-account-shell {

        grid-template-columns: 280px 1fr; /* Layout 2 cột ngang ngang chuẩn xác */

        align-items: start;

    }

}



/* --- BÌNH PHONG (Sidebar) --- */

.royal-account-sidebar {

    background-color: var(--royal-red);

    border: 2px solid var(--royal-gold);

    border-radius: 8px;

    padding: 30px 0;

    box-shadow: var(--royal-shadow);

    

    /* Thuộc tính giữ cố định thanh bên */

    position: sticky;

    

    /* Đã kéo lên 100px */

    top: 120px; 

    

    z-index: 10; /* Đảm bảo nó hiển thị đúng lớp */

}



.royal-nav-menu {

    list-style: none;

    margin: 0;

    padding: 0;

}



.royal-nav-menu li {

    margin: 0;

}



.royal-nav-menu a {

    display: block;

    padding: 16px 30px;

    color: var(--royal-beige);

    text-decoration: none;

    font-size: 1.1rem;

    border-left: 4px solid transparent;

    transition: var(--royal-transition);

}



.royal-nav-menu li.is-active a,

.royal-nav-menu a:hover {

    background-color: rgba(212, 169, 77, 0.15);

    color: var(--royal-gold);

    border-left-color: var(--royal-gold);

    text-shadow: 0 0 8px rgba(212, 169, 77, 0.3);

}



/* --- NGỰ ÁN (Main Content) --- */

.royal-account-content {

    background-color: transparent;

    animation: royalFadeIn 0.5s ease-out;

}



/* Khung Chân Dung (Profile Badge) */

.royal-profile-hero {

    background-color: var(--royal-red);

    border: 1px solid var(--royal-gold);

    border-radius: 12px;

    padding: 40px;

    text-align: center;

    color: var(--royal-beige);

    margin-bottom: 30px;

    box-shadow: var(--royal-shadow);

    position: relative;

    overflow: hidden;

}



.royal-avatar-frame {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    border: 4px solid var(--royal-jade);

    box-shadow: 0 0 0 2px var(--royal-gold), inset 0 0 10px rgba(0,0,0,0.5);

    margin: 0 auto 20px;

    background-color: var(--royal-beige);

}



.royal-rank {

    color: var(--royal-gold);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 0.9rem;

}



/* Các Card (Panel nội dung) */

.royal-panel {

    background-color: #FFFFFF; /* NỀN TRẮNG SỮA ĐỂ NỔI BẬT */

    border: 1px solid rgba(212, 169, 77, 0.5); /* Viền vàng hoàng gia */

    border-radius: 8px;

    padding: 24px; /* Đã giảm từ 30px xuống 24px */

    margin-bottom: 24px;

    box-shadow: 0 4px 24px rgba(43, 26, 18, 0.06); /* Bóng đổ mềm hơn */



    /* --- CỐ ĐỊNH PHẦN NỘI DUNG CHÍNH --- */

    position: sticky;

    top: 100px; /* Đã kéo lên 100px */

    scroll-margin-top: 100px; 

}



.royal-panel-title {

    color: var(--royal-red);

    font-size: 1.5rem;

    border-bottom: 1px solid rgba(212, 169, 77, 0.3); /* Đồng bộ viền dưới mờ hơn chút */

    padding-bottom: 12px;

    margin-bottom: 24px;

}



/* --- ĐƠN HÀNG (Cuộn Thư) --- */

.royal-order-card {

    background: #fffdf5; /* Nền giấy sáng hơn chút */

    border: 1px solid var(--royal-gold);

    border-radius: 4px;

    padding: 20px;

    margin-bottom: 16px;

    position: relative;

    transition: var(--royal-transition);

}



.royal-order-card:hover {

    box-shadow: var(--royal-glow);

    transform: translateY(-2px);

}



/* Timeline đơn giản */

.royal-timeline {

    display: flex;

    justify-content: space-between;

    margin: 20px 0;

    position: relative;

}

.royal-timeline::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    height: 2px;

    background: #ddd;

    z-index: 1;

}

.royal-step {

    background: #fffdf5;

    padding: 0 10px;

    z-index: 2;

    color: var(--royal-ink);

    font-size: 0.85rem;

    font-weight: bold;

}

.royal-step.active {

    color: var(--royal-red);

}



/* --- KHO ĐÀI (Vouchers) --- */

.royal-voucher-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    gap: 20px;

}



.royal-voucher-card {

    background: linear-gradient(135deg, var(--royal-red), #3a1111);

    border: 1px dashed var(--royal-gold);

    padding: 20px;

    color: var(--royal-beige);

    text-align: center;

    border-radius: 8px;

    cursor: pointer;

    transition: var(--royal-transition);

}



.royal-voucher-card:hover {

    box-shadow: var(--royal-glow);

}



.royal-voucher-title {

    color: var(--royal-gold);

    font-size: 1.2rem;

    margin-bottom: 10px;

}



.royal-btn-gold {

    background-color: var(--royal-gold);

    color: var(--royal-red);

    border: none;

    padding: 8px 20px;

    font-family: var(--royal-font);

    font-weight: bold;

    cursor: pointer;

    border-radius: 4px;

}



@keyframes royalFadeIn {

    from { opacity: 0; transform: translateY(10px); }

    to { opacity: 1; transform: translateY(0); }

}





/* --- ẨN THANH CUỘN (SCROLLBAR) TOÀN TRANG --- */

::-webkit-scrollbar {

    width: 0px;

    background: transparent;

}



html {

    scrollbar-width: none;

    -ms-overflow-style: none;

}







/* ==========================================================

   GIAO DIỆN TAB ĐƠN HÀNG (CUỘN THƯ & XE NGỰA)

   ========================================================== */



/* Thẻ Cuộn Thư (Order Card) */

.royal-order-scroll {

    background-color: #FFFDF5; /* Màu giấy điệp ngà ngà */

    border: 1px solid var(--royal-gold);

    border-radius: 6px;

    padding: 24px;

    margin-bottom: 24px;

    position: relative;

    box-shadow: 0 4px 15px rgba(43, 26, 18, 0.05);

    transition: var(--royal-transition);

}



.royal-order-scroll:hover {

    box-shadow: 0 8px 25px rgba(212, 169, 77, 0.15); /* Sáng viền vàng khi hover */

    transform: translateY(-2px);

}



/* Header Cuộn Thư */

.royal-order-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    border-bottom: 1px dashed rgba(212, 169, 77, 0.4);

    padding-bottom: 16px;

    margin-bottom: 24px;

}



.royal-order-id {

    font-size: 1.25rem;

    color: var(--royal-red);

    margin: 0 0 4px 0;

}



.royal-order-date, .royal-total-label {

    font-size: 0.9rem;

    color: var(--royal-text-muted);

}



.royal-total-value {

    display: block;

    font-size: 1.15rem;

    color: var(--royal-ink);

    margin-top: 4px;

}



/* --- THANH TIẾN TRÌNH XE NGỰA (IMPERIAL TIMELINE) --- */

.royal-imperial-timeline {

    margin: 30px 0 40px 0;

    position: relative;

}



.royal-timeline-track {

    position: relative;

    height: 4px;

    background-color: #E8E0D0; /* Màu rãnh chưa đi tới */

    border-radius: 4px;

    margin: 0 20px; /* Thụt lề để canh giữa các điểm mốc */

}



/* Rãnh đã đi qua (Màu vàng kim) */

.royal-timeline-progress {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    background-color: var(--royal-gold);

    border-radius: 4px;

    transition: width 1s ease-in-out;

}



/* Icon Xe Ngựa (Hiệu ứng nhấp nhô) */

.royal-carriage-indicator {

    position: absolute;

    top: -15px; /* Kéo lên trên thanh ngang */

    transform: translateX(-50%); /* Căn giữa đúng điểm */

    transition: left 1s ease-in-out;

    z-index: 5;

    /* Hiệu ứng xe ngựa đang đi */

    animation: carriageBounce 2s infinite ease-in-out;

}



@keyframes carriageBounce {

    0%, 100% { transform: translateX(-50%) translateY(0); }

    50% { transform: translateX(-50%) translateY(-3px); }

}



.royal-carriage-icon {

    font-size: 24px;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));

}



/* Các điểm mốc */

.royal-timeline-milestones {

    display: flex;

    justify-content: space-between;

    margin-top: -10px; /* Kéo dot lên đè vào thanh track */

    position: relative;

    z-index: 2;

}



.royal-milestone {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 80px;

}



.royal-milestone-dot {

    width: 16px;

    height: 16px;

    background-color: #FFFDF5;

    border: 3px solid #E8E0D0;

    border-radius: 50%;

    margin-bottom: 8px;

    transition: var(--royal-transition);

}



.royal-milestone.is-reached .royal-milestone-dot {

    border-color: var(--royal-gold);

    background-color: var(--royal-red); /* Điểm đã qua sáng màu đỏ */

    box-shadow: 0 0 10px rgba(212, 169, 77, 0.5);

}



.royal-milestone-label {

    font-size: 0.85rem;

    color: #999;

    font-weight: 500;

}



.royal-milestone.is-reached .royal-milestone-label {

    color: var(--royal-red);

    font-weight: bold;

}



/* --- FOOTER & NÚT BẤM --- */

.royal-order-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

}



.royal-order-status-badge {

    font-size: 0.85rem;

    padding: 4px 12px;

    border-radius: 20px;

    background-color: #eee;

    color: #333;

}



/* Các màu trạng thái */

.royal-order-status-badge.completed { background: rgba(22, 58, 51, 0.1); color: var(--royal-jade); }

.royal-order-status-badge.processing { background: rgba(212, 169, 77, 0.15); color: #8A6D3B; }

.royal-order-status-badge.pending { background: rgba(91, 30, 30, 0.1); color: var(--royal-red); }



/* --- ACCORDION CHI TIẾT (MỞ TRÁP) --- */

.royal-order-details-panel {

    border-top: 1px solid rgba(212, 169, 77, 0.3);

    margin-top: 20px;

    padding-top: 20px;

    /* CSS cho JS animation */

    overflow: hidden;

    max-height: 0;

    opacity: 0;

    transition: max-height 0.4s ease, opacity 0.4s ease;

}



.royal-order-details-panel.is-open {

    max-height: 1000px; /* Đủ lớn để hiện nội dung */

    opacity: 1;

}



.royal-trap-inner {

    background: #FFF;

    padding: 20px;

    border-radius: 4px;

    border: 1px dashed #E8E0D0;

}



.royal-trap-title {

    margin: 0 0 15px 0;

    color: var(--royal-red);

    font-size: 1.1rem;

}



.royal-trap-items {

    list-style: none;

    padding: 0;

    margin: 0 0 15px 0;

}



.royal-trap-items li {

    display: flex;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid #f0f0f0;

    font-size: 0.95rem;

}



.royal-trap-items li:last-child {

    border-bottom: none;

}



.royal-text-link {

    color: var(--royal-gold);

    text-decoration: underline;

    font-size: 0.9rem;

}





/* ==========================================================

   GIAO DIỆN LỆNH BÀI THÂN PHẬN (DASHBOARD)

   ========================================================== */



/* Ép Panel hiển thị dạng cột lấp đầy chiều cao */

.royal-dashboard-panel {

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 30px;

    /* Loại bỏ padding-bottom thừa nếu có để không sinh scrollbar */

}



/* 1. THƯỢNG TẦNG: LỆNH BÀI (Plaque) */

.royal-plaque-card {

    display: flex;

    align-items: center;

    gap: 24px;

    background: linear-gradient(135deg, var(--royal-red) 0%, #3a1111 100%);

    border: 1px solid var(--royal-gold);

    border-radius: 12px;

    padding: 30px;

    color: var(--royal-beige);

    box-shadow: 0 10px 30px rgba(91, 30, 30, 0.2);

}



.royal-plaque-avatar {

    width: 80px;

    height: 80px;

    background-color: var(--royal-beige);

    color: var(--royal-red);

    border: 3px solid var(--royal-gold);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    font-weight: bold;

    font-family: serif;

    flex-shrink: 0;

}



.royal-plaque-info {

    flex-grow: 1;

}



.royal-greeting {

    font-size: 0.9rem;

    color: var(--royal-gold);

    text-transform: uppercase;

    letter-spacing: 1px;

}



.royal-user-name {

    font-size: 1.8rem;

    margin: 4px 0 8px 0;

    color: #fff;

}



.royal-rank-badge {

    display: inline-block;

    background: rgba(212, 169, 77, 0.2);

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 0.85rem;

    color: var(--royal-gold);

    margin-bottom: 12px;

    border: 1px solid rgba(212, 169, 77, 0.4);

}



.royal-progress-bar {

    height: 4px;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 2px;

    margin-bottom: 6px;

    overflow: hidden;

}



.royal-progress-fill {

    height: 100%;

    background: var(--royal-gold);

    box-shadow: 0 0 10px var(--royal-gold);

}



.royal-progress-text {

    font-size: 0.8rem;

    color: rgba(243, 230, 199, 0.7);

}



/* 2. TRUNG TẦNG: BẢO KHỐ (Stats Grid) */

.royal-stats-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}



.royal-stat-box {

    display: flex;

    align-items: center;

    gap: 16px;

    background: #fffdf5;

    border: 1px solid rgba(212, 169, 77, 0.3);

    padding: 20px;

    border-radius: 8px;

    transition: var(--royal-transition);

}



.royal-stat-link {

    text-decoration: none;

    color: inherit;

    cursor: pointer;

}



.royal-stat-link:hover {

    border-color: var(--royal-gold);

    box-shadow: var(--royal-glow);

    transform: translateY(-2px);

}



.royal-stat-icon {

    font-size: 2rem;

    opacity: 0.8;

}



.royal-stat-data {

    display: flex;

    flex-direction: column;

}



.royal-stat-title {

    font-size: 0.85rem;

    color: var(--royal-text-muted);

}



.royal-stat-number {

    font-size: 1.4rem;

    color: var(--royal-red);

}



/* 3. HẠ TẦNG: LỐI TẮT (Quick Actions) */

.royal-quick-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-top: auto; /* Đẩy khối này xuống dưới cùng nếu panel còn khoảng trống */

}



.royal-action-card {

    display: flex;

    flex-direction: column;

    padding: 16px 20px;

    background: #ffffff;

    border: 1px dashed rgba(43, 26, 18, 0.15);

    border-radius: 8px;

    text-decoration: none;

    position: relative;

    transition: var(--royal-transition);

}



.royal-action-card:hover {

    background: rgba(212, 169, 77, 0.05);

    border-color: var(--royal-gold);

}



.royal-action-title {

    font-size: 1.05rem;

    color: var(--royal-ink);

    font-weight: bold;

    margin-bottom: 4px;

}



.royal-action-desc {

    font-size: 0.85rem;

    color: var(--royal-text-muted);

}



.royal-action-arrow {

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 1.2rem;

    color: var(--royal-gold);

    opacity: 0;

    transition: var(--royal-transition);

}



.royal-action-card:hover .royal-action-arrow {

    opacity: 1;

    right: 15px; /* Hiệu ứng mũi tên lướt nhẹ sang phải */

}



/* Mobile Responsive */

@media (max-width: 768px) {

    .royal-stats-grid {

        grid-template-columns: 1fr;

    }

    .royal-quick-actions {

        grid-template-columns: 1fr;

    }

    /* Trên mobile thì việc cuộn là bắt buộc vì màn hình nhỏ */

}





/* ==========================================================

   TAB KHO ĐÀI & BỔNG LỘC (VOUCHERS / KIM PHIẾU)

   ========================================================== */



/* Bộ lọc (Tabs) */

.royal-reward-filters {

    display: flex;

    gap: 10px;

    margin-bottom: 30px;

    border-bottom: 2px solid rgba(212, 169, 77, 0.2);

    padding-bottom: 10px;

}



.royal-filter-btn {

    background: transparent;

    border: none;

    color: var(--royal-text-muted);

    font-size: 1.05rem;

    font-family: var(--royal-font);

    font-weight: 500;

    padding: 8px 16px;

    cursor: pointer;

    position: relative;

    transition: var(--royal-transition);

}



.royal-filter-btn:hover {

    color: var(--royal-red);

}



.royal-filter-btn.is-active {

    color: var(--royal-red);

    font-weight: bold;

}



.royal-filter-btn.is-active::after {

    content: '';

    position: absolute;

    bottom: -12px;

    left: 0;

    width: 100%;

    height: 3px;

    background-color: var(--royal-gold);

    border-radius: 3px 3px 0 0;

}



/* --- Lưới hiển thị Kim Phiếu --- */

.royal-voucher-grid {

    display: grid;

    grid-template-columns: 1fr; /* Mặc định 1 cột để code ticket trải dài */

    gap: 24px;

}



@media (min-width: 1200px) {

    .royal-voucher-grid {

        grid-template-columns: 1fr 1fr; /* Màn hình lớn chia 2 cột */

    }

}



/* --- Thiết kế Kim Phiếu (Ticket Card) --- */

.royal-ticket {

    display: flex;

    background: #fffdf5; /* Nền giấy điệp */

    border: 1px solid var(--royal-gold);

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0,0,0,0.04);

    transition: var(--royal-transition);

    position: relative;

}



.royal-ticket:hover {

    box-shadow: var(--royal-glow);

    transform: translateY(-2px);

}



/* Nửa trái: Phần Con Dấu / Giá Trị */

.royal-ticket__stamp {

    flex-shrink: 0;

    width: 130px;

    background: linear-gradient(135deg, var(--royal-red) 0%, #3a1111 100%);

    color: var(--royal-gold);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px 10px;

    border-right: 2px dashed rgba(212, 169, 77, 0.6); /* Đường đứt nét xé coupon */

    position: relative;

}



/* Hai nửa hình tròn cắt góc (Ticket cutout effect) */

.royal-ticket__stamp::before,

.royal-ticket__stamp::after {

    content: '';

    position: absolute;

    right: -8px;

    width: 16px;

    height: 16px;

    background-color: #FFFFFF; /* Khớp với màu nền của Panel */

    border-radius: 50%;

    border-left: 1px solid var(--royal-gold);

    z-index: 2;

}



.royal-ticket__stamp::before { top: -9px; border-bottom: 1px solid var(--royal-gold); border-left: none; transform: rotate(45deg); }

.royal-ticket__stamp::after { bottom: -9px; border-top: 1px solid var(--royal-gold); border-left: none; transform: rotate(-45deg); }





.royal-ticket__badge {

    background: rgba(212, 169, 77, 0.2);

    border: 1px solid var(--royal-gold);

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;

}



.royal-ticket__value {

    font-size: 2rem;

    line-height: 1;

    margin-bottom: 4px;

    color: #fff;

}



.royal-ticket__type {

    font-size: 0.85rem;

    opacity: 0.8;

}



/* Nửa phải: Nội dung chi tiết */

.royal-ticket__content {

    flex-grow: 1;

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.royal-ticket__title {

    color: var(--royal-red);

    font-size: 1.15rem;

    margin: 0 0 8px 0;

}



.royal-ticket__desc {

    color: var(--royal-text-muted);

    font-size: 0.9rem;

    margin: 0 0 16px 0;

    line-height: 1.4;

}



.royal-ticket__footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: auto;

}



.royal-ticket__date {

    font-size: 0.85rem;

    color: #8A6D3B;

    font-weight: 500;

}



/* Trạng thái Disable (Lịch sử/Đã dùng) */

.royal-ticket.is-disabled {

    filter: grayscale(1);

    opacity: 0.6;

}

.royal-ticket.is-disabled:hover {

    box-shadow: none;

    transform: none;

}







/* ==========================================================

   TAB ĐỊA CHỈ (HỒ SƠ PHỦ ĐỆ - CONCEPT LỆNH BÀI)

   ========================================================== */



/* Thêm class này để ép lại mô tả nếu cần */

.royal-address-desc {

    margin-bottom: 20px !important; 

}



/* Sử dụng Flexbox để tự động co giãn thẻ */

.royal-address-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

}



/* Thẻ bọc ngoài (Viền solid vàng) */

.royal-address-card {

    flex: 1 1 400px; /* Tự động giãn đầy màn hình nếu chỉ có 1 thẻ */

    max-width: 100%;

    background: #fffdf5; 

    border: 1px solid var(--royal-gold);

    border-radius: 8px;

    padding: 6px; /* Khoảng cách để lộ viền đứt nét bên trong */

    box-shadow: 0 4px 15px rgba(43, 26, 18, 0.05);

    transition: var(--royal-transition);

}



.royal-address-card:hover {

    box-shadow: var(--royal-glow);

    transform: translateY(-3px);

}



/* Khung bên trong (Viền đứt nét) */

.royal-address-card-inner {

    border: 1px dashed rgba(212, 169, 77, 0.6);

    border-radius: 4px;

    padding: 20px 24px; /* Đã giảm từ 35px để ép nhỏ thẻ lại */

    height: 100%;

    display: flex;

    flex-direction: column;

    position: relative;

    background-image: radial-gradient(circle at center, rgba(212, 169, 77, 0.02) 0%, transparent 70%);

}



/* Header Thẻ */

.royal-address-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px dashed rgba(212, 169, 77, 0.5);

    padding-bottom: 12px; /* Đã giảm để gọn hơn */

    margin-bottom: 16px; /* Đã giảm để gọn hơn */

    flex-wrap: wrap; /* Tránh text bị ép khi màn hình nhỏ */

    gap: 12px;

}



.royal-address-title-group {

    display: flex;

    align-items: center;

    gap: 10px;

}



.royal-address-icon {

    font-size: 1.4rem;

    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));

}



.royal-address-title {

    font-size: 1.3rem;

    color: var(--royal-red);

    margin: 0;

    font-weight: bold;

}



/* Con Dấu "Ngự Dụng" */

.royal-address-badge {

    background: var(--royal-red);

    color: #fffdf5;

    font-size: 0.75rem;

    padding: 6px 14px;

    border-radius: 20px;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow: 0 2px 5px rgba(91, 30, 30, 0.3);

    white-space: nowrap;

}



/* Nội dung Địa chỉ */

.royal-address-content {

    font-style: normal;

    line-height: 1.6; /* Đã giảm từ 2.2 xuống 1.6 để các dòng xích lại gần nhau */

    color: var(--royal-ink);

    font-size: 1.05rem;

    flex-grow: 1;

    margin-bottom: 20px; /* Đã giảm khoảng trống phía dưới */

}



/* Làm nổi bật Tên chủ phủ (Dòng đầu tiên) */

.royal-address-content::first-line {

    font-size: 1.4rem;

    font-weight: bold;

    color: var(--royal-red);

    letter-spacing: 0.5px;

}



.royal-address-empty {

    color: #999;

    font-style: italic;

}



/* Nút Tu chỉnh (Nằm dưới cùng) */

.royal-address-footer {

    margin-top: auto;

    text-align: right; 

}



/* Ép style để chống lại màu hồng mặc định của theme */

.royal-address-card .royal-btn-gold-outline {

    display: inline-block;

    padding: 10px 24px;

    border: 1px solid var(--royal-gold) !important;

    color: #8A6D3B !important;

    background: transparent !important;

    border-radius: 4px;

    text-decoration: none !important;

    font-size: 1rem;

    font-weight: bold;

    transition: var(--royal-transition);

}



.royal-address-card .royal-btn-gold-outline:hover {

    background: var(--royal-gold) !important;

    color: var(--royal-red) !important;

    box-shadow: 0 4px 10px rgba(212, 169, 77, 0.3);

}





/* ==========================================================

   TAB HỒ SƠ QUÝ NHÂN (CHỈNH SỬA TÀI KHOẢN)

   ========================================================== */



/* Cấu trúc dòng của Form */

.royal-form {

    margin-top: 10px;

}



.royal-form p {

    margin-bottom: 24px;

}



.royal-form-row {

    display: flex;

    gap: 24px;

    flex-wrap: wrap; /* Tránh vỡ layout trên mobile */

}



.royal-form-row .form-row {

    flex: 1;

    min-width: 200px;

}



/* Định dạng Label (Tiêu đề trường nhập) */

.royal-form label {

    display: block;

    font-size: 1.05rem;

    color: var(--royal-red);

    font-weight: 600;

    margin-bottom: 8px;

}



.royal-form label .required {

    color: #D4A94D;

    text-decoration: none;

}



/* Định dạng Ô Nhập Liệu (Inputs) */

.royal-input {

    width: 100%;

    background-color: #fffdf5; /* Giấy điệp */

    border: 1px solid rgba(212, 169, 77, 0.4);

    border-radius: 6px;

    padding: 12px 16px;

    font-family: var(--royal-font);

    font-size: 1rem;

    color: var(--royal-ink);

    transition: var(--royal-transition);

    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);

}



.royal-input:hover {

    border-color: rgba(212, 169, 77, 0.8);

}



.royal-input:focus {

    outline: none;

    border-color: var(--royal-red);

    box-shadow: 0 0 0 3px rgba(91, 30, 30, 0.1);

    background-color: #ffffff;

}



/* Dòng gợi ý nhỏ */

.royal-form-hint {

    display: block;

    font-size: 0.85rem;

    color: #8A6D3B;

    margin-top: 8px;

    font-style: italic;

}



/* --- Khung Bảo Mật (Đổi mật khẩu) --- */

.royal-password-fieldset {

    margin-top: 40px;

    padding: 30px;

    border: 1px dashed var(--royal-gold);

    border-radius: 8px;

    background-image: radial-gradient(circle at center, rgba(212, 169, 77, 0.03) 0%, transparent 100%);

}



.royal-password-legend {

    font-size: 1.25rem;

    color: var(--royal-red);

    font-weight: bold;

    padding: 0 16px;

    margin: 0;

}



.royal-password-fieldset p:last-child {

    margin-bottom: 0;

}



/* Nút Submit */

.royal-form-actions {

    margin-top: 30px;

    text-align: right; /* Đẩy nút qua phải cho sang */

    border-top: 1px solid rgba(212, 169, 77, 0.2);

    padding-top: 24px;

}



/* Cắt bỏ style mặc định của Woo cho nút này */

.woocommerce-Button.button.royal-btn-gold {

    background-color: var(--royal-gold) !important;

    color: var(--royal-red) !important;

    font-size: 1.05rem !important;

    padding: 12px 30px !important;

    border-radius: 6px !important;

    font-weight: bold !important;

    border: none !important;

}



.woocommerce-Button.button.royal-btn-gold:hover {

    background-color: #E5BB5A !important;

    box-shadow: 0 4px 15px rgba(212, 169, 77, 0.4) !important;

}