/*
Theme Name: BatDongSan51
Theme URI: https://azhouse.vn/
Author: AZHouse.vn
Author URI: https://azhouse.vn/
Description: Theme Wordpress bat dong san
Template: flatsome
Version: 1.0.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.az-popup-content .comment-form {
        display: unset!important;
        padding:0px 10px;
    }
/* Chỉ áp cho popup xem thông tin */
#az-contract-info-content .az-row.az-inline {
    gap: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
#az-contract-info-content .az-form-grid-2col {
    padding-top:0px!important;
}
#az-building-tbody tr.just-saved { animation: azFlash 1s ease-in-out 2; }
@keyframes azFlash { 0%{background:#fff8e1;} 50%{background:#f1ecc8;} 100%{background:transparent;} }


.button {
    margin-right:0px!important;
}
/* ===== Popup View: layout sticky + scroll ===== */
.az-task-viewbox{ display:flex; flex-direction:column; height:80vh; }

.az-task-viewbox .az-client-info{
    flex:1 1 auto;
  overflow:auto;
  padding:15px;
}

/* Sections */
.az-detail-section{ margin-bottom:14px; }
.az-detail-section h4{ margin:0 0 8px; font-size:14px; color:#111; font-weight:700; }
/* Bảng 2 cột giống ảnh mẫu */
.az-detail-table{
  display:grid;
  grid-template-columns: 200px 1fr;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
}
.az-detail-table .cell{
  padding:14px 16px;
  font-size:14px;
  color:#111827;
  border-top:1px solid #f3f4f6;
}
 .az-detail-table .cell:nth-child(-n+2){ border-top:0; } /* hàng đầu */
 .az-detail-table .label{
  font-weight:600;
  background:#f9fafb;
  color:#374151;
  border-right:1px solid #e5e7eb;
}
.az-detail-table .value{ background:#fff; }

/* Mobile: xếp nhãn lên trên giá trị */
@media (max-width: 640px){
 .az-detail-table{ grid-template-columns: 1fr; }
.az-detail-table .label{
    border-right:0; border-top:1px solid #f3f4f6;
  }
.az-detail-table .cell:nth-child(-n+2){ border-top:0; }
}

/* Ảnh đính kèm */
.az-attachments{ display:flex; flex-wrap:wrap; gap:8px; }
.az-attachments .az-img{ display:inline-block; width:72px; height:72px; border-radius:8px; overflow:hidden; border:1px solid #eee; }
.az-attachments .az-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== LỊCH SỬ ===== */
.az-history-list,
.v-history { display:flex; flex-direction:column; gap:14px; margin-top:8px; }

.az-history-item{
  display:grid;
  grid-template-columns: 40px 1fr auto;
  align-items:flex-start;
  gap:12px;
}

.az-history-avatar{
  width:40px;height:40px;border-radius:999px;
  background:#f3f4f6;color:#374151;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}

.az-history-content{
  background:#fafafa;border:1px solid #eee;border-radius:10px;
  padding:8px 12px;
}
.az-history-name{ font-weight:600; margin-bottom:2px; }
.az-history-text{ color:#111; }
.az-history-time{
  color:#6b7280; font-size:12px; white-space:nowrap; padding-top:6px;
}
.az-history-empty{ color:#6b7280; font-style:italic; }


/* ===== Chips (badge) dùng cho Status & Source ===== */
.az-chip{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding: 6px 10px; border-radius:999px; font-size:12.5px; line-height:1;
  font-weight:600; border:1px solid transparent;
}

/* ---- Status chips: match 4 stat boxes ---- */
.az-chip--status{} /* hook để cần thì style riêng */

.az-st-booking, .az-st-done{  /* Hẹn khách (xanh lá nhạt) */
  background:#eafbef; color:#166534; border-color:rgba(22,101,52,.25);
}
.az-st-deposit, .az-st-in_progress{  /* Đặt cọc (xanh dương nhạt) */
  background:#e9fafd; color:#0b7285; border-color:rgba(11,114,133,.22);
}
.az-st-contract, .az-st-todo{ /* Ký HĐ (tím nhạt) */
  background:#eeebfa; color:#5b21b6; border-color:rgba(91,33,182,.22);
}
.az-st-failed, .az-st-canceled{   /* Thất bại (đỏ nhạt) */
  background:#fdeaea; color:#b91c1c; border-color:rgba(185,28,28,.25);
}

/* ---- Source chips ---- */
.az-chip--source{} /* hook */

.az-src-website{
  background:#f3f4f6; color:#374151; border-color:rgba(55,65,81,.20);
}
.az-src-facebook{
  background:#eef4ff; color:#0b5ed7; border-color:rgba(11,94,215,.22);
}
.az-src-zalo{
  background:#eef3ff; color:#004cc7; border-color:rgba(0,76,199,.22);
}
.az-src-chotot{
  background:#fff7e5; color:#b75c00; border-color:rgba(183,92,0,.25);
}
.az-src-referral{
  background:#eafbef; color:#15803d; border-color:rgba(21,128,61,.25);
}
.az-src-other{
  background:#f3f4f6; color:#4b5563; border-color:rgba(75,85,99,.22);
}
.az-src-low{background:#ecfeff;border-color:#a5f3fc;color:#0e7490}
.az-src-medium{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.az-src-high{background:#fff7ed;border-color:#fed7aa;color:#c2410c}
.az-src-urgent{background:#fee2e2;border-color:#fecaca;color:#991b1b}

/* Nếu muốn căn giữa nội dung hai cột này */
.az-db-table td:nth-child(7), /* Trạng thái */
.az-db-table td:nth-child(8){ /* Nguồn khách */
  vertical-align: middle;
}

/* ===== Làm đẹp Stat boxes: icon/bg/label/number theo tông ===== */
/* Responsive */
@media (max-width: 900px) {
    .az-room-card { align-items: stretch; gap: 18px; padding: 18px; }
    .az-room-actions { flex-direction: row; gap: 10px; }
    .az-room-thumb { width: 100%; min-width: 0; }
    .az-stat-box span {
    font-size: 16px!important;
}
.az-stat-box .az-stat-number {
    font-size: 24px;
}
}
.az-stat-grid {
    display: grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
    gap: 12px;
    padding: 10px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 2px 16px 0 rgba(30,34,40,0.08);
    margin-bottom: 20px;
    max-width: 100%;
    white-space: nowrap;
}
@media (max-width: 768px){
  .az-stat-grid{ grid-template-columns:repeat(2,1fr); }
}
.az-stat-box span {
    font-size: 18px;
    font-weight: 500;
    color: #111;
}

.az-stat-box .az-stat-number {
    font-size: 22px;
    font-weight: 700;
}
.az-stat-box{
  display: flex;
    align-items: center;
    flex: 1 1 0;
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    padding: 10px;
    color: #fff;
    box-sizing: border-box;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    font-family: inherit;
    justify-content: flex-start;
    gap:10px;
}
.az-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    opacity: 1;
    background:rgba(255, 255, 255, 0.2);
}
/* Green (Hẹn khách) */
.az-stat-green{
  background:#eafbef;
}
.az-stat-green .az-stat-icon{ background:rgba(30,125,90,.12); color:#1e7d5a; }
.az-stat-green .az-stat-label{ color:#257a60; }
.az-stat-green .az-stat-number{ color:#166a45; }

/* Blue (Đặt cọc) */
.az-stat-blue{
  background:#e9fafd;
}
.az-stat-blue .az-stat-icon{ background:rgba(11,114,133,.12); color:#0b7285; }
.az-stat-blue .az-stat-label{ color:#0b6e79; }
.az-stat-blue .az-stat-number{ color:#0a5661; }

/* Purple (Ký hợp đồng) */
.az-stat-purple{
  background:#eeebfa;
}
.az-stat-purple .az-stat-icon{ background:rgba(91,33,182,.12); color:#5b21b6; }
.az-stat-purple .az-stat-label{ color:#4c1d95; }
.az-stat-purple .az-stat-number{ color:#3c1387; }

/* Red (Thất bại) */
.az-stat-red{
  background:#fdeaea;
}
.az-stat-red .az-stat-icon{ background:rgba(185,28,28,.12); color:#b91c1c; }
.az-stat-red .az-stat-label{ color:#b42318; }
.az-stat-red .az-stat-number{ color:#991b1b; }


/* Popup PDF chiếm gần full màn hình, không padding để iframe tràn hết */
#az-contract-terms-pdf,
#az-contract-pdf-container { height: calc(100vh - 120px); }

.az-pdf-frame{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 767px){
  #az-contract-terms-pdf,
  #az-contract-pdf-container { height: calc(100vh - 100px); }
}

.single-product div.tab-description {
            overflow: hidden;
            position: relative;
			text-align: justify;
        }
       
        .devvn_readmore_flatsome {
            text-align: center;
            cursor: pointer;
            position: absolute;
            z-index: 100;
            bottom: 0;
            width: 100%;
            background: #fff;
        }
        .devvn_readmore_flatsome:before {
            height: 55px;
            margin-top: -45px;
            content: "";
            background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
            background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0 );
            display: block;
        }
        .devvn_readmore_flatsome a {
            display: block;
            margin: 16px auto 0; 
            border: 1px solid #b0c2d1;
            border-radius: 12px;
    width: fit-content;
    padding: 2px 16px;
        }
        .devvn_readmore_flatsome a:after {
            content: '';
            width: 0;
            right: 0;
            border-top: 6px solid #00779A ;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            display: inline-block;
            vertical-align: middle;
            margin: -2px 0 0 5px;
        }
        
/* ===== Mobile: tách 2 hàng ===== */
@media (max-width: 768px){
  .az-db-header{
    display:grid!important;
    grid-template-columns: 1fr auto;            /* cột trái rộng, cột phải fit-content */
    grid-template-areas:
      "rooms rooms"                             /* hàng 1: chỉ rooms */
      "search actions";                         /* hàng 2: search + actions */
    gap:10px 12px;
    align-items:center;
  }
  .az-rooms-wrap { grid-area: rooms; display:flex; gap:8px; }
  .az-db-search  { grid-area: search; display:flex; gap:8px; min-width:0; }
  .az-db-actions { grid-area: actions; display:flex; gap:8px; justify-self:end; }
}
/*hiển thị cột*/
.az-colpicker{position:relative}
.az-colmenu{position:absolute;right:0;top:110%;min-width:max-content;background:#fff;border:1px solid #e5e7eb;
  border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.08);padding:8px 0;z-index:50}
.az-colmenu .title{font-weight:400;padding:4px 12px;color:oklch(70.5% .015 286.067);}
.az-colmenu .item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer}
.az-colmenu .item:hover{background:#f9fafb}
.az-colmenu .item input{width:18px;height:18px;}
.az-colmenu .item.is-fixed{opacity:.5;pointer-events:none}
.az-col-hidden{display:none}
.az-display-columns.is-open + .az-colmenu{display:block}
input[type=checkbox], input[type=radio] {
    margin-right: 0px!important;
    margin-bottom: 0px!important;
}
.az-colmenu .item span {    font-size: .9em;
    font-weight: 500;
    margin-bottom: 0em;}
    
.az-task-delete-all, .az-task-delete-all:hover, .az-bk-delete-all, .az-sch-delete-all, #az-receipt-delete-all, .az-delete-all, .az-tenant-delete-all, .az-service-delete-all, .az-asset-delete-all, .az-contract-delete-all, #az-invoice-delete-all, .az-delete-all:hover, .az-tenant-delete-all:hover, .az-service-delete-all:hover, .az-asset-delete-all:hover, .az-contract-delete-all:hover {
    background: linear-gradient(270deg, #ffc700 0%, #fd550a 44.61%, #ff2a01 100%)!important;
}   

#az-invoice-send {
background: #248f55;
}   
.az-display-columns, .az-display-columns:hover {
background: linear-gradient(267deg, #00f2ff -4.52%, #0051ff 77.25%)!important;
}  
.az-upgrade-room, .az-upgrade-room:hover {
background: linear-gradient(179deg, #ffd913 1.11%, #f90 98.66%)!important;
}  

.az-form-grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px 24px;
}
.az-form-grid-wrapper {
    padding:0rem 2rem;
}
/* Hàng giá + nút */
.az-price-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:5px; border-top:1px solid #eee;
}
.az-price-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.az-btn-yellow {
    background: linear-gradient(270deg, #f90 0%, #D4AD68 44.61%, #d09e3f 100%);
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    align-items: center;
    white-space:nowrap;
}
.woocommerce-loop-product__title-link, .az-btn-yellow, .az-ic-round {
       line-height: 1!important;
    margin-bottom: 0px!important;
    margin-top: 0px!important; 
}
.title-wrapper {
    padding-top: 5px;
    line-height: 1;
}
.az-ic-round {
    border-radius: 50%;
    padding: 5px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform .2s;
    border: 2px solid #F0F0F0;;
}

.azh-chat-icon{position:relative;display:inline-flex;align-items:center}
.azh-chat-icon .azh-badge{
  position:absolute; right:-8px; top:2px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:#e94b35; color:#fff;
  font-size:11px; line-height:18px; text-align:center;
}

.az-room-chot-list {
    display: flex;
    gap:5px;
}
/* Chỉ cho popup Hợp đồng */
.az-popup-content{
 position: relative;
  display: flex;
  flex-direction: column;
  max-height: 85vh;  /* khóa chiều cao popup */
  overflow: hidden;                   /* chặn scroll container, chỉ body scroll */
}
/* Header/title dính trên cùng */
.az-popup-title{
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Footer hành động dính đáy body (ở trong form) */
.az-form-actions.az-full{
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: #fff;
  padding: 12px 0px 0px;
  border-top: 1px solid #eee;
  display: flex;
    gap: 10px;
    justify-content: center;
}

#az-tenant-form .az-form-grid-2col {
    padding-top: 5px!important;
}

#az-tenant-form .az-form-grid-2col .az-row.az-row-full {
    margin-top: 0px!important;
}
/* Flatpickr: ép hiện ô nhập NĂM trong header (bị theme/Reset CSS ẩn) */
.flatpickr-year {
    margin-bottom:0px!important;
    border: none;
}
.flatpickr-calendar .flatpickr-current-month{display:flex;align-items:center;gap:8px}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper{display:inline-flex !important}
.flatpickr-calendar .flatpickr-current-month .numInput.cur-year{
  width:5.5ch !important;   /* hiển thị 4–5 chữ số */
  padding:0; margin:0; border:0; background:transparent;
  font:inherit; color:inherit !important;
}
/* nếu site đang tắt spinner cho input[type=number], khôi phục riêng trong lịch */
.flatpickr-calendar .numInputWrapper .arrowUp,
.flatpickr-calendar .numInputWrapper .arrowDown{display:block}


/* ==== Toggle switch ==== */
.az-toggle{display:flex;align-items:flex-start;gap:12px;margin:14px 0}
.az-toggle input{position:absolute;opacity:0;width:0;height:0}
.az-toggle-track{position:relative;flex:0 0 auto;width:56px;height:30px;border-radius:999px;
  background:#e5e7eb;border:1px solid #e5e7eb;transition:all .2s ease}
.az-toggle-track::after{content:"";position:absolute;top:50%;left:4px;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;background:#9ca3af;transition:all .2s ease}
.az-toggle input:checked + .az-toggle-track{background:#1062ff;border-color:#1062ff}
.az-toggle input:checked + .az-toggle-track::after{left:30px;background:#fff}
.az-toggle input:focus-visible + .az-toggle-track{box-shadow:0 0 0 3px rgba(16,98,255,.25)}
.az-toggle-text .lbl{font-weight:700}
.az-toggle-text .sub{display:block;color:#6b7280;font-size:13px;margin-top:2px}


/* ===== Receipts Table Coloring (Policy B) ===== */

/* Cọc (phiếu THU) */
.az-db-table tr.cat-deposit,
.az-db-table tr.cat-deposit_booking {
  background: #eef6ff;           /* xanh lam nhạt */
  border-left: 4px solid #1d4ed8;/* xanh lam */
}

/* Hoàn cọc (phiếu CHI) */
.az-db-table tr.cat-refund_deposit,
.az-db-table tr.cat-refund_deposit_hold {
  background: #fff3e8;           /* cam nhạt */
  border-left: 4px solid #f97316;/* cam */
}

/* Các phiếu thu thông thường (không phải cọc) – nhẹ tay */
.az-db-table tr.receipt:not(.cat-deposit):not(.cat-deposit_booking) {
  background: #f3fbf5;           /* xanh lá rất nhạt */
  border-left: 4px solid #16a34a;
}

/* Các phiếu chi thường (không phải hoàn cọc) – nhẹ tay */
.az-db-table tr.payment:not(.cat-refund_deposit):not(.cat-refund_deposit_hold) {
  background: #fff5f5;           /* đỏ rất nhạt */
  border-left: 4px solid #ef4444;
}

/* Hover chung cho dễ nhìn */
.az-db-table tr:hover {
  filter: brightness(0.98);
}

/* Căn lề cho cột số tiền nổi bật hơn một chút */
.az-db-table td:nth-child(9) { /* cột "Số tiền" theo table của bạn */
  font-weight: 600;
}

.az-btn.is-disabled { opacity:.6; cursor:not-allowed; }

.az-quota.small { font-size:16px; margin-left:8px; opacity:.8; }

.package-management-top {
    display: flex;
    justify-content: space-between;
}

.package-management {
    position: relative;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #ebecec;
    overflow: hidden;
}
.package-management__frame {
    z-index: 1;
    position: relative;
}
.heading.h-2 {
    font-size: 24px;
}
.package-management__price {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #ff5c00;
}
.package-management__card--wrap {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}
.package-management.package-management-1 .package-management__card .card {
    border: 2px solid #eaf2ff;
}
.package-management.package-management-2 .package-management__card .card {
    border: 2px solid #e6faef;
}
.package-management.package-management-3 .package-management__card .card {
    background: linear-gradient(267deg, #00f2ff -4.52%, #0051ff 77.25%);
}
.package-management.package-management-4 .package-management__card .card {
    background: linear-gradient(270deg, #ffc700 0%, #fd550a 44.61%, #ff2a01 100%);
}
.package-management.package-management-3 .package-management__card .card__frame, .package-management.package-management-4 .package-management__card .card__frame {
    background: #fff;
}
.package-management__card--wrap .card {
    width: calc(50% - 2.5px);
}
.package-management__card .card {
    width: 100%;
    padding: 1px;
    border-radius: 8px;
    overflow: hidden;
}
.package-management__card .card__frame {
    gap: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-radius: 7px;
    border: none;
    white-space: nowrap;
}
.package-management__card .card__result {
    font-size: 16px;
    font-weight: 700;
}
.package-management__block {
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.package-management__block:has(.package-management__icon) .package-management__content {
    width: calc(100% - 24px);
}
.package-management__list {
    margin-top: 8px;
    list-style: inside;
}
.package-management__block .package-management__icon {
    height: fit-content;
}
.package-management__block .package-management__icon i {
    display: block;
    color: #006ffd;
    font-size: 24px;
}
.package-management.package-management-1 .package-management__action button {
    background: #006ffd;
}
.package-management.package-management-2 .package-management__action button {
    background: #00c95c;
}
.package-management.package-management-3 .package-management__action button {
    background: linear-gradient(267deg, #00f2ff -4.52%, #0051ff 77.25%);
}
.package-management.package-management-4 .package-management__action button {
    background: linear-gradient(270deg, #ffc700 0%, #fd550a 44.61%, #ff2a01 100%);
}
.package-management__action button {
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    padding: 0px 16px;
    border-radius: 12px;
    border: none;
    text-align: center;
    box-shadow: none;
    transition: all .3s ease-in-out;
      margin-bottom:0px!important;
    margin-right:0px!important;
}
.package-management.package-management-2::before {
    opacity: .5;
    top: 0;
    right: 0;
    transform: translate(50%, -30%);
}
.package-management.package-management-2::before, .package-management.package-management-2::after {
    content: "";
    position: absolute;
    display: block;
    filter: blur(25px);
    background: #00c95c;
    width: 100%;
    height: 20%;
    border-radius: 100%;
}
.package-management.package-management-2::after {
    opacity: .2;
    bottom: 0;
    left: 0;
    transform: translate(-50%, 30%);
}

.package-management.package-management-3::before {
    opacity: .5;
    top: 0;
    right: 0;
    transform: translate(50%, -30%);
}
.package-management.package-management-3::before, .package-management.package-management-3::after {
    content: "";
    position: absolute;
    display: block;
    filter: blur(25px);
    background: #00b7ff;
    width: 100%;
    height: 20%;
    border-radius: 100%;
}
.package-management.package-management-3::after {
    opacity: .2;
    bottom: 0;
    left: 0;
    transform: translate(-50%, 30%);
}
.package-management.package-management-4::before {
    opacity: .5;
    top: 0;
    right: 0;
    transform: translate(50%, -30%);
}
.package-management.package-management-4::before, .package-management.package-management-4::after {
    content: "";
    position: absolute;
    display: block;
    filter: blur(25px);
    background: #ff5c00;
    width: 100%;
    height: 20%;
    border-radius: 100%;
}
.package-management.package-management-4::after {
    opacity: .2;
    bottom: 0;
    left: 0;
    transform: translate(-50%, 30%);
}
.package-membership.package-membership-1 {
    background: linear-gradient(270deg, #ffc700 0%, #fd550a 44.61%, #ff2a01 100%);
}
.package-membership {
    padding: 1px;
    border-radius: 16px;
    overflow: hidden;
}
.package-membership.package-membership-1 .package-membership__frame {
    background: linear-gradient(179deg, #fff8ef 13.97%, #ffdfbb 98.66%);
}
.package-membership__frame {
    padding: 15px;
    border-radius: 15px;
}

@media (min-width: 1113px) {
    .l-12 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 10px;
    }
    #ads .l-12 {
        padding: 5px 10px;
    }
     .l-4, .l-6 {
        padding: 0 10px;
    }
}
.tab-panel {
    margin-top: 0px;
}
.package-ads.package-ads-1 .package-ads__main--line {
    background: #ffa600;
}
.package-ads.package-ads-2 .package-ads__main--line {
    background: #006ffd;
}
.package-ads.package-ads-3 .package-ads__main--line {
    background: #00c95c;
}
.package-ads__main--line {
    display: block;
    height: 1px;
    width: 100%;
    margin: 12px 0;
}
.package-ads__item {
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
        margin-left: 0em!important;
}
.package-ads__item-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.package-ads.package-ads-1 .package-ads__item-label::before {
    background: #ffa600;
}
.package-ads.package-ads-2 .package-ads__item-label::before {
    background: #006ffd;
}
.package-ads.package-ads-3 .package-ads__item-label::before {
    background: #00c95c;
}

.package-ads__item-label::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
}
.package-ads.package-ads-1 .package-ads__item-content {
    color: #ffa600;
}
.package-ads.package-ads-2 .package-ads__item-content {
    color: #006ffd;
}
.package-ads.package-ads-3 .package-ads__item-content {
    color: #00c95c;
}
.package-ads__item-content {
    white-space: nowrap;
}
.package-membership__head--wrap {
    display:flex;
    gap:12px;
    align-items: center;
    justify-content: center;
}
.package-membership__head--wrap .price-sale {
    font-size: 24px;
    color: #ff5c00;
}

.badge-hot {
    color: #fff;
    background: #e01020;
}
.badge-wrap {
    border: .5px solid;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 100px;
    width: fit-content;
    line-height: 1;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    font-family: "Inter", sans-serif !important;
}


.package-membership__list {
    list-style: none;
    padding: 0;
}
.package-membership__list li {
    gap: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    margin-left: 0em!important;
}
.package-membership.package-membership-1 .package-membership__list li i {
    background: linear-gradient(270deg, #ffc700 0%, #fd550a 44.61%, #ff2a01 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
.package-membership__list li i {
    font-size: 18px;
}
.package-membership__list li span {
    font-size: 14px;
    font-weight: 600;
}
.package-membership__list li:last-child {
    margin-bottom: 0;
}
.package-membership.package-membership-1 .package-membership__action .button {
    background: linear-gradient(270deg, #ffc700 0%, #fd550a 44.61%, #ff2a01 100%);
}
.package-membership__action .button {
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    padding: 0px 16px;
    border-radius: 12px;
    border: none;
    text-align: center;
    box-shadow: none;
    transition: all .3s ease-in-out;
    margin-bottom: 0em!important;
}
.package-membership.package-membership-2 {
    background: linear-gradient(179deg, #ffd913 1.11%, #f90 98.66%);
}
.package-membership.package-membership-2 .package-membership__frame {
    background: linear-gradient(179deg, #fff 47.88%, #fffbe7 98.66%);
}
.package-membership.package-membership-2 .heading {
    background: linear-gradient(179deg, #ffd913 1.11%, #f90 98.66%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    margin-bottom: 0em;
    text-transform: uppercase;
}
.package-membership.package-membership-2 .package-membership__list li i {
    background: linear-gradient(179deg, #ffd913 1.11%, #f90 98.66%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
.package-membership.package-membership-2 .package-membership__action .button {
    background: linear-gradient(179deg, #ffd913 1.11%, #f90 98.66%);
}
.package-membership.package-membership-3 {
    background: #006ffd;
}
.package-membership.package-membership-3 .package-membership__frame {
    background: #fff;
}
.package-membership.package-membership-3 .heading {
    background: #006ffd;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    margin-bottom: 0em;
    text-transform: uppercase;
}
.package-membership.package-membership-3 .package-membership__list li i {
    background: #006ffd;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
.package-membership.package-membership-3 .package-membership__action .button {
    background: #006ffd;
}
.member .az-badge{background:#ff3b30;color:#fff;padding:2px 8px;border-radius:20px;font-size:12px;margin-left:6px}
.member.diamond{border-color:#ffd8a8}
.member.gold{border-color:#ffe08a}
.member.silver{border-color:#cfe5ff}
.plan .az-meta{font-size:13px;opacity:.8;margin:6px 0 10px}
.alt .az-name{font-weight:700}
.bundle .az-name{font-weight:700}

/* ===== Sticky tabs (mọi màn hình) ===== */
:root{ --az-sticky-top: 64px; } /* chỉnh = chiều cao header của bạn */

.az-tabs{
  position: sticky;
  top: var(--az-sticky-top);
  z-index: 100;                 /* nổi trên card */
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.04);
  
}
.az-tabs, .az-wallet-tabs, .az-referral-tabs {
    margin: 0;
    padding: 0;
    background: #dee2ea;
    border-radius: 8px 8px 0 0;
    list-style: none;
    display: flex !important;
    flex-wrap: wrap;
}

/* Nếu đang login WP admin: cộng thêm chiều cao adminbar */
body.admin-bar .az-tabs{ top: calc(var(--az-sticky-top) + 32px); }
@media (max-width:782px){
  body.admin-bar .az-tabs{ top: calc(var(--az-sticky-top)); }
}

/* ===== Mobile: cuộn ngang ===== */
@media (max-width: 768px){
  .az-tabs{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px;
    scroll-snap-type: x proximity; /* tùy chọn */
  }
 .az-tabs li{
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: center;
  }
 
}
@media (min-width: 1113px) {
    .l-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 10px;
    }
}
/*Template quảng cáo*/

/* Mobile: scroll ngang cho 5 nhóm gói */
@media (max-width: 768px){
  /* Container có thể cuộn */
  #hot .pane__main > .row.gap-y-20,        /* 3 gói nâng cấp nhãn */
  #ads .pane__frame > .row.gap-y-10,       /* 3 gói đăng tin */
  #ads .pane__main  > .row.gap-y-10,       /* 3 gói đẩy tin */
  #manager .pane__main > .row.gap-y-20,    /* 3 gói quản lý trọ */
  #member .pane__main > .row.gap-y-20      /* 3 gói hội viên */
  {
    margin: 0 !important;                  /* bỏ margin âm của .row để không bị cắt */
    
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto!important;
    overflow-y: hidden;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;         /* bám điểm khi dừng */
    scrollbar-width: thin;
    scrollbar-color: #d09e3f #f1ecc8;
  }

  /* Mỗi item chiếm ~85% chiều rộng màn hình */
  #hot .pane__main > .row.gap-y-20 > .col,
  #ads .pane__frame > .row.gap-y-10 > .col,
  #ads .pane__main  > .row.gap-y-10 > .col,
  #manager .pane__main > .row.gap-y-20 > .col,
  #member .pane__main > .row.gap-y-20 > .col{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center;
    padding: 0px!important;
  }

 /* Các hàng có badge */
  #hot .pane__main > .row.gap-y-20,
  #manager .pane__main > .row.gap-y-20,
  #member  .pane__main > .row.gap-y-20{
    overflow-y: visible !important; /* không cắt theo trục Y */
    padding-top: 18px;              /* chừa chỗ cho badge (>= |top| của badge) */
  }

  /* đảm bảo badge nổi trên thẻ */
  .az-manager-badge{ z-index: 9; }
  /* Đảm bảo thẻ bên trong kéo căng chiều cao */
  .package-management,
  .package-ads,
  .package-membership{
    height: 100%;
  }
 
}
.az-manager-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index:1;
    white-space: nowrap;
}
/*Gói quản lý tro*/
.az--trial {
    background: linear-gradient(267deg, #00f2ff -4.52%, #0051ff 77.25%);
}
.az--coban {
    background: linear-gradient(270deg, #D8EDA4 0%, #36E098 44.61%, #00c95c 100%);
}
.az--tieuchuan {
    background: linear-gradient(267deg, #00f2ff -4.52%, #0051ff 77.25%);
}
.az--nangcao {
    background: linear-gradient(270deg, #ffc700 0%, #fd550a 44.61%, #ff2a01 100%);
}
.az--vang {
    background: linear-gradient(179deg, #ffd913 1.11%, #f90 98.66%);
}
.package-management__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:5px;
}
.ad-package-upgrade__check-icon {
    color: rgb(0, 155, 161);
}
/* Popup nâng cấp tin */
/* ===== Layout popup: cao cố định + giữa scroll ===== */
#az-upgrade-popup{
  /* kích thước tổng thể của popup */
  width:min(980px, 96vw);
  height:78vh;                 /* CHIỀU CAO CỐ ĐỊNH */
  max-height:780px;            /* trần an toàn trên màn lớn */
  min-height:520px;            /* không quá thấp */
  display:flex;
  flex-direction:column;
}

/* Head luôn hiện, không sticky */
#az-upgrade-popup .az-upg-head{
flex: 0 0 auto;
    border-bottom: 1px solid #eee;
    text-align: center;
    background: #d09e3f;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-top:10px;
}
#az-upgrade-popup .az-upg-head h3{
  text-transform: uppercase;
  color: #fff;
  font-size:22px;
}

.ad-package-upgrade__icon{ color:#fff; }

/* Phần nội dung giữa: chính là vùng SCROLL */
#az-upgrade-popup .az-upg-grid{
  flex:1 1 auto;               /* chiếm hết phần còn lại */
  overflow:auto;               /* scroll trong vùng này */
  padding:16px 24px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  contain:content;
  scrollbar-width: thin;
    scrollbar-color: #d09e3f #f1ecc8;
}


/* Footer luôn hiện, không sticky */
#az-upgrade-popup .az-upg-footer{
  flex:0 0 auto;
  position:static !important;  /* bảo đảm không còn sticky */
  padding:12px 16px;
  border-top:1px solid #eee;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:0;
  border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#az-upgrade-popup .az-upg-footer .total{ font-size:18px; font-weight:700; }
.az-upg-price {
    text-align:center;
}
/* Card & radio (giữ nguyên style đẹp như bạn đang dùng) */
.az-upg-card{ border:1px solid #e5e7eb; border-radius:14px; padding:16px; position:relative; }
.az-upg-card.active{ border-color:#fb923c; box-shadow:0 0 0 2px rgba(251,146,60,.2); }

/* Chỉ hiện .az-upg-times của card đang active */
.az-upg-card:not(.active) .az-upg-times{ display:none; }

/* Grid 2 cột cho các lựa chọn số ngày */
.az-upg-times-content{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

/* Card radio ngày */
.az-upg-time{
  position:relative; display:grid;
  grid-template-columns:1fr auto; grid-template-rows:auto auto;
  gap:6px 8px; align-items:center;
  padding:12px; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; cursor:pointer;
  transition:border-color .2s, box-shadow .2s, transform .05s;
}
.az-upg-time:hover{ border-color:#d1d5db; }
.az-upg-time:active{ transform:translateY(1px); }
.az-upg-time .row1{ grid-column:1/2; grid-row:1; font-weight:600; color:#111827; }
.az-upg-time .row2{ grid-column:1/2; grid-row:2; display:flex; gap:8px; align-items:baseline; }
.az-upg-time .prc{ font-weight:700; font-size:15px; color:#111827; }
.az-upg-time .strikethrough{ font-size:14px; color:#9ca3af; text-decoration:line-through; }

/* Radio tròn */
.az-upg-time input[type=radio]{
  grid-column:2; grid-row:1; justify-self:end; align-self:start;
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border:2px solid #cbd5e1; border-radius:50%;
  background:#fff; margin:0; position:relative; cursor:pointer;
}
.az-upg-time input[type=radio]::after{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:#2563eb; opacity:0; transition:opacity .2s;
}
.az-upg-time input[type=radio]:checked{ border-color:#2563eb; }
.az-upg-time input[type=radio]:checked::after{ opacity:1; }
 

/* Card đang chọn (nếu trình duyệt hỗ trợ :has) */
.az-upg-time:has(input:checked){
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
/* Badge (nếu có giảm) */
.az-upg-time .badge{
  position:absolute; top:-8px; left:12px;
  padding:6px 8px; font-size:12px; font-weight:700; line-height:1;
  color:#fff; background:#10b981; border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

/* Nút “Đã chọn” + card disable */
.az-upg-card .az-upg-choose[disabled]{ opacity:.6; cursor:not-allowed; }
.az-upg-card.disabled{ opacity:.5; pointer-events:none; }

/* Badge gói */
.az-upg-badge{     position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px; 
    z-index:1;
}
.az--noibat{ background: linear-gradient(179deg, #ffd913 1.11%, #FFBF00 98.66%); } .az--vip{ background:linear-gradient(270deg, #ffc700 0%, #fd550a 44.61%, #ff2a01 100%); } .az--uutien{ background: linear-gradient(267deg, #00f2ff -4.52%, #0051ff 77.25%);}
.az-upg-price b{ font-size:22px } .az-upg-price span{ opacity:.7; margin-left:6px }
.az-upg-benefits{ margin:10px 0 8px 16px } .az-upg-benefits li{ margin:4px 0 }
.az-upg-times-title{ font-weight:600; margin:8px 0 }
.az-upg-choose{ width:100%; margin-top:6px }

/* Responsive */
@media (max-width:900px){
  #az-upgrade-popup{ height:86vh; }
  #az-upgrade-popup .az-upg-grid{ grid-template-columns:1fr; }
}

  
/* Popup đẩy tin */
.az-push-wrap{padding:10px;}
.az-push-options, .az-buy-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:220px;overflow:auto;margin-bottom:10px;}
.az-push-opt, .az-buy-opt{display:flex;flex-direction:column;gap:4px;border:1px solid #e5e7eb;border-radius:10px;padding:12px;position:relative;cursor:pointer}
.az-push-opt input, .az-buy-opt input{position:absolute;right:10px;top:10px}
.az-push-opt .ttl, .az-buy-opt .ttl{font-weight:600}
.az-push-opt .prc, .az-buy-opt .prc{font-weight:700}
.az-push-opt .badge, .az-buy-opt .badge{background:#1fb3a6;color:#fff;font-size:12px;border-radius:6px;padding:4px 2px;width:max-content;height:unset;}
.az-push-opt .strikethrough, .az-buy-opt .strikethrough{color:#9ca3af;text-decoration:line-through;font-size:12px}
.az-opt-top {
    display:flex;
    gap: 10px;
}
.az-push-summary, .az-buy-summary{border-top:1px solid #eee;margin-top:8px;padding-top:8px}
.az-push-summary .row, .az-buy-summary .row{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.az-push-total, .az-buy-total{font-size:18px}
.az-push-error, .az-buy-error{margin-top:8px;background:#ffecec;color:#c00;border:1px solid #f8bcbc;border-radius:8px;padding:10px;display:flex;align-items:center;gap:10px}
.az-push-error .az-btn-danger, .az-buy-error .az-btn-danger{margin-left:auto}
.az-push-actions, .az-buy-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}

/*trang người dùng trong wp-admin*/
.your-profile h2, .user-capabilities-wrap {
    display:none;
}
.az-db-header-post {
    display: flex;
    flex-wrap: wrap;
    gap:5px 20px;
}
@media (max-width: 767px){
.mfp-content {
    background: #d09e3f!important;
    padding:0px 16px;
}
.nav:not(.nav-slide) .active>.children {
    padding-bottom: 5px!important;
}
.az-db-header-post,.az-db-actions  {
    gap: 5px!important;
}
}
.nav.nav-vertical {
    border-radius: 12px;
    background-color: #F7F7F7;
    border: 4px solid #FFFFFF;
    box-shadow: 0px 4px 16px 0px #2222221f;
    box-sizing: border-box;
    margin-top: 20px;
}
.nav-sidebar.nav-vertical>li.menu-item.active,.nav-sidebar.nav-vertical>li.menu-item:hover{background-color:transparent}
/* Card trên cùng */
.off-canvas .az-acc-sidebar .az-acc-card{ color:#000; border-radius:14px; padding:16px; margin:10px 10px 14px;
  position:sticky; top:0; z-index:2;
}
.az-acc-avatar-meta {
    display:flex;
    gap: 10px;
    justify-content: center;
}
.az-btn-signin, .az-btn-signup, .az-btn-account {
    background:#fff;
    color:#000!important;
    border-radius:10px;
    padding:3px 10px;
    font-size:16px;
}
.az-acc-avatar img{ width:72px; height:72px; border-radius:50%; border:3px solid rgba(255,255,255,.35); }
.az-acc-meta{ margin-top:8px; font-weight:600; }
.az-acc-name{ font-size:16px; line-height:1.2; }
.az-acc-id{ opacity:.85; font-size:13px; }

.az-acc-actions{ display:flex; gap:10px; margin:12px 0; justify-content: center;}

.az-cta{ display:block; text-align:center; background:#ff4aa2; color:#fff; font-weight:700;
  padding:11px 12px; border-radius:12px; }

/* Phần link tài khoản phía dưới */
.az-acc-links{ margin:8px 4px 12px; }
.az-acc-links > li > a{ padding:12px 14px; border-radius:12px; display:flex; align-items:center; gap:10px; }

/* Làm panel cuộn mượt trong off-canvas */
.off-canvas .sidebar-menu-inner{ max-height:calc(100vh - 60px); overflow:auto; -webkit-overflow-scrolling:touch; }





.az-receipt-form .az-form-row {
    padding: 0rem 2rem;
}
.az-form-footer  {
    text-align: center;
}
/*chuyển card sang dạng list ngang */
/* card thành flex hàng */
  .products .product-small .box{
    display:flex;
    align-items:stretch;       /* quan trọng: để .box-image cao = card */
    gap:8px;
  }
  .product-small .box-image {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* cột ảnh bên trái */
  .products .product-small .box-image{
    flex:0 0 45%;             
    position:relative;
    overflow:hidden;
  }
/* cột nội dung bên phải */
  .products .product-small .box-text{
    flex:1 1 auto;
    min-width:0;               /* BẮT BUỘC để ellipsis hoạt động trong flex */
    padding:0;                 /* tùy chỉnh lại khoảng cách nếu cần */
    text-align:left;
    padding-right: 10px;
  }

  /* Tiêu đề 1 dòng + ellipsis */
  .products .product-small .box-text .product-title,
  .products .product-small .box-text .woocommerce-loop-product__title,
  .products .product-small .box-text .name a{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding-top: 5px;
  }
   /* Địa chỉ 1 dòng + ellipsis (bắt hết vài class có thể có) */
  .azhouse-dia-chi{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
@media (max-width: 767px){
.az-price-row,  .az-price-actions {
    gap: 3px!important;
}
.az-btn-yellow {
    font-size:12px!important;
}
    .title-wrapper {
    padding-top: 0px!important;
}
 /* cột ảnh bên trái */
  .products .product-small .box-image{
    flex:0 0 43%!important;     
  }
  /* ảnh fill full chiều cao card */
  .products .product-small .box-image img{
    display:block;
    width:100%;
    height:120px;
    object-fit:cover;          /* cắt ảnh cho vừa khít */
  }
 
.gia-tu {
    line-height: 1!important;
}
span.amount {
    font-size: 15px!important;
    line-height: 16px!important;
}
.product-small .price-wrapper .price .amount {
    font-size: 15px!important;
    line-height: 1!important;
}
  .woocommerce-loop-product__title-link  {
    align-items: flex-start!important;
    flex-direction: column!important;
}
.price-wrapper {
    padding-left: 0px!important;
}
.thongtin-them {
white-space:nowrap;
}
.thongtin-them, .azhouse-dia-chi {
    line-height: 1.6!important;
}
.loop-badge-chu-nha {
    padding: 2px!important;
}
.loop-badge-chu-nha span {
    font-size: 10px!important;
}
.loop-badge-chu-nha img {
    width: 12px!important;
    height: 12px!important;
    margin-right: 2px!important;
}
.azhouse-badge-trang-thai {
    font-size: 10px!important;
    padding: 0px 2px!important;
}
.azhouse-badge-rating .shield {
    width: 70px!important;
    height: 70px!important;
}
}

/* Badge trạng thái sang góc phải */
.product-main .show_to_1024 .azhouse-badge-trang-thai.azhouse-badge--single-bds {
  position: absolute; top: 12px; right: 12px; z-index: 20;
  margin: 0; /* tránh đẩy lệch */
  white-space: nowrap; /* muốn 1 dòng; bỏ nếu cần xuống dòng */
  /* nếu bị che bởi overlay của slider thì tăng lên 50 */
}
.az-invoice-badge, .az-verify-block .az-verify-badge {
    display: inline-block;
    margin-left: -20px;
    padding: 1px 5px 2px;
    border-radius: 16px;
    font-size: 10px;
    font-weight: 400;
    vertical-align: middle;
    position: relative;
    top: -16px;
}

.az-badge-free {
    background: #24ce62;
    color: #fff;
    box-shadow: 0 1px 2px rgba(36,206,98,0.12);
}

.az-badge-paid {
    background: #ff2727;
    color: #fff;
    box-shadow: 0 1px 2px rgba(255,39,39,0.12);
}

.invoice-due-red {
   color: #db2828;
}
.invoice-paid-green {
   color: #15a05c;
}
/*Trạng thái hợp đồng*/
.az-status.active   { background:#17964d; font-weight:bold; color:#fff;border-radius:12px;}
.az-status.waiting  { background:#e0a800; font-weight:bold;color:#fff;border-radius:12px; }
.az-status.unsigned { background:#db3030; font-weight:bold;color:#fff;border-radius:12px; }

/*Trạng thái hóa đơn*/
.az-status.paid   { background:#17964d; font-weight:bold; color:#fff;border-radius:12px;}
.az-status.due  { background:#e0a800; font-weight:bold;color:#fff;border-radius:12px; }
.az-status.cancelled { background:#db3030; font-weight:bold;color:#fff;border-radius:12px; }
.az-status.unpaid { background:#ED6004; font-weight:bold;color:#fff;border-radius:12px; }

.az-terminate-deposit  input[type='number'] {
    border-radius: 8px;
    margin-bottom:0px!important;
}
.az-terminate-form.az-terminate-wrap {
    padding: 1rem 2rem;
}
.az-terminate-grid { display: flex; gap: 24px; }
.az-terminate-left { flex: 1; min-width: 340px; }
.az-terminate-right { width: 320px; }
.az-term-summary-block { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #0001; padding: 24px;}
.az-term-sum-row { display: flex; justify-content: space-between; margin-bottom: 10px;}
.az-term-grand-total { font-size: 1.15em; color: #d09e3f; font-weight: bold;}


.az-invoice-details-table th.az-td-amount,
.az-invoice-details-table td.az-td-amount {
  width:30%;
  min-width: 80px;
  max-width: 110px;
}

.az-invoice-details-table {
  border-collapse: separate !important; /* Bắt buộc để bo góc */
  border-spacing: 0;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px 0 #0001;
}

.az-invoice-details-table th,
.az-invoice-details-table td {
  border: 1px solid #333;
  padding: 8px;
}

.az-invoice-details-table th:first-child {
  border-top-left-radius: 14px;
}
.az-invoice-details-table th:last-child {
  border-top-right-radius: 14px;
}
.az-invoice-details-table tr:last-child td:first-child {
  border-bottom-left-radius: 14px;
}
.az-invoice-details-table tr:last-child td:last-child {
  border-bottom-right-radius: 14px;
}

/* Xoá viền trùng lặp ở các góc */
.az-invoice-details-table th:first-child,
.az-invoice-details-table td:first-child {
  border-left-width: 1.5px;
}

.az-invoice-details-table tr:last-child td {
  border-bottom-width: 1.5px;
}

.invoice-detail-popup {
  border-radius: 8px;
  overflow: hidden;  /* Quan trọng để bo góc đúng */
  background: #fff;
  position: relative;
}

.az-invoice-gradient-header,
.az-invoice-gradient-footer {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.invoice-detail-popup > *:not(.az-invoice-gradient-header):not(.az-invoice-gradient-footer) {
  position: relative;
  z-index: 3;
}
.invoice-detail-header {
  margin-top: -45px; /* hoặc tăng nếu cần đẩy nội dung xuống dưới sóng */
}



.invoice-detail-info {
  font-size: 14px;
  color: #333;
  padding:0rem 1rem;
  margin-bottom: -35px;
}
.az-invoice-details-table th {
    text-transform: none;
}
/* Địa chỉ: icon + text */
.invoice-detail-address {
  display: flex;
  align-items: center;
}
.invoice-detail-address i {
  margin-right: 6px;
  color: #666;
  font-size: 16px;
}

/* Các dòng thông tin: chia 2 cột, cách đều nhau */
.invoice-detail-row {
  display: flex;
  justify-content: space-between;
}
.invoice-detail-row > div {
  /* mỗi bên chiếm ~50% */
  flex: 1;
  white-space: nowrap;
}

/* Khoảng cách giữa 2 ô */
.invoice-detail-row > div:first-child {
  margin-right: 16px;
}

/* Trạng thái đặt xuống hàng cuối, canh phải */
.invoice-detail-status {
  text-align: right;
  font-weight: 600;
  margin-top: 4px;
}
.invoice-detail-status strong {
  color: #000;
}
/* ==== FORM LẬP HÓA ĐƠN BƯỚC 2 AZHOUSE ==== */

.az-inv-create-form {
    max-width: 400px;
}
.az-form-row {
  display: flex;
  gap: 18px;
}
.az-form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.az-form-group label {
  font-weight: 500;
  margin-bottom: 6px;
  color: #424c58;
  font-size: 15px;
}
.az-form-group .az-req {
  color: #fe3a30;
  margin-left: 2px;
}
.az-input-wrap {
  position: relative;
}
.az-input-wrap input,
.az-form-group select {
  width: 100%;
  border: 1px solid #e4e7ee;
  border-radius: 6px;
  font-size: 16px;
  color: #222;
  background: #fafbfc;
  outline: none;
  transition: border 0.2s;
  margin-bottom: 0;
}
.az-form-group select {
  -webkit-appearance: auto !important;
  background: #f3f4f8;
  padding-right: 0em!important;
}

.az-input-wrap input:focus,
.az-form-group select:focus {
  border-color: #4a90e2;
  background: #fff;
}
.az-icon-calendar {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #abb2c2;
  font-size: 18px;
  pointer-events: none;
  font-family: "FontAwesome";
}
.az-icon-calendar:before { content: "\f073"; /* fa-calendar */ }
.az-form-block {
  margin-bottom: 12px;
}
.az-block-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: #2a7b2e;
  margin-bottom: 2px;
  font-size: 16px;
  margin-top: 8px;
}
.az-block-title span {
  width: 4px;
  height: 24px;
  background: #2a7b2e;
  border-radius: 3px;
  margin-right: 9px;
  display: inline-block;
}
.az-block-desc {
  color: #525b69;
  font-size: 14px;
  margin-bottom: 8px;
  margin-left: 13px;
  font-style: italic;
}
.az-inv-adjust-wrap {
  background: #fff;
  border-radius: 8px;
  padding: 8px 0 0 0;
}
.az-inv-add-adjust {
  width: 100%;
  background: #656d78;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 12px 0;
  margin-top: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.az-inv-add-adjust:hover { background: #535a64; }
input[readonly], select[disabled] { background: #f3f4f8 !important; color: #888 !important; }
/* Đảm bảo spacing đều */
.az-form-group input,
.az-form-group select { box-sizing: border-box; }
.az-form-group input[type="text"]::-webkit-input-placeholder,
.az-form-group input[type="text"]::placeholder {
  color: #b3b8c4;
  font-weight: 400;
}


/* ---- CỘNG/ GIẢM TRỪ ---- */
.az-inv-adjust-list {
  margin-top: 8px;
}

.az-inv-adjust-item {
  border: 1.5px solid #b6cdfa;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 10px;
  padding: 0;
  overflow: hidden;
}

.az-inv-adjust-row {
  display: grid;
  grid-template-columns: 100px 2fr 1.5fr 40px;
  align-items: center;
  border-radius: 8px;
}

.az-inv-adjust-radio label {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  margin-right: 0;
  cursor: pointer;
}

.az-inv-adjust-radio input[type="radio"] {
  margin-right: 4px;
  accent-color: #0d6efd;
  width: 16px; height: 16px;
margin-bottom: 0em!important;
}

.az-inv-adjust-amount input,
.az-inv-adjust-reason input {
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
}

.az-inv-adjust-amount input::placeholder,
.az-inv-adjust-reason input::placeholder {
  color: #c4c4c4;
  font-style: italic;
  opacity: 1;
}

.az-inv-adjust-amount input:required,
.az-inv-adjust-reason input:required {
  background: transparent;
  font-size: 14px;
    margin-bottom: 0px;
}

.az-inv-adjust-col {
  border-right: 1px solid #f1f2f4;
  padding: 10px 8px;
}
.az-inv-adjust-col:last-child {
  border-right: none;
  padding-right: 0;
  text-align: center;
}

.az-inv-adjust-remove a,
.az-inv-remove-adjust {
  color: #d9534f !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.1s;
  display: block;
}

.az-inv-remove-adjust:hover {
  color: #b52c24 !important;
}

.az-inv-add-adjust {
  width: 100%;
  margin-top: 12px;
  background: #656d78;
  color: #fff;
  font-weight: 600;
  border-radius: 7px;
  font-size: 18px;
  padding: 10px 0;
  border: none;
}


/* ==== Responsive Mobile ==== */
@media (max-width: 600px) {
    .az-inv-create-form {
        padding: 10px 4vw;
    }
    .az-inv-create-form > div {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 13px;
    }
    .az-inv-create-form label {
        font-size: 14px;
    }
    .az-form-row {
    flex-direction: column!important;
}
.az-form-group input, .az-form-group select {
    width: 250px!important;
}
}

#az-invoice-popup {
  position: relative;
}
.az-popup-overlay-loading {
  position: absolute;
  z-index: 1002;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
}
.az-popup-overlay-spinner {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 32px 0 rgba(0,0,0,0.13);
  padding: 36px 48px;
  font-size: 18px;
  color: #d09e3f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.az-popup-overlay-spinner i {
  font-size: 40px;
}
.az-chot-service-item {
  border: 2px solid #41b6fa;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 10px;
  padding: 10px;
  box-shadow: 0 1px 4px 0 rgba(0,120,212,0.05);
}
.az-chot-service-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.az-chot-service-info {
  flex: 1;
  min-width: 120px;
  padding-top: 4px;
}
.az-chot-service-name b {
  font-size: 14px;
  font-weight: 600;
  color: #23325c;
  display: block;
  margin-bottom: 6px;
}
.az-chot-service-price {
  color: #343b4c;
  font-size: 14px;
  font-weight: 400;
}
.az-chot-service-price b {
  color: #222d3d;
  font-size: 14px;
  font-weight: 700;
  margin: 0 2px;
}
.az-chot-service-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
  max-width: 180px;
}
.az-service-idx-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}
.az-service-idx-row input[type="number"] {
  width: 80px;
  height: 38px;
  border: 1.5px solid #c5d1e3;
  border-radius: 8px 0 0 8px;
  padding: 0 10px;
  font-size: 14px;
  background: #f6faff;
  color: #222d3d;
  outline: none;
  transition: border 0.2s;
  border-right: none;
  margin-bottom: 0em!important;
}
.az-service-idx-row input[type="number"]:not([readonly]) {
  background: #fff;
}
.az-idx-label {
  display: inline-block;
  background: #e9edf3;
  color: #4e5a6a;
  font-size: 14px;
  padding: 0 10px;
  border-radius: 0 8px 8px 0;
  height: 38px;
  line-height: 38px;
  font-weight: 500;
  width: 80px;
  text-align: center;
  border: 1.5px solid #c5d1e3;
  border-left: none;
}

@media (max-width: 700px) {
  .az-chot-service-row { gap: 5px!important;}
  .az-chot-service-inputs { max-width: 100%; min-width: 0;}

.az-inv-step-labels {
    gap: 20px!important;
    font-size: 15px!important;
}
.az-inv-title {
    font-size: 18px!important;
}
.az-inv-step-dot {
    width: 30px!important;
    height: 30px!important;
    font-size: 20px!important;
}
.az-inv-step-line {
    width: 120px!important;
}
.az-inv-main-grid {
    min-height: 700px!important;
}
.az-inv-roomlist-left {
    margin-bottom: 10px!important;
}
.az-chot-service-name b,.az-chot-service-price, .az-chot-service-price b  {
  font-size: 12px!important;
}
.az-service-idx-row input[type="number"] {
  width: 50px!important;
  font-size: 12px!important;
}
.az-idx-label {
  width: 70px!important;
  font-size: 12px!important;
}
.az-inv-main-grid,
    .az-inv-footer-grid {
        flex-direction: column;
        gap: 14px;
    }
    .az-inv-roomlist-left,
    .az-inv-room-chot-right,
    .az-inv-step2-summary-left,
    .az-inv-create-form-right {
        width: 100% !important;
        max-width: 100% !important;
    }
    .az-inv-footer-actions {
        width: 100%;
        text-align: center;
        margin-top: 6px;
        justify-content: center;
    }
}


/* Đảm bảo label nằm trên, nút nằm ngang */
.az-room-chot-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Label "Đã chốt dịch vụ" */
.az-room-chot-success {
    color: #21a366;
    font-weight: 500;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Nhóm nút nằm ngang */
.az-room-chot-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* Style nút Hủy */
.az-btn-huy-chot {
    background: #d94646 !important;
}

/* Bôi viền đậm khi đã chốt và đang active */
.az-inv-room-item.chot-done.active {
    border: 2.5px solid #21a366 !important;
    box-shadow: 0 0 0 3px #eafbf5 !important;
    background: #eafbf5 !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Khi đã chốt mà không active vẫn giữ style hiện tại (nếu muốn khác biệt) */
.az-inv-room-item.chot-done {
    background: #eafbf5 !important;
    border: 2px solid #c4eddc !important;
}

/* Khi chỉ active mà chưa chốt */
.az-inv-room-item.active:not(.chot-done) {
    border: 2.5px solid #3182ce !important;
    box-shadow: 0 0 0 3px #eaf1fb !important;
    background: #eaf1fb !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.az-chot-actions {
    padding: 10px;
    border-bottom: 1px solid #d09e3f;
    background-color: #FFF9EB;
    position: sticky;
    top: 0px;
    z-index: 10;
}
.az-chot-title h6 {
    text-transform: none;
    text-align: center;
}
.az-chot-ac{
    display: flex;
    justify-content: center;
    gap: 5px;
}
.az-btn-cancel-chot, .az-btn-apply-chot {
    display:flex;
    align-items: center;
    gap:3px;
}
.az-btn-cancel-chot, .az-btn-cancel-chot hover {
  background-color: #6c757d!important;
    border-color: #6c757d!important;
}
#az-invoice-popup {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.az-inv-popup-header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 11;
  background: #fff;
  box-shadow: 0 3px 10px #0001;
}

.az-inv-popup-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 11;
  background: #fff;
  box-shadow: 0 -2px 8px #0001;
  padding-top: 2px;
}

.az-inv-popup-main {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* Bọc toàn bộ các header */
.az-inv-step-1.active,
.az-inv-step-2.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Main grid chiếm tối đa chiều cao còn lại, trừ header + footer */
.az-inv-main-grid {
  flex: 1 1 0;
  min-height: 0; /* cho phép scroll con */
  display: flex;
  gap: 15px;
  /* không cần set height cứng nữa */
}

/* Cột danh sách phòng scroll riêng */
.az-inv-roomlist-left {
  flex-shrink: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
}

/* Cột phải scroll riêng */
.az-inv-room-chot-right,
.az-inv-create-form-right {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  background: #FFF9EB;
  border-radius: 8px;
  border: 2px solid #d09e3f;
  padding: 0px 10px 10px;
      overflow-y: scroll;
          overflow-x: scroll;
    scrollbar-gutter: stable;
        position: sticky;
    z-index: 10;
}


/* Ẩn scroll toàn popup, chỉ scroll từng cột */
.az-fancybox-content.az-inv-fast-create {
  overflow: hidden;
}

/* Đảm bảo các item không bị tràn */
.az-inv-roomlist-left, .az-inv-step2-summary-left, .az-inv-room-chot-right, .az-inv-create-form-right {
  scrollbar-width: thin;
  scrollbar-color: #d09e3f #fff;
}


/* Container chung cho desktop */
.az-input-icon {
  position: relative;
  display: inline-block;
  width: 250px; /* hoặc tùy chỉnh cho phù hợp */
}

/* Input desktop & padding nhường chỗ icon */
.az-input-icon .month-picker {
  width: 100%;
  padding: 8px 2.2em 8px 0.8em;
  box-sizing: border-box;
}

/* Icon calendar chung */
.az-input-icon .fa-calendar-days {
  position: absolute;
  right: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #999;
  font-size: 1em;
}

/* Mobile wrapper */
.az-icon-mobile { position: relative; display: inline-block; width: 250px; }

/* Input mobile chỉ tháng */
.az-icon-mobile .mobile-only {
  width: 100%;
  padding: 8px 2.2em 8px 0.8em;
  box-sizing: border-box;
}

/* Icon mobile */
.az-icon-mobile .fa-calendar-days {
  position: absolute;
  right: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #999;
  font-size: 1em;
}

/* Placeholder overlay cho mobile */
.az-icon-mobile .az-mobile-placeholder {
  position: absolute;
  left: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: opacity .2s;
  z-index:1;
  opacity:1;                             /* ← Mặc định hiện */
}

/* Ẩn placeholder CHỈ khi container có .has-value (do JS set) */
.az-icon-mobile.has-value .az-mobile-placeholder{ opacity:0; }

/* Ẩn/hiện desktop vs mobile */
@media (max-width: 768px) {
  .az-input-icon, .desktop-only {
    display: none !important;
  }
  .az-icon-mobile, .mobile-only {
    display: inline-block !important;
    margin-bottom: 0em!important; height:40px; 
  }
  .az-rooms-wrap { align-items: center!important}
}
@media (min-width: 769px) {
  .desktop-only {
    display: inline-block !important;
  }
  .az-icon-mobile, .mobile-only {
    display: none !important;
  }
}



/* 1) Wrapper phải relative để dropdown absolute nằm đúng chỗ */
.az-db-filter-dropdown {
  position: relative;
  display: inline-block; /* giữ nút không bị full-width */
      z-index: 100;
    overflow: visible;
}

/* 2) Dropdown bốc luôn lên trên, không chiếm chỗ */
.az-db-filter-dropdown .az-filter-dropdown-content {
  display: none;               /* ẩn mặc định */
  top: calc(100% + 4px);       /* cách nút 4px */
  left: 0;                     
  padding: 8px;
  display: flex;               /* flex hàng ngang */
  gap: 5px;
  border-radius: 6px;
    position: absolute;   /* hoặc relative, absolute, fixed, sticky đều được tùy vị trí muốn show */
   z-index: 9999 !important;
  background: #fff;    /* Nên thêm để tránh bị mờ/lộn màu */
  box-shadow: 0 4px 12px rgba(0,0,0,0.14); /* cho nổi bật hơn */
}

/* 3) Khi mở thì thêm class .open để show */
.az-db-filter-dropdown.open .az-filter-dropdown-content {
  display: flex;
}

/* 4) Style label + checkbox */
.az-filter-dropdown-content label {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  cursor: pointer;
}
.az-filter-dropdown-content input[type=checkbox] {
    margin-bottom:0px!important;
}
.az-db-control {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}
/* Layout chung */
.az-fancybox-content.az-inv-fast-create { background:#fff;border-radius:10px;padding:22px 26px;box-shadow:0 10px 40px #0002; }

/* Tiêu đề popup */
.az-inv-title, .az-form-title {padding:6px 0px; font-size:23px; font-weight:700; margin-bottom:8px; text-align:center;background:#d09e3f; color:#fff; border-top-right-radius: 8px;
    border-top-left-radius: 8px;}
.az-inv-title-small { font-size:15px; color:#F5F2F2; margin-left:4px; }

/* Stepper */
.az-inv-steps {
    padding:1rem;
}
.az-inv-stepper { display:flex;align-items:center;justify-content:center;margin-bottom:6px; }
.az-inv-step-dot { width:36px; height:36px; border-radius:50%; background:#fff; border:2.5px solid #d09e3f; color:#d09e3f; font-weight:700; font-size:22px; display:flex;align-items:center;justify-content:center; }
.az-inv-step-dot:not(.active) { border-color:#d9d9d9; color:#ccc; }
.az-inv-step-dot.active { background:#fff; color:#d09e3f; border-color:#d09e3f; }
.az-inv-step-line { height:3px;width:150px;background:#d9d9d9; margin:0 10px; border-radius:2px; }
.az-inv-step-labels { display:flex;justify-content:center;gap:40px;font-size:17px;font-weight:600;margin-bottom:14px; }
.az-inv-step-labels .active { color:#d09e3f; }
.az-inv-step-labels span:not(.active) { color:#888; }
.az-inv-chot-count {background:#d09e3f;color:#fff;
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}
.az-send-zalo {
    margin-right: 0px!important;
        width: 16px;
    height: 16px;
    margin-bottom: 0px!important;
    border-radius: .25em;
}
/* Main grid */
.az-inv-main-grid { display:flex; gap:15px; min-height:260px; }
.az-inv-roomlist-left { width:310px; max-height:330px; overflow-y:auto; border:none; }
#az-invoice-popup .az-room-title {
  font-size: 16px !important;
}
#az-invoice-popup .az-room-status {
  font-size: 12px !important;
}
#az-invoice-popup .az-room-money {
  font-size: 14px;
}
.az-inv-room-chot-right, .az-inv-create-form-right { flex:1; }

/* Chốt dịch vụ empty box */
.az-inv-chot-empty.az-inv-chot-box { padding:24px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px;}
.az-inv-chot-empty .fa-box-open { font-size:38px; margin-bottom:12px; color:#46505b; opacity:.75 }
.az-inv-chot-empty-title { font-size:19px; font-weight:700; color:#46505b; margin-bottom:4px; }
.az-inv-chot-empty-note { font-size:16px; color:#46505b; opacity:.85; }

/* Step 2: Tóm tắt */
.az-inv-step2-summary-left {max-width:400px;overflow-y: scroll;overflow-x: scroll;background: #FFF9EB;padding: 0px 10px 10px; min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; border:1px solid #d09e3f; }
.az-inv-step2-summary-left .fa-check-circle { font-size:40px; color:#21b222; margin-bottom:10px; }
.az-inv-step2-summary-title { font-size:22px;color:#21b222;font-weight:700;line-height:28px;margin-bottom:8px;}
.az-inv-step2-summary-note { font-size:16px;color:#46505b;opacity:.9; }

/* Footer grid */
.az-inv-footer-grid { display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:15px;margin-top:8px;border-top:1.5px solid #eee; }
.az-inv-summary-left { flex:1 1 0; }
.az-inv-footer-actions { display:flex; gap:12px; }
.az-footer-step1, .az-footer-step2 { display:none; }
.az-inv-step-1.active .az-footer-step1 { display:flex; }
.az-inv-step-2.active .az-footer-step2 { display:flex; }

/* Chốt count + Zalo note */
.az-inv-chot-count-box { font-size:18px;color:#21b222;font-weight:600;margin-bottom:4px; }
.az-inv-send-zalo label { font-weight:600; }
.az-inv-send-zalo input[type=checkbox] { accent-color:#21b222; transform:scale(1.1); margin-right:2px; }
.az-inv-send-zalo span { color:#0573ff; font-weight:600; }
.az-inv-zalo-note { font-size:15px; color:#444; }
.az-inv-zalo-note2 { color:#f12a23;font-size:14px;font-weight:500;margin-top:3px; }

/* Nút */
.az-inv-close { background:#697382; color:#fff; }
.az-inv-next-step2, .az-inv-save { background:#21b222; color:#fff; }
.az-inv-prev-step1 { background:#f7b72b; color:#222; }

/* Đảm bảo nút nổi bật khi hover */
.az-btn:hover { opacity:0.93; }

/* Popup thành công */
.az-popup-success h2 { color:#21b222; margin:12px 0 6px; }
.az-success-count { color:#21b222; font-weight:700; font-size:19px; }

/* Scrollbar cho list phòng */
.az-inv-roomlist-left::-webkit-scrollbar { width:7px; }
.az-inv-roomlist-left::-webkit-scrollbar-thumb { background:#eee;border-radius:5px; }





/* 1) Cho phép scroll ngang chỉ trên popup tabs */
#az-room-detail-popup .az-room-detail-tabs, .mb-4.flex.gap-2 {
  display: flex;
   flex-wrap: nowrap;              /* không xuống hàng */
  overflow-x: auto !important;    /* ép scroll ngang */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* mượt iOS */
  touch-action: pan-x;            /* cho phép quẹt ngang */
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #d09e3f #f1ecc8;
}

/* 2) Giữ nút tab không bị co */
.az-room-detail-tabs .az-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 3) Nếu Fancybox chặn overflow ở lớp cha, override nó */
.fancybox__content {
  overflow: visible !important;
}

/* 4) (Tuỳ chọn) style cho scrollbar WebKit */
.az-room-detail-tabs::-webkit-scrollbar {
  height: 6px;
}
.az-room-detail-tabs::-webkit-scrollbar-thumb {
  background: #d09e3f;
  border-radius: 3px;
}
.az-room-detail-tabs::-webkit-scrollbar-track {
  background: #f1ecc8;
}


/* biến loading + spinner */
.az-popup-loading .fa-spinner {
  margin-right: 5px !important;
}


/* two-column layout */
#az-room-services .unit {
  color: #555;
}
#az-room-services .unit-price {
  color: #d09e3f;   /* màu nổi bật cho giá */
  font-weight: 700;
}

  #az-room-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0rem;
    margin-bottom: 1.5rem;
  }
  /* each row = one service */
  #az-room-services .service-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    height: 20px;
  }
  #az-room-services .service-row input[type=checkbox] {
    margin-right: 0px!important;
    margin-bottom: 0px!important;
}
  /* checkbox + label */
  #az-room-services .service-row label {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 0 0 auto;
    font-weight: 500;
    color: #333;
  }
  /* unit text */
  #az-room-services .service-row .unit {
    color: #888;
    font-size: 0.9em;
  }
  /* the index input stretches */
  #az-room-services .service-row .service-index-input {
    flex: 1 1 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    font-size: 0.8em;
    height: 30px!important;
  }
  /* placeholder style if you like */
  #az-room-services .service-row .service-index-input::placeholder {
    color: #aaa;
  }
  /* responsive: 1-column on small screens */
  @media (max-width: 600px) {
    #az-room-services {
      grid-template-columns: 1fr;
    }
  }

/* Cho phép canvas nhận pointer/touch để vẽ */
#az-contract-sign-popup canvas {
  touch-action: none;
  cursor: crosshair;
}
.az-confirm-terms { display: flex; flex-direction: column; gap: 16px; }
.az-confirm-card {
  background: #fafaf7;
  border-radius: 12px;
  padding: 0px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: flex; align-items: center; justify-content: space-between;
}
.az-confirm-title { font-weight: 500; font-size: 17px; }
.az-sign-status.signed { color: #27ae60; font-weight: 600; }

.input-spinner {
  background: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="20" fill="none" stroke="%23d09e3f" stroke-width="6" stroke-linecap="round" stroke-dasharray="31.415, 31.415" transform="rotate(90 25 25)"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/></circle></svg>') no-repeat right 10px center;
  background-size: 20px 20px;
  color: #b3a371 !important;
}

/* Block chứa nội dung xem chi tiết */
.az-tenant-view-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  color: #333;
  font-size: 0.95rem;
}
.az-tenant-view-list .az-client-info {
  border: 1px solid #ebecec;
    border-radius: 8px;
    overflow: hidden;
    padding:0px 20px 20px 20px;
}
/* Tiêu đề nhóm thông tin */
.az-tenant-view-list h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}

/* Mỗi dòng một trường thông tin */
.az-tenant-view-list p {
  margin: 0;
  display: flex;
  align-items: flex-start;
  line-height: 1.4;
}

/* Nhãn field (bold) */
.az-tenant-view-list p strong {
  width: 140px;          /* cố định để căn hàng */
  flex-shrink: 0;
  font-weight: 600;
  color: #555;
  padding: 0px 10px 10px 0px;
}

/* Giá trị field */
.az-tenant-view-list p span {
  color: #333;
  word-break: break-word;
}

/* Style cho trạng thái (active/ended) */
.view-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
}
.view-status[data-status="active"] {
  background-color: #28a745;
  color:#fff;
}
.view-status[data-status="ended"] {
  background-color: #6c757d;
  color:#fff;
}

/* Style cho các toggle-readonly (yes/no) */
.view-is-contact,
.view-registered,
.view-verified, .az-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
}
.view-is-contact[data-value="1"],
.view-registered[data-value="1"],
.view-verified[data-value="1"], .az-label--contact {
  background-color: #007bff;
  color:#fff;
}
.view-is-contact[data-value="0"],
.view-registered[data-value="0"],
.view-verified[data-value="0"], .az-label--member {
  background-color: #adb5bd;
  color:#fff;
}

/* Đã đăng ký: xanh lá */
.az-label--registered {
  background-color: #28a745;
  color: #fff;
}

/* Chưa đăng ký: đỏ */
.az-label--unregistered {
  background-color: #dc3545;
  color: #fff;
}

.account-type-options {
    display: flex;
    justify-content: space-evenly;
}
.az-dbroom-search-wrap {
    display:flex;
    gap:18px;
    align-items: center;
}

.acf-icon.small, .acf-icon.-small {
    cursor: pointer;
}
.acf-icon {
    font-family: 'dashicons' !important;
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    line-height: 1;
    font-variant: normal;
    text-transform: none;
    vertical-align: middle;
}

.acf-table {
    border-radius: 8px!important;
}
.acf-table td:last-child {
    text-align: right!important;
}
.acf-table > thead > tr > th {
    text-transform: capitalize!important;
}
.az-add-row.button {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 2.15384615;
    min-height: 30px;
    margin: 0 8px 0 0;
    padding: 0 10px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 3px;
    white-space: nowrap;
    box-sizing: border-box;
    }
/* Cho cả post và room dùng chung */
.az-upload-gallery {
  display: flex;
  flex-direction: column;     /* xếp nút và gallery theo hàng dọc */
  align-items: flex-start;    /* canh trái */
}

/* Khoảng cách giữa button và preview */
#az-post-gallery-preview,
#az-room-gallery-list {
    display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  clear: both;      /* <-- buộc xuống dòng mới */
}
.az-gallery-spinner {
  margin: 8px 0;
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  color: #555;
}
.az-gallery-spinner .fa-spinner {
  margin-right: 6px;
}
/* Spinner overlay cho thumbnail */
.az-upload-thumb {
  position: relative;
}
.az-thumb-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.8);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
}
/* Container của mỗi ảnh */
.az-gallery-item {
  position: relative;
  display: inline-block;
  margin: 5px;
}

/* Nút xóa ảnh */
.az-gallery-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 2;
    margin-right: 0em !important;
    min-height: 0em !important;
    padding:0px!important;
    line-height: unset!important;
}
.az-gallery-remove:hover {
  background: rgba(0,0,0,0.8);
}

.wp-editor-tabs {
    display: none !important;
}
/* Bo góc cho toàn bộ khung editor */
#wp-az-post-content-wrap {
    border-radius: 12px !important;
    overflow: hidden; /* Để bo góc cả phần toolbar & editor-content */
    border: 1px solid #e1e1e1; /* (Tùy ý, cho đẹp hơn) */
}

/* Bo góc cho vùng nhập nội dung bên trong */
#wp-az-post-content-editor-container,
#qt_az-post-content_toolbar, /* Toolbar (nếu muốn) */
#az-post-content_ifr, /* iframe visual mode */
#az-post-content { /* textarea html mode */
    border-radius: 0 0 12px 12px !important;
    overflow: hidden;
}

/* Nếu muốn bo góc phần toolbar phía trên */
#wp-az-post-content-editor-tools {
    border-radius: 12px 12px 0 0 !important;
}

.az-switch-wrap{
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.az-switch {
    position: relative;
    display: inline-block;
    width: 92px;
    height: 26px;
    user-select: none;
    margin-bottom: 1.3em!important;
}
.az-switch input { display: none; }
.az-switch-slider {
    position: relative;
    width: 100%;
    height: 100%;
    background: #d4d6dd;
    border-radius: 100px;
    transition: background .4s;
    cursor: pointer;
    display: block;
}
.az-switch input:checked + .az-switch-slider { background: #0074f7; }
.az-switch input:disabled + .az-switch-slider { 
    background: #e4e5e7 !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Text ON/OFF */
.az-switch-text {
    position: absolute;
    top: 0; bottom: 0;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    transition: all .3s;
    pointer-events: none;
    user-select: none;
}
.az-on {
    left: 10px;
    color: #0074f7;
    opacity: 0;
}
.az-off {
    right: 10px;
    color: #888;
    opacity: 1;
}

/* Trạng thái bật */
.az-switch input:checked + .az-switch-slider .az-on {
    color: #fff;
    opacity: 1;
}
.az-switch input:checked + .az-switch-slider .az-off {
    opacity: 0;
}

/* Trạng thái tắt */
.az-switch input:not(:checked) + .az-switch-slider .az-on {
    opacity: 0;
}
.az-switch input:not(:checked) + .az-switch-slider .az-off {
    color: #fff;
    opacity: 1;
}

/* Nút tròn */
.az-switch-slider:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.11);
    transition: left .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.az-switch input:checked + .az-switch-slider:before {
    left: 69px;
}




.az-khach-card {
    display: block;
    align-items: center;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px 0 rgba(40, 44, 46, .078);
    background: #e9ecef;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
}
.az-khach-p-action {
    display: flex;
    justify-content: space-between;
}
.az-khach-phone {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.az-khach-action {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}
.az-btn.az-btn-zalo, .az-btn.az-btn-copy {
    display: flex!important;
    align-items: center;
    margin-bottom: 0em !important;
    background: #fff !important;
    color: #000;
    border: 1px solid #c7ced7;
    padding: 0px 10px !important;
    border-radius: 18px;
    cursor: pointer;
    font-size: 16px;
    margin-right: 0em !important;
    height: 38px;}
.az-btn-zalo img {
    width: 22px; height: 22px; margin-right: 6px;
}
.az-btn-copy, .az-btn-copy-zalo {
    background: #f5f5f6;
    color: #282C2E;
    border: 1px solid #e0e0e0;
}
.az-btn-copy svg, .az-btn-copy-zalo svg {
    margin-right: 3px;
}

.az-khach-extra {
    background: #f5f5f6;
    border-radius: 12px;
    padding: 11px 13px;
    display: block;
    align-items: center;
    font-size: 0.85em;
    color: #333;
}
.az-khach-dt {
    display: flex;
    align-items: center;
  justify-content: space-between;
}
.az-khach-info span {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    color: #282C2E;
    font-weight: 500;
    font-size: 1em;
}
.az-khach-time {
    color: #888;
    font-size: 0.98em;
    font-weight: 400;
}

.az-stat-item {
    display: flex;
    gap: 8px;
    align-items: center;
}
.az-stat-label p {
    margin-bottom:0px!important;
}
.az-stat-item.az-customer-detail-trigger {
    cursor: pointer;
}
.az-stat-dropdown {
    padding-left:10px;
}
.az-dashboard-posts {
  font-family: 'Inter', sans-serif;
  max-width: 100vw;
  padding: 18px;
  background: #f7f8fa;
}

.az-db-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  justify-content: space-between;
}

.az-db-filter-group {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    /* Đảm bảo không bị kéo dãn hơn màn hình */
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding-bottom: 6px; /* Có thể thêm cho scroll bar không che nút */
}

.az-btn-filter {
    flex-shrink: 0;       /* Nút không co lại, luôn nằm 1 dòng */
    white-space: nowrap;  /* Text trong nút không xuống dòng */
}

.az-btn-filter {
  border-radius: 20px;
  cursor: pointer;
  transition: 0.15s;
  border: 2px solid #b0c2d1;
    background: #fff;
    color: #263238;
    font-weight: 500;
    font-size: 14px;
    padding: 4px 22px;
    margin-right: 0em !important;
    line-height: 0em !important;
    margin-bottom: 0em !important;
}


.az-db-sort {
  position: relative;
}
.az-btn-duyet-tin {
margin-bottom: 1.3em !important;
    background: #d09e3f !important;
    padding: 0px 10px !important;
    border-radius: 100px!important;
    cursor: pointer;
    font-size: 14px!important;
    margin-right: 0em !important;
    box-shadow: 0 2px 4px rgba(40, 44, 46, .122), inset 0 2px 2px hsla(0, 0%, 100%, .4);
    border: 1px solid #c1c9d2 !important;
    white-space: nowrap !important;
    color: #fff !important;
    min-height:26px!important;
}
.az-btn-secondary, .az-btn-outline,.az-btn-renew {
margin-bottom: 0em !important;
    background: #fff !important;
    padding: 0px 10px !important;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    margin-right: 0em !important;
    box-shadow: 0 2px 4px rgba(40, 44, 46, .122), inset 0 2px 2px hsla(0, 0%, 100%, .4);
    border: 1px solid #c1c9d2 !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    color: #000 !important;
}
.az-btn-sort, .az-btn-secondary, .az-btn-outline {
  cursor: pointer;
    box-shadow: 0 2px 4px rgba(40, 44, 46, .122), inset 0 2px 2px hsla(0, 0%, 100%, .4);
    color: #000!important;
    background: #fff!important;
    border: 1px solid #eff1f5!important;
 margin-bottom: 0em!important;padding: 0px 10px!important; border-radius: 20px; cursor:pointer; margin-right: 0em!important;
}
.az-btn-sort:hover, .az-btn-sort.active {
    border: 1.5px solid #d09e3f;
    background: #f7f6f3;
}
.az-sort-arrow {
    margin-left: 2px;
    font-size: 14px;
    transition: transform 0.22s cubic-bezier(.4,0,.2,1);
}
.az-btn-sort.open .az-sort-arrow {
    transform: rotate(-180deg);
}

.az-sort-dropdown {
  position: absolute;
  top: 115%;
  left: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px 0 rgba(50,50,50,0.07);
  padding: 9px 0;
  z-index: 99;
  min-width: 150px;
}

.az-sort-item {
  padding: 4px 10px;
  cursor: pointer;
  font-size: 15px;
  color: #111;
  white-space: nowrap;
}

.az-sort-item:hover {
  background: #f3efe3;
  color: #d09e3f;
}

.az-db-actions {
  display: flex;
  gap: 10px;
}


.az-btn-primary { background: #111; }
.az-btn-outline {
  background: #fff;
  color: #d09e3f;
  border: 1.5px solid #d09e3f;
}
.az-btn-secondary {
  background: #f2f5f9;
  color: #111;
  border: 1.5px solid #d9dce0;
}

.az-btn:active { opacity: 0.82; }

.az-db-list {
    width: 100%;
    margin-top: 1rem;
}

.az-post-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 18px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px 0 rgba(60,60,60,.07);
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s;
}
.az-post-card:hover { box-shadow: 0 8px 22px 0 rgba(60,60,60,0.14); }
.az-post-card.az-expired { opacity: 0.67; }

.az-post-card-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
    padding: 20px;
    border-right: 1px solid #f0f0f0;
    position: relative;
    background: #fff;
    z-index: 1;
}
.az-post-main-wrap {
    display: flex;
    gap: 10px;
}
.az-post-info a {
    font-size:16px!important;
}
.az-post-thumb-wrap {
    position: relative;
    margin-bottom: 8px;
    width: 160px;
    height: 104px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.az-post-thumb-wrap input.az-select-row {
    position: absolute;
    width:20px;
    height:20px;
    top: 9px;
    left: 9px;
    z-index: 2;
    accent-color: #111; /* Cho browser hỗ trợ */
    border-radius: 7px;
    border: 2px solid #c1c1c1;
    background: #fff;
    transition: border 0.15s, background 0.15s;
    cursor: pointer;
    box-shadow: 0 1.5px 8px rgba(50,50,50,.07);
}
.az-post-card.selected {
    border: 2.5px solid #d09e3f !important;
    background: #fff8e3;
    box-shadow: 0 2px 14px 0 rgba(208,158,63,0.11);
    transition: border 0.2s, background 0.2s;
}



.az-post-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
    border: 1px solid #ededed;
    background: #f5f5f5;
}
.az-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 8px;
    font-weight: 500;
    vertical-align: middle;
}
.az-badge-vip { background: #c40000; color: #fff; }
.az-badge-success { background: #008549; color: #fff; }
.az-badge-warning { background: #ffc10c; color: #222; }
.az-badge-danger { background: #ee4242; color: #fff; }
.az-badge-outline { background: #fff; border: 1.5px solid #d09e3f; color: #d09e3f; }


.az-post-info {
    width: 100%;
    padding-top: 5px;
}
.az-post-info .flex.gap-2.items-center.mb-2 {
     justify-content: flex-start;
     padding-bottom: 10px;
}
.az-post-title {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: #181818;
    margin-bottom: 5px;
    line-height: 1.35;
    text-decoration: none;
    word-break: break-word;
}
.az-post-title:hover { color: #d09e3f; }
.az-post-desc {
    color: #7e7e7e;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}
.az-post-meta {
    font-size: 13px;
    color: #6a6a6a;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.az-post-meta p {
    margin-bottom: 0em!important;
}
.az-post-card-action {
    position: absolute;
    right: 17px;
    bottom: 0px;
    z-index: 2;
}
.az-action-menu {
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    padding: 6px 9px;
    border-radius: 50%;
    transition: background 0.15s;
    box-shadow: 0 1px 7px 0 rgba(0,0,0,0.03);
}
.az-action-menu:hover { background: #f7f7f7; }
.az-action-menu span {
    display: block;
    width: 20px;
    height: 3.5px;
    background: #bdbdbd;
    border-radius: 6px;
}
.az-action-popup {
    display: none;
    position: fixed;
    min-width: 145px;
    z-index: 10;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 14px 0 rgba(0,0,0,0.18);
    padding: 7px 0;
    animation: fadeIn 0.18s;
}
.az-action-popup a, #az-global-popup a, .az-action-disabled {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    color: #282828;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    white-space:nowrap;
}
.az-action-popup a:hover, #az-global-popup a:hover { background: #f6f5ee; color: #d09e3f; }

.az-post-card-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    min-width: 0;
}
.az-stat-row {
    display: flex;
    gap: 100px;
    margin-bottom: 20px;
    border-radius: 8px;
    background-color: #eff1f5;;
    padding: 4px;
}
.az-stat-label {
    display: block;
    color: #8e8e8e;
    font-size: 13px;
}
.az-stat-val {
    font-size: 17px;
    color: #232323;
    font-weight: 700;
}
.az-btn-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-around;
}

.az-btn-outline {
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    background: #d09e3f;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.18s;
    white-space: normal;
    line-height: 1.35;
}
.az-btn-secondary { background: #232323; }
.az-btn-outline {
    background: #fff;
    color: #232323;
    border: 1.6px solid #e6c278;
}
.az-btn-outline:hover { background: #fff3d8; }

.az-post-expired-info {
    padding: 14px 20px;
    font-size: 15px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 7px;
    border-radius: 8px;
    margin-top: 8px;
    white-space: nowrap;
}
.az-empty-list {
    padding: 34px 0;
    text-align: center;
    font-size: 18px;
    color: #bbb;
}
.az-db-paging-list {
    display: flex;
    gap: 6px;
    margin: 18px 0 0 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.az-db-paging-list a {
    padding: 8px 18px;
    background: #fff;
    color: #232323;
    border-radius: 7px;
    border: 1.5px solid #f0f0f0;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.18s, color 0.18s;
}
.az-db-paging-list a.active {
    background: #d09e3f;
    color: #fff;
    border-color: #d09e3f;
}
/* Responsive mobile: 1 cột, các thành phần căn lại */
@media (max-width: 1000px) {
  .az-db-list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .az-dashboard-posts { padding: 5px; }
  .az-db-actions { width: 100%; justify-content: flex-start; }
  .az-db-list { grid-template-columns: 1fr; gap: 12px; }
}
/* Responsive Mobile */
@media (max-width: 900px) {
    .az-post-card {
        flex-direction: column;
        border-radius: 13px;
    }
    .az-post-card-left, .az-post-card-right {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        padding: 18px 15px;
        border-right: none;
        border-bottom: 1px solid #f2f2f2;
    }
    .az-post-card-right { padding: 15px 15px 16px 15px; }
    .az-stat-row { gap: 20px; justify-content: space-around!important;}
}
@media (max-width: 600px) {
    .az-post-card {
        flex-direction: column;
        border-radius: 9px;
    }
    .az-post-card-left, .az-post-card-right {
        padding: 14px 7px;
    }
    .az-post-thumb-wrap {
        width: 110px;
        height: 77px;
        margin-bottom: 8px;
    }
    .az-post-title { font-size: 16px; }
    .az-db-paging-list a { padding: 7px 10px; font-size: 14px; }
}



/*Quản lý phòng*/
.az-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #d09e3f;
    border-radius: 50%;
    width: 40px; height: 40px;
    animation: az-spin 1s linear infinite;
}
@keyframes az-spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
.az-db-loading {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.65);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}

/* Tabs */
.az-room-detail-tabs {
    margin-bottom: 18px;
    display: flex;
    gap: 10px;
}
.az-room-detail-tabs .az-tab-btn {
    border: 2px solid #b0c2d1;
    background: #fff;
    color: #263238;
    font-weight: 500;
    font-size: 14px;
    border-radius: 12px;
    padding: 4px 22px;
    transition: all 0.2s;
    cursor: pointer;
    outline: none;
    margin-right: 0em!important;
    line-height: 0em!important;
    white-space: nowrap;
}

.az-room-detail-tabs .az-tab-btn.active {
    border-color: #d09e3f;
    color: #d09e3f;
    background: #fff;
    font-weight: 700;
}

.az-room-detail-tabs .az-tab-btn:disabled {
    color: #444;
    border-color: #b0c2d1;
    background: #fff;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Bảng chi tiết */
.az-room-detail-table {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 1px 8px #f1ecc8;
    font-size: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}
.az-room-detail-table tr:not(:last-child) td {
    border-bottom: 1px solid #f3e2bc;
}
.az-room-detail-table td {
    padding: 10px 20px 10px 20px;
    vertical-align: middle;
    color: #374151;
    font-size: 15.5px;
}
.az-room-detail-table td b {
    font-weight: 600;
}

/* Badge trạng thái */
.azroom-badge {
    display: inline-block;
    min-width: 90px;
    text-align: center;
    background: #d09e3f;
    color: #fff;
    padding: 0px 7px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    margin-left: 7px;
    box-shadow: 0 1px 4px #0001;
}

/* Gallery ảnh */
.az-room-detail-gallery {
    margin-bottom: 18px;
}
.az-room-detail-gallery .az-room-img-thumb {
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-block;
    transition: box-shadow .15s;
}
.az-room-detail-gallery .az-room-img-thumb img {
    width: 88px;
    height: 68px;
    object-fit: cover;
    border-radius: 7px;
    background: #faf8f6;
    border: 1px solid #eee;
    transition: box-shadow .18s;
    box-shadow: 0 2px 6px #0001;
}
.az-room-detail-gallery .az-room-img-thumb:hover img {
    box-shadow: 0 4px 18px #d09e3f55;
}

/* Fancybox overlay khi mở ảnh */
.fancybox__backdrop {
    background: rgba(20,20,20,.9) !important;
}

/* Nút xóa */
.az-btn.az-room-delete {
    background: #d09e3f;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 4px 20px;
    font-size: 16px;
    font-weight: 600;
    transition: background .15s;
}
.az-btn.az-room-delete:hover {
    background: #c01d1d;
}
.justify-end {
    justify-content: center!important;
}
/* Responsive bảng chi tiết và ảnh */
@media (max-width: 768px) {
    .az-room-detail-table td {
        font-size: 14px;
        padding: 7px 5px;
    }
    .az-room-detail-gallery .az-room-img-thumb img {
        width: 68px;
        height: 52px;
    }
    .az-rooms-header {
    justify-content: space-evenly!important;
    display: block!important;
}
.az-button-wrap {
    margin-top:10px;
}
}

/* Khối loading luôn nằm giữa popup */
.az-popup-loading {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.7);
    z-index: 99;
    font-size: 25px;
    min-height: 140px;
    color:#fff;
    white-space: nowrap;
}

/* Mờ nội dung form khi loading */
.az-room-popup-blur {
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
    transition: filter 0.2s, opacity 0.2s;
}
.az-rooms-header, .az-rooms-stats { display: flex; flex-wrap: wrap; align-items: center;gap: 20px;justify-content: center;
    align-content: center; }
    .az-rooms-header { margin-bottom:15px; }
.az-rooms-wrap label {
    white-space:nowrap;
}
.az-rooms-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.az-button-wrap {
    display: flex;
    justify-content: space-between;
    gap:10px;
}
#az-service-building-select, .az-rooms-header select, #az-contract-building-select, #az-contract-room-select, #az-tenant-building-select, #az-tenant-room-select, #az-asset-building-select, #az-asset-room-select
, #az-invoice-building-select, #az-invoice-period-select, #az-receipt-building-select, #az-receipt-period-select, #az-rep-building-select, #az-svc-period-select, #az-inv-period-select
, #az-schedule-building-select, #az-schedule-room-select, #az-booking-building-select, #az-booking-room-select, #az-task-building-select, #az-task-room-select
{ padding: 4px 12px; border-radius: 8px; border: 1px solid #ddd;height: 2rem!important;margin-bottom: 0em!important; }
/* Tab filter */
.az-room-filter-bar {  /* target luôn selector cũ để tránh bug */
    display: flex !important;
    gap: 10px;
    background: #f3f5f8;
    border-radius: 16px;
    padding: 10px 0px 10px 15px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    /* Đảm bảo không bị kéo dãn hơn màn hình */
    width: 100%;
    box-sizing: border-box;
}

.az-btn-filter.active,
.az-btn-filter:hover,
.az-tab-filter.active,
.az-tab-filter:hover {
    color: #fff;
    background:#d09e3f;
}

/* Room list & card */
.az-room-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 20px;
}
.az-room-card {
    cursor: pointer;
}

.az-room-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 16px 0 rgba(30,34,40,0.07);
    padding: 28px 32px;
    margin-bottom: 0;
    gap: 28px;
}
.az-room-thumb {
    width: 170px;
    aspect-ratio: 16/9;
    min-width: 170px;
    background: #eee;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.az-room-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.az-room-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.flex.gap-2.items-center.mb-2 {
    justify-content: space-between;
    align-items: stretch;
    white-space: nowrap;
}
.w-full.mt-2.border.rounded {
    margin-bottom: 0em!important;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 0px 20px;
    white-space: nowrap;
}
.az-room-row {
    display: flex;
    gap: 18px;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
}
.az-room-title { font-size: 22px; font-weight: 700; color: #222; }
.az-inv-room-item {
    display:flex;
    justify-content: center;
    align-items: center;
    border:1.5px solid #f2f2f2;
    border-radius:12px;
    padding: 5px 10px;
    gap:10px!important;
    margin-bottom:10px;
}
.az-room-status {
background: #e74c3c;
    width: fit-content;
    padding: 0px 10px;
    border-radius: 8px;
    color: #fff;
}
.az-room-note {
    color: #888;
    font-size: 15px;
    margin-left: 8px;
}
.az-room-desc {
    display: flex;
    gap: 22px;
    font-size: 15.5px;
    color: #555;
}
.az-room-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.az-btn-room {
    min-width: 90px;
    background: #b5e352;
    color: #fff;
    border: none;
    border-radius: 13px;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 0;
    cursor: pointer;
    transition: background 0.18s;
}
.az-btn-room:hover { background: #8ec53f; }
.flex {
    gap:8px;
}

/*Quản lý tòa nhà*/
.az-rule-upload {
    overflow: hidden;
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background: #f1ecc8;
}
.az-r.az-row-full label {
    display:flex;
    align-items: center;
    gap: 4px;
}
.az-rule-upload-list {
    list-style: inside;
    margin-bottom: 0em !important;
}
.az-rule-upload-list li {
    margin-bottom: 0em !important;
    font-size: 14px;
}
.az-select-row, #az-select-all { vertical-align: middle; }
.az-db-paging-list {
    text-align: center;
    padding: 8px 0;
}
.az-db-paging-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.az-db-paging a {
    margin: 0 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: #e9e5dd;
    color: #144c91;
    text-decoration: none;
}
.az-db-page.active, .az-db-page:hover { background:#f7c56b; color:#c2780c; }
.az-db-table th, .az-db-table td { text-align:left; vertical-align:middle; }
.az-db-table th { background:#faedcd; }
.az-db-table input[type=checkbox] { transform:scale(1.2); margin-right:0px; margin-bottom:5px!important; }

.az-dashboard-buildings { font-family: 'Inter', sans-serif; max-width:900px; }
.az-db-sa-wrapper {
    display:flex;
}
.az-db-search {
    flex: 1 1 0;  /* Cho phép search dãn ra lấy khoảng trống còn lại */
    margin-right: 0em;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #d09e3f;
    color: #fff!important;
    padding: 10px;
    height: 2rem!important;
    min-width: 200px;
    max-width: 700px;
}
.az-db-search input.az-search-input {
    width: 100%;
    min-width: 120px;
    flex: 1 1 0;
    border-radius: 8px!important;
    padding: 7px 12px;
    border: 1px solid #ccc;
    height: 20px!important;
    font-size: 14px!important;
    margin-bottom: 0!important;
}
.az-db-filter {
    display: flex;
    white-space: nowrap;
    gap:10px;
}
.az-db-filter label {
    margin-bottom:0px!important;
    display:flex;
    gap:5px;
    align-items: center;
}
#az-filter-registered {
    margin-bottom:0px!important;
    border-radius:8px;
}
@media (max-width: 768px) {
    .az-db-search, .az-db-actions, .az-rooms-wrap {
        flex: 1;  /* Cho phép search dãn ra lấy khoảng trống còn lại */
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        margin: 0;
        justify-content: flex-start; /* Hoặc space-between nếu muốn dàn đều */
    }
}

.az-btn.az-btn-search {padding: 0 0.3em !important;
    margin-top: 0px;
    margin-bottom: 0em !important;
    margin-right: 0em !important;
    background: transparent;}
    .az-btn:hover, .az-btn-main:hover {
    background: #d09e3f;}
.az-db-actions { display: flex; gap: 15px;justify-content: space-between;}
.az-btn { justify-content: center;line-height: 2em!important;min-height: 2em!important;white-space: nowrap;margin-bottom: 0em!important;background: #d09e3f; color: #fff; border: none; padding: 0px 5px!important; border-radius: 8px; cursor:pointer; font-size:16px;margin-right: 0em!important; 
    display: flex;
    align-items: center;
    gap: 3px;
}
.az-db-table-outer {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid #eee;
  overflow: hidden;
  margin-bottom: 20px;
}
.az-db-table-wrap { width: 100%;overflow-x:auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: #d09e3f #f1ecc8;}
  .az-db-table-wrap::-webkit-scrollbar {
  height: 10px;
  border-radius: 8px;
}
.az-db-table-wrap::-webkit-scrollbar-thumb {
  background: #d09e3f;
  border-radius: 8px;
}
.az-db-table-wrap::-webkit-scrollbar-track {
  background: #f1ecc8;
  border-radius: 8px;
}
.az-db-paging-list li {margin-left:0px!important;}
.az-db-footer{
position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 12px 8px 12px;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .04);
    border-radius: 12px;
    justify-content: space-between;
}
.az-db-footer-left{ display:flex; align-items:center; gap:10px; }
.az-db-footer-left label, .az-db-footer-right{ font-weight: 500;color:oklch(70.5% .015 286.067)!important; margin-bottom: 0em!important;font-size:0.9rem!important;white-space: nowrap; }
.az-db-footer-left select { margin-bottom: 0em!important;border-radius:8px;}
@media (max-width: 768px){
  .az-db-footer{
    flex-wrap: wrap;
    padding: 12px 12px;
    gap: 10px 12px;
  }

  /* Hàng 1: phân trang chiếm full + canh giữa */
  .az-db-footer-bottom{
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Hàng 2: trái = select (chiếm vừa đủ), phải = info (ăn phần còn lại) */
  .az-db-footer-left{
    order: 2;
    flex: 0 1 auto;     /* <-- KHÔNG 50% nữa */
    min-width: 0;
    display:flex; align-items:center; gap:8px;
  }
  .az-db-footer-right{
    order: 3;
    flex: 1 1 0;        /* ăn phần còn lại */
    min-width: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;   /* nếu chật sẽ ... */
    text-overflow: ellipsis;
  }

  /* Nút trang & select dễ bấm hơn */
  .az-db-paging-list .az-db-page{
    min-width: 40px; height: 40px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius: 10px;
  }
}

/* Rất nhỏ thì rút gọn text + ẩn nhãn */
@media (max-width: 360px){
  .az-db-footer-left label{ display:none; }
  .az-db-footer-right{ font-size:12px; }
}


.az-db-table { width: 100%; border-collapse: separate;border-spacing: 0;}
.az-db-table th, .az-db-table td { padding: 10px 12px; text-align:left;text-transform: capitalize;white-space: nowrap;z-index: 1; }
.az-db-table th.az-sticky-action,
.az-db-table td.az-sticky-action {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff; /* Đảm bảo nổi khi scroll */
  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
}
.az-db-table thead { background: #f1ecc8; color: #000;white-space: nowrap; }
.az-db-table tbody tr:nth-child(even) { background: #f8fafb; }
.az-db-table input[type="text"] { padding:3px 7px; border-radius:4px; border:1px solid #eee; width:100%; }
.az-action-menu { background: none; border:none; cursor:pointer; padding:8px 8px; display: flex; flex-direction:column; gap:3px;}
.az-action-menu span { width:4px; height:4px; border-radius:99px; background:#444; display:block; }

.az-actions {
    position: relative; /* Để absolute của popup lấy mốc theo .az-actions */
}

#az-post-popup, #az-building-popup, #az-room-popup, #az-service-popup, #az-tenant-popup, #az-asset-popup, #az-contract-popup  {display:none; Width:700px;position:relative;}
.azroom-booking-form, #az-task-form, #az-contract-info-content, .az-receipt-form, #az-quick-lead-form, #az-schedule-form, #admin-deposit-form, #az-building-form, #az-room-form, #az-post-form, #az-service-form, #az-tenant-form, #az-asset-form, #az-contract-form {
        flex: 1 1 auto;
    overflow: auto;
    padding: 0px 20px;
    contain: content;
    scrollbar-width: thin;
    scrollbar-color: #d09e3f #f1ecc8;
}
.az-building-form.az-grid-2col { display: flex; flex-wrap: wrap; gap: 28px 32px;}
.az-building-form .az-row { margin-bottom:0px;}
.az-checkbox-list label { margin-right:10px; margin-bottom:6px; display:inline-block;}
.az-upload-thumb, .az-upload-gallery { display:flex; align-items:center; gap:9px;justify-content: center; }
.az-upload-btn, .az-remove-thumb { font-size:13px; padding:4px 14px;}
.az-form-actions.az-full [type=submit], .az-form-actions.az-full [type=button], .az-row.az-form-actions [type=submit] {
    margin-bottom: 0em!important;background: #d09e3f!important;margin-right: 0em!important;padding:0px 15px;
}
.az-row input[type='text'], .az-row input[type='number'], .az-row select, .az-row textarea {border-radius:8px;}
.az-btn.az-upload-btn, .az-btn.az-gallery-add {
    background: #f1ecc8!important;
    border: 2px dashed #d09e3f!important;
    border-radius: 12px;
    width: 100%;
    height: 100px;
    margin-right:0px!important;
}

@media (max-width: 767px) {
    .az-building-form.az-grid-2col { flex-direction: column; gap:12px;}
    .az-building-form > div { min-width:0;}
}
.az-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
    padding-top: 20px;
}
.az-row-full {
    grid-column: 1/-1;
    margin-top: 12px;
}
@media (max-width: 767px) {
    .az-form-grid-2col {
        grid-template-columns: 1fr;
    }
    .az-row-full {
        grid-column: 1/-1;
    }
    #az-building-form, #az-room-form, #az-post-form, #az-service-form, #az-tenant-form, #az-asset-form, #az-contract-form {width:auto!important; padding:0rem 1rem!important;}
}

/* Tin thường – xám nhạt chữ đen */
.badge-normal {
  background: #f0f0f0;
  color: #333;
}

/* Tin nổi bật – vàng chữ đen */
.badge-featured {
  background: linear-gradient(179deg, #ffd913 1.11%, #f90 98.66%);
  color: #fff;
}

/* Xác thực – xanh lục chữ trắng */
.badge-verified {
    background: linear-gradient(267deg, #75D99F -4.52%, #219150 77.25%);
    color: #FFF;
}

/* Ưu tiên – xanh dương chữ trắng */
.badge-priority {
  background: linear-gradient(267deg, #00f2ff -4.52%, #0051ff 77.25%);
  color: #fff;
}
.badge-priority .az-icon-priority{width:16px;height:16px;margin-right:4px;vertical-align:-2px}


/* VIP – tím chữ trắng */
.badge-vip {
  background: linear-gradient(270deg, #ffc700 0%, #fd550a 44.61%, #ff2a01 100%);
  color: #fff;
}
.badge-vip .az-icon-vip{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.badge-featured .az-icon-featured{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
/* Để icon không quá sát text */
.badge-normal,
.badge-featured,
.badge-verified,
.badge-priority,
.badge-vip {
  display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 6px;
    margin-right: 3px;
}
@media (max-width:768px) {
    /* Để icon không quá sát text */
.badge-normal,
.badge-featured,
.badge-verified,
.badge-priority,
.badge-vip {
    font-size: 11px!important;
    padding: 1px 6px!important;
}
}
#postexcerpt, #woocommerce-product-data {
    display:none!important;
}
.lien_he_xem_phong .lien_he_xem_phong_title{
border-bottom: 1px solid #e6e8ea;;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
       text-align: center;
    font-weight: 700;
    font-size: 20px;
    color: #d09e3f!important;
}
.user-owner-listed {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; 
    text-align: center;
}
.user-owner-list { background: #f3f4f7;border-radius: 2px; padding:  8px 15px 8px 15px;display:block;}
.user-owner-list:after { clear: both; width: 100%; content: ''; display:table}

.user-owner-list p { color:#30333a; margin-bottom: 0px;}
.user-owner-list .ava-user { float: left; width: 66px; height:66px; border-radius: 50%;  }
.user-owner-list .sidebar-agent-avatar{
	float: left;
    text-align: center;
    position: relative;
    min-width: 74px;
    width: 74px;
    height: 74px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background: -webkit-gradient(linear, left top, right top, from(#c72528), to(#ffa3fd));
    background: linear-gradient(to right, #c72528, #ffa3fd);
}
.user-owner-list .sidebar-agent-info{
	float: right;
    display: inline-block;
    width: calc(100% - 74px);
    padding-left: 20px;
}
.user-owner-list .agent-status{
	
	background: #24a148;
    position: absolute;
    top: 6px;
    right: 3px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.name-us { font-size: 18px; font-weight: 600; margin-top: 0px}
.user_title_pos{
display:block;
float:left;
color: #838383;
}
.hotline {
    display:flex;
    justify-content: center;
    text-align: center;
    border: none;
	color:#ffffff;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 10px 0;
    font-weight: bold;
	margin-top:0px;
	font-size:18px;
	gap:20px;
}
.hotline a:link,.hotline a:visited{
	color:#ffffff;
}
.avatar-verify-wrap {
    position: relative;
    display: inline-block;
}

.avatar-verify-wrap img {
    display: block;
    border-radius: 50%;
    width: 100px; /* hoặc chiều rộng avatar của bạn */
    height: 100px;
    object-fit: cover;
}

.badge-xacthuc {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    background: #16c5b9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #fff; /* viền trắng cắt vào avatar */
    z-index: 2;
    font-size: 1.3em;
}
.badge-xacthuc .fa-check, .badge-xacthuc .fa-xmark {
    color: #fff;
    font-size: 1.2em;
    line-height: 1;
}

.tong-quan {
background: white;
    margin: 0px 0px 20px 0px;
    border-radius: 8px;
    box-shadow: 0 2px 16px 0 rgba(170, 170, 170, .2);
    border: 1px solid rgba(48, 51, 58, .2);
    padding: 10px 20px;
    }
#bando_iframe {
    border-radius:8px!important;
}


.az-tab-btn {
   padding: 10px 15px;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-weight: 500;
    color: #333;
    background: transparent;
    margin-bottom: 0px;
    margin-left: 0px !important;
}

.az-tab-btn svg {
    margin-right: 8px;
}

.az-tab-btn.active {
    background: #d2993f;
    color: #fff;
    border-radius: 5px;
    margin-right: 0em;
}

.az-tab-btn:not(.active):hover {
    background: #f1ecd6;
    color: #bfa046;
}

@media (max-width: 700px) {
    .az-tabs {
        padding: 6px 6px;
        gap: 7px;
    }
    .az-tab-btn {
        font-size: 16px;
        padding: 10px 12px;
    }
}

.az-stat-group {
    display: flex;
    gap: 24px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.az-stat-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 4px;
}

.az-stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.bg-receipt { background: #97ca4b; }
.bg-payment { background: #ffa600; }
.bg-profit  { background: #4caf50; }

@media (max-width: 1100px) {
    .az-stat-icon { width: 38px; height: 38px; font-size: 16px; }
}

@media (max-width: 768px) {
    .az-stat-group { flex-direction: column; gap: 14px; }
    .az-stat-box { width: 100%; min-width: unset; }
}
.az-btn-group-filter {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .az-thu-chi {
        display:block!important;
    }
    .az-btn-group-filter {
        display: flex;
    }
    .az-btn-main, .az-btn-orange {
        margin:0px!important;
        
    }
}

/*bảng thu chi*/
.az-table-receipts-admin,
.az-table-payments-admin {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.az-table-receipts-admin thead tr,
.az-table-payments-admin thead tr {
    background: #fcf6e8;
}

.az-table-receipts-admin th,
.az-table-payments-admin th {
    color: #c59a25;
    font-weight: 700;
    font-size: 16px;
    padding: 18px 14px;
    border: none;
    text-align: center;
    background: #fcf6e8;
    text-transform: capitalize;
      white-space: nowrap;
}

.az-table-receipts-admin td,
.az-table-payments-admin td {
    font-size: 14px;
    color: #555;
    padding: 20px 14px;
    border-bottom: 1px solid #f2eac7;
    text-align: center;
    background: #fff;
      white-space: nowrap;
}

.az-table-receipts-admin tr:last-child td,
.az-table-payments-admin tr:last-child td {
    border-bottom: none;
}

.az-table-receipts-admin td .az-status,
.az-table-payments-admin td .az-status {
    display: inline-block;
    background: #f3c43b;
    color: #fff;
    font-weight: 600;
    padding: 10px 32px;
    border-radius: 10px;
    font-size: 18px;
    border: none;
    margin: 0;
    min-width: 150px;
}

.az-table-receipts-admin a.az-admin-receipt-view,
.az-table-payments-admin a.az-admin-payment-view {
    display: inline-block;
    background: linear-gradient(90deg, #c59a25 0%, #e6c261 100%);
    color: #fff;
    font-weight: bold;
    padding: 10px 32px;
    border-radius: 30px;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 2px 8px 0 rgba(197,154,37,0.14);
    transition: filter .18s;
}
.az-table-receipts-admin a.az-admin-receipt-view:hover,
.az-table-payments-admin a.az-admin-payment-view:hover {
    filter: brightness(0.92);
}

@media (max-width: 768px) {
    .az-table-receipts-admin th,
    .az-table-receipts-admin td,
    .az-table-payments-admin th,
    .az-table-payments-admin td {
        font-size: 16px;
        padding: 10px 6px;
    }
    .az-table-receipts-admin td .az-status,
    .az-table-payments-admin td .az-status {
        min-width: 90px;
        font-size: 14px;
        padding: 7px 14px;
    }
    .az-table-receipts-admin a.az-admin-receipt-view,
    .az-table-payments-admin a.az-admin-payment-view {
        font-size: 16px;
        padding: 8px 18px;
    }
}


.az-form-group {margin-bottom:16px;}
.az-form-group label {display:block;font-weight:600;margin-bottom:4px;}
.az-btn-main {background:#97ca4b;color:#fff;border:none;padding:7px 16px;border-radius:6px;cursor:pointer;font-weight:600;}
.az-btn-main {background:#97ca4b;display: flex;align-items: center;gap: 5px;margin-right:0px!important;}
.az-btn-orange {margin-right:0px!important;background:#ffa600;color:#fff;border:none;padding:7px 16px;border-radius:6px;cursor:pointer;font-weight:600;display: flex;align-items: center;gap: 5px;}
#az-invoice-services table {border-collapse:collapse;width:100%;margin-bottom:8px;font-size:14px;}
#az-invoice-services th, #az-invoice-services td {border:1px solid #e0dab7;padding:6px;text-align:center;}
#az-invoice-services th {background:#f6f5ed;}
.svc_remove {color:#d32f2f;background:none;border:none;font-size:16px;cursor:pointer;}
/* ==========================
   BẢNG DANH SÁCH PHIẾU THU
   ========================== */

.az-table-receipts {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    font-size: 16px;
}
.az-table-receipts th,
.az-table-receipts td {
    padding: 12px 10px;
    border-bottom: 1px solid #f3e9c7;
    text-align: left;
    white-space: nowrap;
}
.az-table-receipts th {
    background: #faf6ea;
    color: #b69539;
    font-weight: 700;
}
.az-table-receipts tr:hover td {
    background: #fcf9f0;
}
.az-table-receipts td .badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    width: auto;
}
.badge-success { background: #23b05a; }
.badge-danger  { background: #e0524e; }
.badge-warning { background: #f6be49; color: #8a651a; }

.az-receipt-action-btn {
    margin-right: 6px;
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: #f7e8c2;
    color: #b69539;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.az-receipt-action-btn:hover {
    background: #b69539;
    color: #fff;
}

/* ==========================
   POPUP CHI TIẾT PHIẾU THU
   ========================== */
.receipt-detail {
  font-family: sans-serif;
  color: #333;
  background: #fff;
  padding: 24px 24px 12px 24px;
  border-radius: 8px;
  max-width: 600px;
}
.receipt-header {
  text-align: center;
  margin-bottom: 10px;
}
.receipt-header img {
  max-height: 50px;
  margin-bottom: 8px;
}
.receipt-header h1 {
  font-size: 22px;
  margin: 0;
  color: #be9930;
}
.receipt-no {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.receipt-info-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 18px;
  font-size: 16px;
}
.receipt-info-table tr {
  border-bottom: 1px solid #ecd391;
}
.receipt-info-table td {
  padding: 12px 10px 10px 0;
  color: #222;
  background: none;
  vertical-align: middle;
  border: none;
  font-weight: 500;
}
.receipt-info-table td b {
  color: #222;
  font-weight: 700;
  min-width: 110px;
  display: inline-block;
}
.receipt-info-table td span {
  color: #666;
  font-weight: 400;
  margin-left: 8px;
}


.receipt-service-table th,
.receipt-service-table td {
  border: 1px solid #ddd;
  padding: 7px 8px;
  font-size: 14px;
  text-transform: capitalize;
}
.receipt-service-table th {
  background: #faf6ea;
  color: #b69539;
  text-align: left;
  font-weight: 700;
}
.receipt-service-table tbody tr:nth-child(even) td {
  background: #fcf9f0;
}
.receipt-actions {
  text-align: center;
  margin-top: 18px;
  margin-bottom: 6px;
}
.receipt-actions .az-receipt-action-btn {
      margin-left: 6px;
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    background: #f7e8c2;
    color: #b69539;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    margin-bottom: 0px !important;
    line-height: 1.3;
}
.receipt-actions .az-receipt-action-btn:hover {
  background: #b69539;
  color: #fff;
}

/* Badge trạng thái phiếu thu */
.az-table-receipts .badge {
    display: inline-block;
    min-width: 74px;
    padding: 5px 14px 5px 14px;
    border-radius: 99px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: #bebebe;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07);
    border: none;
    letter-spacing: .5px;
    transition: background .2s;
}
.az-table-receipts .badge-success {background: #3aaa4c;}
.az-table-receipts .badge-warning {background: #efc140; color:#fff;}
.az-table-receipts .badge-danger  {background: #e14c42;}

/* Nút "Xem" */
.az-table-receipts .az-btn-view {
    display: inline-block;
    padding: 5px 18px;
    border-radius: 22px;
    background: linear-gradient(90deg,#be9930 60%,#f1ecc8 120%);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: none;
    box-shadow: 0 1px 3px 0 rgba(190,153,48,0.12);
    transition: background .2s, color .2s;
    outline: none;
}
.az-table-receipts .az-btn-view:hover,
.az-table-receipts .az-btn-view:focus {
    background: linear-gradient(90deg,#b88f15 70%,#ffe7a5 120%);
    color: #fff !important;
    box-shadow: 0 2px 6px 0 rgba(190,153,48,0.21);
}



/* ===== Nhật ký hoạt động AZHouse ===== */
.az-activity-log-wrap {
    background: #fff;
    border-radius: 18px;
    max-width: 950px;
    margin: 15px auto;
}
.az-activity-log-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    font-size: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.az-activity-log-table th, .az-activity-log-table td {
    padding: 14px 20px;
    text-align: left;
}
.az-activity-log-table th {
    background: #f1ecc8;
    font-weight: 700;
    color: #22223b;
    text-transform: capitalize;
    letter-spacing: .03em;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}
.az-activity-log-table tbody tr {
    transition: background .2s;
    border: 1px solid #f1f5f9;
}
.az-activity-log-table tbody tr:last-child {
    border-bottom: none;
}
.az-activity-log-table tbody tr:hover {
    background: #e8f0fe;
}
.az-activity-log-table td {
    color: #374151;
    vertical-align: middle;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid #f1ecc8;
}
.az-activity-log-action {
        display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 500;
    font-size: 12px;
}
.az-activity-log-icon {
    font-size: 1.22em;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 50%;
}
.az-activity-log-ip, .az-activity-log-device {
    color: #64748b;
    font-size: 14px;
    cursor: help;
    white-space: nowrap;
}
.az-activity-log-device {
    font-weight: 500;
    white-space: normal;
}
.az-activity-log-device small {
    display: block;
    font-size: 12px;
    color: #b3b3b3;
    word-break: break-all;
    margin-top: 2px;
}
@media (max-width: 800px) {
    .az-activity-log-wrap {padding:14px 2px;}
    .az-activity-log-table th, .az-activity-log-table td {padding: 10px 7px;}
    .az-activity-log-table th {font-size:13px;}
    .az-activity-log-action {font-size: 12px;}
    .az-activity-log-table {font-size:12px;}
}
@media (max-width: 600px) {
    .az-activity-log-table, .az-activity-log-table thead, .az-activity-log-table tbody, .az-activity-log-table tr, .az-activity-log-table th, .az-activity-log-table td {
        display: block;
    }
    .az-activity-log-table tr { margin-bottom: 10px;}
    .az-activity-log-table td {
        border: none;
        padding: 10px 10px 10px 48%;
        position: relative;
    }
    .az-activity-log-table td:before {
        position: absolute;
        left: 12px;
        top: 12px;
        width: 45%;
        font-weight: bold;
        color: #475569;
        content: attr(data-label);
    }
    .az-activity-log-table th { display: none; }
}


/*giới thiệu bạn bè*/
.az-referral-box {margin:30px auto;padding:30px 40px;background:#fff;border-radius:12px;box-shadow:0 6px 32px rgba(0,0,0,.09);}
.az-referral-code-wrapper {margin: 0 auto 15px;text-align:center;}
.az-referral-code{background: #d2a546; color: #fff; padding: 5px 20px; font-size: 2rem; border-radius:18px; display:inline-block; font-weight: bold;}
.az-referral-code h2 {font-size:1.1rem;font-weight:400;opacity:.95;}
.az-referral-link {margin-bottom:12px;display:flex;align-items:baseline;justify-content:center;gap:8px;}
#az-ref-link {width:480px;padding:10px;font-size:1.1rem;border:1.5px solid #d2a546;border-radius:6px;margin-bottom: 0px!important;}
#az-ref-copy {border:none;background:none;font-size:2rem;cursor:pointer;margin-bottom: 0px!important;min-height:2rem!important;
    margin-right: 0em!important;
    padding: 0px!important;
    margin-left:10px;
}
.az-share span {display: flex;align-items: center;justify-content: center;padding-bottom:5px;}
.az-share-link {display:flex;align-items:center;justify-content:center;gap:8px;}
#az-ref-qr {display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #d09e3f;
    color: #fff;
    font-size: 16px;
    transition: background 0.2s ease;
    text-decoration: none;
    cursor:pointer;
    margin-bottom: 0px!important;
    margin-right: 0px!important;
}
.az-share-link a {display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #d09e3f;
    color: #fff;
    font-size: 16px;
    transition: background 0.2s ease;
    text-decoration: none;}
    .az-referral-history th, .az-invite-table th {
    background: #f7f6f1;
    font-weight: 700;
    color: #22223b;
    text-transform: capitalize;
    letter-spacing: .03em;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    padding: 14px 20px;
    text-align: left;
}

.az-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
.az-spinner svg {
  animation: az-spin 0.9s linear infinite;
}
@keyframes az-spin { 100% { transform: rotate(360deg); } }
.az-load-more-btn {
  background: #fff6e6;
  color: #b48c26;
  border: 1px solid #efd780;
  border-radius: 7px;
  padding: 7px 30px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.az-load-more-btn:disabled {
  background: #f8f8f8;
  color: #bbb;
  cursor: not-allowed;
  border: 1px solid #f0f0f0;
}
/* Voucher CSS */
.az-voucher-wrapper {
  padding: 1rem;
  background: #ffffff;
  border-radius: 8px;
}

/* Tiêu đề */
.az-voucher-wrapper h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.rank-label {
  color: #10b981;
  text-transform: uppercase;
}

/* Lưới voucher */
.az-voucher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1rem;
}

/* Card voucher */
.az-voucher-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform .2s, box-shadow .2s;
}
.az-voucher-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.az-voucher-card h3 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

/* Button copy mã */
.az-voucher-btn {
  display: inline-block;
  margin-top: .75rem;
  padding: .5rem 1rem;
  background-color: #10b981;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: .9rem;
  transition: background .2s;
}
.az-voucher-btn:hover {
  background-color: #059669;
}


/*Popup chi tiết hợp đồng*/
.fancybox__content {
    border-radius:8px;
    padding:0px!important;
}
.fancybox__content h2 {
    text-align: center;
    background: #d09e3f;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #fff;
    padding:10px;
    margin-bottom: 0px;
}
.az-contract-detail-box {
    padding:10px 36px;
}

/*1.Thông tin hợp đồng*/
.az-popup-contract-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin: 0px 0 18px 0;
    font-size: 16px;
}
.az-popup-contract-table td {
    background: #fff;
    border: none;
    padding: 12px 18px 12px 0;
    border-bottom: 1px solid #f6e6b6;
    vertical-align: middle;
}
.az-popup-contract-table tr:last-child td {
    border-bottom: none;
    padding-bottom: 16px;
}
.az-popup-contract-table b {
    color: #302d19;
    font-weight: 600;
    min-width: 92px;
    display: inline-block;
}
.az-popup-contract-table a {
    background:#d09e3f;
    color:#fff;
    border-radius:10px;
    font-weight:700;
    padding:2px 10px;
    text-decoration: underline;
}
.az-contract-status {
    font-size: 15px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    display: inline-block;
    background: #ededed;
    color: #333;
}
.az-contract-status.active {background:#17a589;color:#fff;}
.az-contract-status.pending {background:#e67e22;color:#fff;}
.az-contract-status.expired {background:#c0392b;color:#fff;}

/*2.Thông tin khách thuê & dịch vụ*/
.az-popup-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 18px 0;
    font-size: 14px;
    background: #fff;
}
.az-popup-table th, .az-popup-table td {
    border: 1px solid #f2e9be;
    padding: 8px 10px;
    text-align: left;
        white-space: nowrap;
}
.az-popup-table thead th {
    background: #faf8f3;
    font-weight: bold;
    text-transform: capitalize !important;
}
.az-popup-table tr:nth-child(even) td {
    background: #fcfcf7;
}
.az-popup-table td {
    font-size: 12px;
}

/* Tối ưu UX – Style cho bảng hợp đồng*/
/* Wrapper cho scroll ngang mobile */
.az-table-responsive, .az-tab-content.az-tab-content-receipts, .az-tab-content.az-tab-content-payments {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table chuẩn, border, đẹp, đồng bộ Flatsome */
.shop_table_responsive {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    background: #f9f8f3;
    table-layout: auto;
    font-size: 16px;
}

.shop_table_responsive th,
.shop_table_responsive td {
    padding: 8px 10px;
    text-align: left;
    border: 1px solid #ebddae;
    background: #fff;
    white-space: nowrap;
}

.shop_table_responsive th {
    background: #faf8f3;
    font-weight: 600;
    color: #23221e;
    text-transform: capitalize;
    border-width: 1px !important;
    font-size:14px;
}
.shop_table_responsive td {
   font-size:12px;
}
.shop_table_responsive tr:nth-child(even) td {
    background: #f7f3e7;
}

.shop_table_responsive tr:hover td {
    background: #fffde7;
}

.shop_table_responsive a {
    color: #000;
    text-decoration: underline;
    border-radius: 10px;
}


/* Responsive: bảng có scroll ngang, không vỡ layout */
@media (max-width: 768px) {
    .az-table-responsive {
        margin-bottom: 16px;
    }
    .shop_table_responsive {
        min-width: 600px; /* Hoặc tăng lên nếu nhiều cột */
        font-size: 14px;
    }
    .shop_table_responsive th,
    .shop_table_responsive td{
        padding: 9px 7px;
        white-space: nowrap;
    }
}


/*Tạo trang hướng dẫn*/
@media (max-width: 768px) {
  .az-guide-wrapper {
    display:block!important;
}
.az-guide-content {
    padding:1rem 0rem;
}
.az-guide-sidebar, .az-guide-content {
    width: 100%!important;
}
  }
  
 .az-guide-content {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #f7f7f7;
    box-shadow: rgba(50, 50, 105, 0.15) 1px 2px 5px 1px, rgba(0, 0, 0, 0.05) 1px 1px 1px 2px;
    width:75%;
}
.az-guide-wrapper {
    padding: 1rem 3rem;
}
.az-guide-sidebar {
  width: 30%;
  border-radius: 8px;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.guide-tree,
.guide-tree ul {
  list-style:none; margin:0; padding:0;
}
.guide-tree li {
  position:relative; margin-bottom:6px;
  background:#d09e3f;
  border-radius:4px;
}
.guide-tree > li > a {
  display:block; padding:8px; border-radius:4px;
  text-decoration:none; color:#fff;
  font-weight:600;
}
.guide-tree .sub-menu {
  display:none;
  padding: 4px 8px;
}
.guide-tree .menu-item-has-children > a:after {
  content:'▾'; float:right;
}
.guide-tree .opened > a:after {
  content:'▴';
}
.guide-tree .sub-menu li a {
  background:transparent; padding: 4px 8px;; color:#000;
}


.az-breadcrumb {
  font-size: 14px;
  margin: 16px 0;
  padding:0rem 3rem;
}
.az-breadcrumb a {
  color: #0066cc;
  text-decoration: none;
}
.az-breadcrumb span {
  color: #333;
}


/*Tiện ích Siderbar*/
.widget.widget_categories ul {
    padding-left:0.5rem;
}
.cat-item.cat-item-425:before {
  content: "\f518";
  font-family: "Font Awesome 6 Free";
  font-size:1.1em;
  position:absolute;
  margin-top: 5px;
}
.cat-item.cat-item-430:before {
  content: "\f559";
  font-family: "Font Awesome 6 Free";
  font-size:1.1em;
  position:absolute;
  margin-top: 5px;
}
.cat-item.cat-item-1:before {
  content: "\f1ea";
  font-family: "Font Awesome 6 Free";
  font-size:1.1em;
  position:absolute;
  margin-top: 5px;
}
.cat-item.cat-item-425 a, .cat-item.cat-item-430 a, .cat-item.cat-item-1 a {
  padding-left:1.5rem!important;
}
.product_list_widget .gia-tu {
    align-items: center;
}
.star-rating span:before {
    color: #d09e3f!important;
}
.title-trangchu {
    padding-bottom:19.6px!important;
}
body.home .blog-meta-listing {
 gap: .5rem;
font-size: .75rem;
}
@media (max-width: 768px) {
.row.col-tintuc {
    margin-left: 0px!important;
    margin-right: 0px!important;
}
.column-large {
    padding-bottom:5px!important;
}
}
/*=== Custom search form ===*/
.search_form_wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 1rem 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.search_form_wrapper form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0em!important;
}
.search_form_wrapper .btn-search {
  background: #d09e3f;
  color: #fff;
  border: none;
  padding: 0rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
    margin-right: 0em!important;
    min-height: 2.4em!important;
    margin-bottom: 0em!important;
}
.search_form_wrapper .btn-search i {
  margin-right: 0.5rem;
}

.shop-search .search_form_wrapper {
    background: #f1ecc8;
}
/* Wrapper chung cho input/select có icon */
.field-with-icon {
  position: relative;
}
.field-with-icon i {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  font-size: 1rem;
}
/* Đẩy nội dung của input/select qua phải để không chồng icon */
.field-with-icon input[type="search"],
.field-with-icon select {
  width: 100%!important;
  padding: 0rem 0rem 0rem 1.7rem!important;
  font-size: 1rem;
  border: 1px solid #ddd!important;
  border-radius: 6px!important;
  appearance: none; /* ẩn default arrow của select */
  margin-bottom:0rem!important;
}

/* Responsive: mobile */
@media (max-width: 768px) {
  .search_form_wrapper form {
    grid-template-columns: 1fr;
  }
/* ========== MOBILE: 2 select trên 1 dòng ========== */

  .search_form_wrapper form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* input tìm kiếm chiếm full-width */
  .search_form_wrapper .field-with-icon:nth-child(1) {
    flex: 1 1 100%;
  }

  /* 2 select nằm cạnh nhau, mỗi select ~48% */
  .search_form_wrapper .field-with-icon:nth-child(2),
  .search_form_wrapper .field-with-icon:nth-child(3) {
    flex: 1 1 48%;
    min-width: 48%;
  }

  /* nút tìm kiếm chiếm full-width */
  .search_form_wrapper .btn-search {
    flex: 1 1 100%;
    font-size: 1rem;
  }
}
        /* FAQ AZHOUSE */
        .az-faq-section { padding:3rem 1rem; }
        .az-faq-grid {
          display: flex;
          gap: 2rem;
          flex-wrap: wrap;
          justify-content: space-evenly;
        }
        .az-faq-questions {
          flex: 1 1 400px;
        }
        .faq-item {
          border-bottom:1px solid #ddd;
          margin-bottom: 0rem;
        }
        .faq-question {
          width:100%;
          text-align:left;
          background:none;
          border:none;
          padding: .5rem 0;
          font-size:16px;
          position: relative;
          cursor:pointer;
          margin-bottom: 0em!important;
        }
        .faq-question .icon {
          position:absolute;
          right:0;
          transition: transform .3s ease;
        }
        .faq-item.active .faq-question .icon {
          transform: rotate(45deg);
        }
        .faq-answer {
          display:none;
          padding-bottom:.75rem;
          color:#555;
        }
        .faq-item.active .faq-answer {
          display:block;
        }
        .az-faq-contact {
          flex: 0.5 1 300px;
          background: rgb(241, 236, 200);
          padding: 1.5rem;
          border-radius: 8px;
        }
        .az-faq-contact h3 {
          margin-top:0;
        }
@media (max-width: 768px) {
.az-faq-contact {
    flex: 1 1 400px!important;
}
}
/* Container của image trong Flatsome loop có position: relative */
.product-small .box-image {
  position: relative;
}

/* Badge Chủ nhà */
.loop-badge-chu-nha {
  position: absolute;
  top: 0px;
  display: flex !important;
  align-items: center;
  background: #f1ecc8;
  color: #d09e3f;
  padding: 3px 8px;
  border-radius: 4px;
  text-decoration: none;
  z-index: 10;
  white-space: nowrap;
}
.loop-badge-chu-nha img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 6px;
}
.loop-badge-chu-nha span {
  font-size: 14px;
  font-weight: 700;
  line-height:1;
}
/* AZHouse */
.loop-badge--azhouse {
  background: #f1ecc8;
  color: #d09e3f;
}

/* RoomZ */
.loop-badge--roomz {
  background: #f36f21; /* cam */
  color: #fff;
}

/* Bcoins Service */
.loop-badge--bcons-service {
  background: #00a4d7;
  color: #fff;
}

/* KM Residence */
.loop-badge--km-residence {
  background: #2a9d8f;
  color: #000;
}

/* Guta Vietnam */
.loop-badge--guta {
  background: #34568b;
  color: #fff;
}
/* CHUNG cho tất cả badge */
.azhouse-badge-trang-thai {
  display: inline-block;
        font-size: 12px;
    font-weight: 600;
   padding: 2px 4px;
    line-height: unset;
    border-radius: 6px;
    text-align: center;
    color: #fff;
}

/* CHỈ single phòng trọ */
.azhouse-badge--single-bds {
  /* giữ mặc định, chẳng cần thêm gì */
}

/* CHỈ single dự án */
.azhouse-badge--single-duan {
  /* ví dụ muốn font-size nhỏ hơn */
  font-size: 11px;
}

/*Tab chủ nhà*/
@media (max-width: 767px) {
  .chunha-content {
    display: block!important;
}
.sidebar-chunha {
    width: 100%!important;
    margin-bottom: 1.5rem!important;
    position: unset!important;
}
.main-chunha {
    margin-left: 0px!important;
}
}

.list-chu-nha { display: flex; align-items: center;justify-content: center;}
.chu-nha-item img { width: 40px; height:40px; object-fit:cover; border-radius:50%; margin-right:12px; }
.chu-nha-item h3 { margin:0; font-size:22px; color:#222; }
.list-chu-nha a { display: flex; align-items: center; }

.container-partners {
    background-color: #f7f3dc;
    padding:1rem;
    border-radius:8px;
}
.grid-partners { display:grid; grid-template-columns: repeat(5,1fr); gap:24px; padding:2rem; }
@media (max-width: 768px) {
  .grid-partners { grid-template-columns: repeat(2,1fr); }
  .grid-partners {
    gap: 20px!important;
    padding: 0.25rem!important;
}
.container-chunha-single, .main-chunha {
    padding: 0 0.875rem!important;
}
 .main-chunha {
    padding: 0rem!important;
}
#all-houses p, #available-houses p {
    padding: 0 1rem!important;
}
.tabs {
    padding-left:1rem!important;
    padding-top:2rem!important;
}
}
.partner-card { position: relative; ; background:#fff; padding:16px; border-radius:8px; text-align:center; transition:shadow .2s; }
.partner-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.partner-card img { width:80px; height:80px; object-fit:cover; border-radius:50%; margin-bottom:8px; position: relative;
  z-index: 20;   /* Logo luôn nằm trên badge */margin-top: 2rem; }
.partner-card h3 { margin:0 0 4px; font-size:18px; }
.partner-card span {
   position: absolute;
  top: 8px;      /* Đẩy xuống dưới 8px (thay vì 16px) */
  left: 8px;     /* Đẩy vào trong 8px */
  z-index: 10;   /* Nằm trên backdrop, nhưng dưới logo nếu logo z-index cao hơn */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #EAF5FF;
  color: #0D5ABF;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 12px;
}

.partner-card span svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.partners-archive h1, .partners-archive p {
    text-align: center!important;
}
.partners-archive  {
    padding-bottom:2rem;
}
.partner-image {
  /* Giới hạn chiều cao tối đa */
  max-height: 500px;
  /* Chiều rộng tự động giữ tỉ lệ gốc */
  width: auto;
  /* Không cắt, chỉ thu nhỏ để vừa khung */
  object-fit: contain;
  /* Tâm ảnh luôn nằm giữa */
  object-position: center center;
  /* Nếu cần căn giữa block-level image */
  display: block;
  margin: 0 auto;
   padding-bottom:2rem;
}

.container-chunha-single {
    padding:0 2rem;
}
.chunha-content {
  display:flex; padding-top:2rem; padding-bottom:3rem;
  overflow: visible !important;
}
.sidebar-chunha { width:350px; position:sticky; top:100px; padding:2rem; background:#fff; border-radius:8px; border: solid 1px rgba(151, 151, 151, .25);
    transition: all .5s;
    box-shadow: rgba(50, 50, 105, 0.15) 1px 2px 5px 1px, rgba(0, 0, 0, 0.05) 1px 1px 1px 2px; text-align: center; align-self: flex-start; }
.sidebar-chunha img {
    width: 112px; height:112px; object-fit:cover; border-radius:50%; border:2px solid #f0f0f0;padding:5px;
}
.social-links {
  display: flex;
  gap: 12px;
  margin: 10px 0;
  justify-content: center;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform .2s;
}

.social-icon:hover {
  transform: scale(1.1);
}

.social-icon i {
  font-size: 20px;
}

/* Màu sắc riêng cho từng mạng */
.social-icon--facebook i {
  color: #1877F2;
}

.social-icon--tiktok i {
  /* TikTok không có mã màu chính thức, dùng #000 hoặc gradient */
  color: #000;
}

.social-icon--youtube i {
  color: #FF0000;
}

.main-chunha { flex:1; margin-left:24px; padding:20px; background:#fff; border-radius:8px; border: solid 1px rgba(151, 151, 151, .25);
    transition: all .5s;box-shadow: rgba(50, 50, 105, 0.15) 1px 2px 5px 1px, rgba(0, 0, 0, 0.05) 1px 1px 1px 2px; }
.tabs { display:flex; list-style:none; padding:0; }
.tabs li { margin-right:16px; }
.tabs li a { text-decoration:none; padding:8px 16px; border:1px solid #ddd; border-radius:4px;font-weight:600 }
.tabs li.active a { background:#d09e3f; color:#fff; border-color:#d09e3f; font-weight:600; }

.house-item { display:flex; margin-bottom:16px; }
.house-item img { width:120px; height:90px; object-fit:cover; margin-right:12px; border-radius:4px; }
.house-item h4 { margin:0 0 4px; }
.banner-chunha img {
  /* Giới hạn chiều cao tối đa */
      height: 300px;
    width: 1200px !important;
    object-position: center center;
    display: block;
    margin: 0 auto;
    border-radius: .75rem;
}

#comments {
    margin: 0px auto!important;
}
/* ---------- Related Posts List ---------- */
@media (max-width: 768px) {
  /* 1) Giữ mỗi item là 1 cột (small-columns-1 vẫn ok), 
        nhưng ép box-vertical thành row trên mobile */
  .az-related-posts .post-item .box.box-vertical {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 15px;
  }
  /* 2) Thumbnail chiếm khoảng 40% */
  .az-related-posts .post-item .box-image {
    width: 40% !important;
    margin-right: 0 !important;
  }
  /* 3) Text phần còn lại */
  .az-related-posts .post-item .box-text {
    width: 60% !important;
  }
  /* 4) Bỏ override flex-direction column cũ (nếu có) */
  .az-related-posts .post-item {
    flex-direction: row !important;
  }
}



/* Cho Related Posts được tự bung chiều cao tiêu đề */
.az-related-posts .post-title.is-large {
  /* bỏ mọi giới hạn chiều cao */
  height: auto !important;
  max-height: none !important;
  /* cho phép wrap */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  /* thêm khoảng cách dưới */
  margin-bottom: 0.5em !important;
}

/* Nếu muốn thay đổi tỉ lệ thumbnail vs text (ví dụ 30% : 70%) */
.az-related-posts .box-image img {
  border-radius:6px;
}
.az-related-posts .col.post-item {
    margin-bottom: 0px!important;
    padding-bottom: 0px!important;
    border-bottom: none!important;
    padding:0px 10px!important;
}
.az-related-posts .col.post-item .box-text.text-left {
        padding-left: 0.5em!important;
        padding-right: 0em!important;
    }
  .az-related-posts  .blog-meta-listing {
    gap: .3rem!important;
    font-size: .75rem!important;
}
.az-related-posts .blog-meta-listing .author-avatar-listing {
    width: 22px;
    height: 22px;
}
.az-related-posts h5.post-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.az-related-posts {
  margin: 30px 0;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 30px;
}
.az-related-posts__title {
  position: relative;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 20px;
}
/* đúng selector với class trên HTML */
.az-related-posts__title span {
  color: #d09e3f;
}
.az-related-posts__title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 60px;
  height: 4px;
  background: #d09e3f;
}
.az-related-posts {
    border-radius: 8px;
    box-shadow: 2px 6px 16px 4px rgba(33, 33, 33, .16);
    padding: 1.2rem;
}
/* ==== 1. Vô hiệu hóa box-shadow và border-radius của #post-list ==== */
.az-related-posts #post-list {
  box-shadow: none !important;
  border-radius: 0 !important;
  background: none !important;
}
/* Ẩn navigation-post mặc định */
.navigation-post {
  display: none !important;
}

/*chỉnh trang blog*/
@media (max-width: 768px) {
    .blog-meta-listing {
  gap: .25rem!important;
  font-size: .65rem!important;
}
.blog-meta-listing .author-avatar-listing {
  width:20px!important; height:20px!important;
}
.blog-meta-listing .meta-date i,
.blog-meta-listing .action i {
  font-size:.65rem!important;
}
.blog-meta-listing .action span {
  font-size:.65rem!important;
}
.blog-meta-listing .action.comments-count svg {
      width:14px!important;
      height:12px!important;
}
/* 1) Hủy luôn padding-top trên container nếu Flatsome đang dùng hack padding-top */
.box-blog-post.has-hover .box-image .image-cover {
  /* Thiết lập luôn ratio cho container */
  width: 100%;
  aspect-ratio: 16 / 12; /* hoặc 500/281 để chính xác theo ảnh gốc */
}

/* 2) Ép ảnh full container, giữ đúng ratio, crop trung tâm */
.box-image .image-cover img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: inherit;     /* kế thừa tỉ lệ từ container */
  object-fit: cover;         /* giữ crop trung tâm */
  display: block;
}
.box-text .from_the_blog_excerpt {
    margin-top: 0px!important;
    font-size:0.75rem!important;
}
h5.post-title {
    font-size: 14px!important;
}
.blog-single .entry-header h1.entry-title {
    font-size:16px!important;
}
}

/* Trên trang Single Post, chỉnh khoảng cách dưới article.post */
.single.single-post article.post {
  margin-bottom: 0px !important; /* hoặc giá trị bạn muốn */
}
.entry-content.single-page {
    padding-bottom: 0em!important;
}
/* Ẩn dòng "0 Comments" mặc định */
.from_the_blog_comments.uppercase.is-xsmall {
  display: none !important;
}
ul.product_list_widget li img {
   border-radius:6px!important;
}
.primary {
    border-radius: 6px;
}
.blog-meta-listing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
}

.blog-meta-listing .meta-author {
  display: flex;
  align-items: center;
}
.blog-meta-listing .author-avatar-listing {
  width:24px; height:24px; border-radius:50%;
}
.blog-meta-listing .author-name-listing {
  margin-left:.5rem; font-weight:500;
}

.blog-meta-listing .meta-date,
.blog-meta-listing .action {
  display: flex;
  align-items: center;
}
.blog-meta-listing .meta-date i,
.blog-meta-listing .action i {
  font-size:1rem;
}
.blog-meta-listing .meta-date i {
  margin-right:0.25rem;
}

.blog-meta-listing .action {
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
}
.blog-meta-listing .action span {
  margin-left:.25rem;
  font-size:.875rem;
}
.blog-meta-listing .action.comments-count svg {
      overflow: visible !important;
}
/*chỉnh sửa metapost*/
/* Mobile: đưa post-actions vào khoảng trống bên trái, hiển thị dọc và cố định */
@media (max-width: 768px) {
 /* bar cố định dưới cùng */
  .p-post1__info1 .post-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around; /* xen kẽ đều */
    align-items: center;
    background: #fff;
    padding: 0.5rem 0;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
    z-index: 9999;
  }

  /* Đảm bảo nội dung không bị che bởi bar */
  .p-post1__info1 + .article_content,
  .article_content {
    padding-bottom: 0rem; /* cao hơn padding của bar */
  }
  .p-post1__info1 .post-actions .action + .action::before {
 display:none!important;
}
 /* Font-size dropdown */
  .p-post1__info1 .font-size-toggle .font-size-options {
    top: auto !important;
    bottom: calc(100% + 0.5rem) !important;
  }

  /* Share dropdown */
  .p-post1__info1 .share-toggle .share-dropdown {
    top: auto !important;
    bottom: calc(100% + 0.5rem) !important;
  }
  .p-post1__info1 .post-category a {
    padding: 0.25em 0.25em!important;
    font-size: 0.75rem!important;
    font-weight: 700;
}
.p-post1__info1 .post-author .author-avatar {
    width: 24px!important;
    height: 24px!important;
}
.p-post1__info1 .post-author .author-name {
    margin-left: 0.25rem!important;
    font-size: 0.7rem!important;
}
.p-post1__info1 .post-date {
    font-size: 0.6rem!important;
}
.p-post1__info1 .post-date i {
    margin-right: 0.2rem;
}
}

.p-post1__info1 {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.p-post1__info1 .post-author {
  display: flex;
  align-items: center;
}

.p-post1__info1 .post-author .author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.p-post1__info1 .post-author .author-name {
  margin-left: 0.5rem;
  font-weight: 600;
}

.p-post1__info1 .post-date,
.p-post1__info1 .post-category,
.p-post1__info1 .post-google-news {
  display: flex;
  align-items: center;
}
/* Cho phép SVG và tooltip không bị cắt */
.post-google-news,
.post-google-news svg {
  overflow: visible !important;
}

/* Nếu bạn đặt SVG làm background hoặc flex-item */
.post-google-news > svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.p-post1__info1 .post-date {
  margin-left: 0rem;
}

.p-post1__info1 .post-date i {
  margin-right: 0.3rem;
}

.p-post1__info1 .post-category {
  margin-left: 0rem;
}

.p-post1__info1 .post-category a {
  display: inline-block;
  background: #D8A03E;
  color: #fff;
  padding: 0.25em 0.75em;
  border-radius: 1em;
  font-size: 0.875rem;
  font-weight:700;
}

.p-post1__info1 .post-google-news {
  margin-left: 0rem;
}

.p-post1__info1 .post-google-news a {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 0.875rem;
}

.p-post1__info1 .post-google-news i {
  margin-right: 0.3rem;
}

.p-post1__info1 .post-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .5rem;
}

.p-post1__info1 .post-actions .action {
  background: none;
  border: none;
  padding: .25rem;
  cursor: pointer;
  position: relative;
  margin-bottom: 0em !important;
  margin-right: 0px !important;
}
/* Kẻ dọc ngăn cách giữa các nút .action */

.p-post1__info1 .post-actions .action + .action::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.2rem;
  background: #ddd;       /* màu đường kẻ */
}

.p-post1__info1 .post-actions .action i,
.p-post1__info1 .post-actions .action svg {
  display: block;
  font-size: 1.25rem;
}

.p-post1__info1 .post-actions .comments-count,
.p-post1__info1 .post-actions .view-count,
.p-post1__info1 .post-actions .like-count {
  display: flex;
  align-items: center;
  gap:0.25em;
}



.p-post1__info1 .action.save-article.saved svg {
  /* ví dụ đổi màu icon khi đã lưu */
  stroke: #e74c3c;
  fill:    #e74c3c;
}


/* wrapper và dropdown */
.p-post1__info1 .share-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* ẩn dropdown */
.p-post1__info1 .share-toggle .share-dropdown {
  display: none;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 200;
}

/* show khi open */
.p-post1__info1 .share-toggle.open .share-dropdown {
  display: block;
}

/* tuỳ chỉnh icon nếu cần */
.p-post1__info1 .share-toggle i {
  font-size: 1.25rem;
}


/* Font‐size toggle wrapper */
.p-post1__info1 .font-size-toggle {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Icon sizing */
.p-post1__info1 .font-size-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Dropdown list */
.p-post1__info1 .font-size-options {
  display: none;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  z-index: 100;
}

/* Show when open */
.p-post1__info1 .font-size-toggle.open .font-size-options {
  display: block;
}

/* Items */
.p-post1__info1 .font-size-options li {
  padding: .4rem 1rem;
  text-align: center;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0em!important;
}
/* A nhỏ */
.p-post1__info1 .font-size-options li[data-size="small"] {
  font-size: 0.75rem; /* ~12px */
}

/* A vừa */
.p-post1__info1 .font-size-options li[data-size="medium"] {
  font-size: 1rem; /* ~16px */
}

/* A lớn */
.p-post1__info1 .font-size-options li[data-size="large"] {
  font-size: 1.25rem; /* ~20px */
}
.p-post1__info1 .font-size-options li:hover {
  background: #f5f5f5;
}


/*Chỉnh sửa tin tức*/
.page-wrapper .row.row-large {
    max-width: 1200px!important;
}
@media (max-width: 768px) {
.p-post1__info1 {
    gap:0.5em!important;
}
   #content.blog-wrapper > .row > .col.large-9, #content.blog-wrapper > .row > .col.large-3, .widget-area .devvn_product_ux_slide .col.post-item {
                padding: 0px 30px !important;
}
}
 
 
/*Upload chứng từ*/
/* === Lớp Wrapper Giúp Cuộn Ngang === */
.az-doc-table-wrapper {
  width: 100%;                /* Chiếm trọn chiều ngang của khu vực chứa */
  overflow-x: auto;           /* Hiển thị thanh cuộn ngang khi nội dung vượt quá */
  -webkit-overflow-scrolling: touch; /* Cho iOS/máy Apple cuộn mượt hơn */
  margin-bottom: 1.5em;       /* Khoảng cách dưới wrapper, nếu cần */
}

/* === Style cơ bản cho bảng chứng từ === */
.az-doc-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;           /* Đặt độ rộng tối thiểu để các cột không bị quá hẹp, 
                                  bạn có thể điều chỉnh lên (ví dụ 800px, 900px) tùy số cột */
  table-layout: auto;         /* Cho phép cột co giãn theo nội dung */
}
.az-doc-table th,
.az-doc-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
        /* Giữ cho nội dung trong 1 dòng, tránh xuống dòng “gãy” */
white-space:nowrap;
}
.az-doc-table th {
  font-size:14px;
  text-transform: capitalize!important;
}

.az-doc-table thead {
  background-color: #f7f7f7;
}

/* Tô màu trạng thái (tuỳ chọn) */
.az-doc-table .status-pending {
  color: #d9822b;
  font-weight: bold;
}
.az-doc-table .status-processed {
  color: #28a745;
  font-weight: bold;
}

/* Khi màn hình quá hẹp (mobile), thu nhỏ padding và font-size */
@media only screen and (max-width: 768px) {
  .az-doc-table th,
  .az-doc-table td {
    padding: 6px;
    font-size: 13px;
      white-space: nowrap!important;
  }
}


/* 5.2) CSS cho metabox (Admin) để form upload đẹp hơn (nếu muốn) */
#az_document_metabox th {
    width: 180px;
    padding: 8px;
    vertical-align: top;
}
#az_document_metabox td {
    padding: 8px;
}

/* Spinner overlay trên nút */
.button.loading {
  position: relative;
  color: transparent;      /* ẩn text khi loading */
  pointer-events: none;
}
.button.loading::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em; height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border: 2px solid #fff;
  border-top-color: rgba(255,255,255,0.3);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/*CSS cho Dashboard/*

/* 1) Header người dùng */

.avatar-wrapper {
  flex-shrink: 0;
  width: 110px; height: 110px;
  left:0rem;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
   position: relative;
  display: inline-block;
    overflow: visible;
  z-index: 1;
}
.avatar-wrapper .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    background-color: #dee2e6;
}
.avatar-wrapper .tier-badge {
  position: absolute;
    top: -6px;
  right: -6px;
    width: 50px;
    height: 50px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  z-index: 10;
}
.avatar-wrapper .tier-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.user-name {
  font-size: 22px;
  margin: 0 0 4px;
}
.account-id {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px;
}
.user-info .member-tier {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  transition: background .2s;
}

/* === 2) Grid KPI === */
/* === Container grid chung === */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* === Chung cho mọi card === */

/* === KPI cards thường === */
.overview-card:not(.verification) {
  display: grid !important;
  /* cột 1: fix 24px cho icon; cột 2: auto cho label */
  grid-template-columns: 24px auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon label"
    "number number";
  column-gap: 8px;  /* luôn 8px giữa icon & label */
  row-gap: 4px;
  justify-content: center;
  align-items: center;
}

/* đặt lại vùng cho icon + ép width + center icon */
.overview-card:not(.verification) i {
  grid-area: icon;
  width: 32px;
  text-align: center;
  font-size: 18px;
  color: #d4af37;
}

/* label thẳng hàng, không wrap */
.overview-card:not(.verification) .card-label {
  grid-area: label;
  font-size: 18px;
  color: #555;
  white-space: nowrap;
  font-weight:700;
}

/* số nằm full hàng dưới */
.overview-card:not(.verification) .card-number {
  grid-area: number;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  text-align: center;
}

/* === Card verification (Email) === */


/* hàng 1: icon phong bì */
.overview-card.verification .account-icon {
  grid-area: email-icon;
  width: 35px;
  text-align: center;
  font-size: 18px;
  color: #555;
}
/* hàng 1: chữ Email */
.overview-card.verification .account-label {
  grid-area: email-label;
  font-size: 18px;
  font-weight: 700;
  color: #555;
}

/* hàng 2: icon trạng thái */
.overview-card.verification .status-icon {
  grid-area: status-icon;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

/* hàng 2: text Đã/Chưa xác thực */
.overview-card.verification .status-label {
  grid-area: status-label;
}

.overview-card.verification.verified  {
  color: #2ecc71;
    background-color: rgba(239, 68, 68, .1);
    border: 1px solid #2ecc71;
    border-radius: 16px;
    padding: 3px 6px 3px 3px;
    border-radius: 16px;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    font-size:12px;
}
.overview-card.verification.unverified  {
  color: #e74c3c;
    background-color: rgba(239, 68, 68, .1);
    border: 1px solid #e74c3c;
    border-radius: 16px;
    padding: 3px 6px 3px 3px;
    border-radius: 16px;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    font-size:12px;
}
/* 3) Quick Links */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.quick-link {
  flex: 1 1 200px;
  background: #d09e3f;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: background .2s, border-color .2s;
  margin-top:20px;
}
.quick-link:hover {
  background: #ff297b;
  color: #fff;
  border-color: #ff297b;
}

* Responsive */
@media (max-width: 768px) {
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr)!important;
}
  }
@media (max-width: 480px) {
    .overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr)!important;
}
.avatar-wrapper {
    width: 100px!important;
    height: 100px!important;
}
.avatar-wrapper .tier-badge {
    width: 40px!important;
    height: 40px!important;
}  
.account-overview .overview-header .user-info.user-name {
    font-size: 16px!important;
}
.user-info .member-tier {
    margin-top: 0px!important;
    font-size: 12px!important;
}
.overview-grid {
    gap: 10px!important;
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr)!important;
}
.overview-card {
    padding: 8px!important;
}
.overview-card:not(.verification) i {
    font-size: 14px!important;
}
.overview-card:not(.verification) .card-label, .overview-card:not(.verification) .card-number, .overview-card.verification .account-icon, .overview-card.verification .account-label {
    font-size: 14px!important;
}
.overview-card.verification .status-icon, .overview-card.verification .status-label {
    font-size: 12px!important;
}
  }
/* —— Quản lý tài khoản —— */
/* ================= STICKY PAGE HEADER ================= */
.custom-account-page .account-page-header {
  position: sticky;
  top: 0;
  background: #eff1f5;
  padding: 0px 40px;
  border-bottom: 1px solid #eee;
  z-index: 3;
}
.account-page-title {
  font-size: 24px;
  margin: 0 0 8px;
}
.account-page-header .account-tabs {
  display: flex;
  gap: 30px;
  list-style: none;
  margin-bottom:0px!important;
}
.account-page-header .tab-item {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  padding-bottom: 8px;
  margin-left:0px!important;
}
.account-page-header .tab-item.active {
  color: #ff297b;
}
.account-page-header .tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ff297b;
}

/* ===== content card ===== */
.account-manage-card {
  background: #fff;
  border-radius: 12px;
  padding: 0px;
  max-width: 700px;
  margin: 20px auto 60px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  position: relative;
}

/* HEADER: cover / avatar / info */
/* ============ COVER PHOTO ============ */
.profile-header .cover-photo {
  position: relative;
  width: 100%;
  height: 210px;                  /* chiều cao theo mockup */
  background-size: cover;
  background-position: center;
  border-radius: 12px 12px 0 0;   /* bo góc trên */
  overflow: hidden;
}

/* nút “Đổi ảnh bìa” */
.cover-photo .button-link {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.9);
  padding: 2px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #333;
  border: none;
  cursor: pointer;
  z-index: 1;
}
.cover-photo .button-link i {
  font-size: 12px;
  color: #666;
}

/* ============ AVATAR ============ */
.profile-photo-wrapper {
  position: absolute;
  bottom: 420px;    /* lơ lửng một nửa avatar lên trên cover */
  left: 1.5rem;       /* canh cách trái card 40px */
  width: 150px;     /* kích thước avatar */
  height: 150px;
  border: 5px solid #fff;  /* viền trắng dày */
  border-radius: 50%;
  overflow: visible !important;
  background: #fff;
  z-index: 2;
}

/* ảnh avatar */
.profile-photo-wrapper .profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    background-color: #dee2e6;
    padding: 0.4rem;
}
/* cho cover và avatar đều có cursor pointer */
.cover-photo,
.profile-photo-wrapper {
  cursor: pointer;
}

/* nút “Đổi ảnh đại diện” */
.profile-photo-wrapper .button-link {
 position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0px 10px;
    white-space: nowrap;
    background: #F5F5F5;
    border-radius: 6px;
    font-size: 12px;
    color: #333;
    border: none;
    cursor: pointer;
}
.profile-photo-wrapper .button-link i {
  font-size: 12px;
  color: #666;
}

#tab-personal .profile-header .user-info {
  margin-left: 180px;
  padding-top: 0px;
}
.user-name {
  font-size: 20px; margin: 0;
}
.account-id {
  margin: 4px 0px!important;
  color: #666;
  font-size:14px;
}

/* TAB CONTENTS */
#tab-account, #tab-password {
    padding: 40px 0px;
}

#form-account, #tab-password {
    margin:1rem 3rem!important;
}
/* ===== Thông tin cá nhân ===== */
#form-personal {
    margin: 3rem !important;
    padding-bottom: 20px;
}
#form-personal p {
  display: flex;
  align-items: center;
}
#form-personal p label {
  width: 160px;
  font-weight: 500;
  color: #333;
}
#form-personal p input,
#form-personal p select {
  flex: 1;
  padding: 0px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f8f8f8;
  font-size: 16px;
}

/* ===== Thông tin tài khoản ===== */
.section-title {
  font-size: 16px;
  margin-bottom: 24px;
  font-weight: 600;
  margin-left: 3rem;
}

/* ===== Status labels ===== */
.status-verified {
  color: #2ecc71;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-unverified {
  color: #e74c3c;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ===== Fancybox OTP modal ===== */
/* Chỉ với popup có class .otp-modal (đã gắn lên wrapper fancybox__content) */
.fancybox__content.otp-modal {
  max-width: 480px !important;
}

.otp-modal {
  background: #fff;
  padding: 36px;
  border-radius: 8px;
  position: relative;
  text-align: center;
}
.otp-modal h2 {
  margin-top: 0;
  color: #0073aa;
  font-size: 22px;
}
.otp-modal .note {
  color: #666;
  margin-bottom: 20px;
}
.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.otp-digit {
  width: 48px;
  height: 56px;
  font-size: 24px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.btn-confirm {
  width: 100%;
  margin-bottom: 12px;
}
.btn-resend {
  color: #006eff;
  font-size: 14px;
}


/* === wrapper input + icon === */
/* 1) Đảm bảo tooltip không bị cắt */
.input-with-icon {
  position: relative;
  overflow: visible !important;
}

/* 2) Icon */

.input-with-icon .status-icon {
  position: absolute;
  top: 35%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  z-index: 2;
  cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
     /* chắc chắn wrapper dùng font hệ thống */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* 3) Icon vẫn dùng FontAwesome */
.tooltip-icon > i {
  font-family: "Font Awesome 6 Free" !important;
  /* nếu là solid icon thì thêm font-weight:900 */
}

/* 4) Pseudo-element cho text tooltip */
.tooltip-icon::after,
.tooltip-icon::before {
  pointer-events: none;
  transition: opacity .2s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  text-transform: none;
}

/* 5) Nội dung tooltip */
.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 90%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* 6) Mũi tên tam giác */
.tooltip-icon::before {
  content: "";
  position: absolute;
  bottom: 90%;
  left: 90%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.8) transparent transparent transparent;
}

/* 7) Hiển thị khi hover */
.tooltip-icon:hover::after,
.tooltip-icon:hover::before {
  opacity: 1;
  visibility: visible;
}
/* 8) màu cho icon */
.input-with-icon .status-icon.unverified { color: #e74c3c; }
.input-with-icon .status-icon.verified   { color: #2ecc71; }


/* === wrapper cho nút Xác thực riêng biệt === */
.button-with-gap button {
  /* giữ nguyên style button của bạn */
}

/* === căn form-row chung === */
#tab-account .form-row {
  display: flex;
    align-items: center;
    margin-bottom: 20px;
}
#tab-account .form-row label {
  width: 160px;
  font-weight: 500;
  color: #333;
}
#tab-account .form-row .form-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== Input cùng kích thước ===== */
#tab-account .form-field input,
#tab-account .form-field .input-with-icon input {
  width: 292px !important;
  max-width: 100%;   /* đề phòng container quá nhỏ */
  flex: 1;
    padding: 12px 16px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

/* ===== Button cùng kích thước ===== */
#tab-account .form-field button,
#tab-account .form-field .button {
  width: 140px !important;
  flex-shrink: 0;    /* không co lại */
  margin-right:0px!important;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
/* ===== Đổi mật khẩu ===== */
#tab-password .form-row  {
  display: flex;
  align-items: center;
}
#tab-password .form-row label {
  width: 160px;
  font-weight: 500;
  color: #333;
}
#tab-password p input,
#tab-password p select {
  flex: 1;
  padding: 0px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f8f8f8;
  font-size: 16px;
}
/* —————— Chỉnh lại dòng “Mật khẩu cũ” + “Quên mật khẩu?” —————— */
#tab-password .form-text-end {
    text-align: right !important;
    margin-top: -20px;
    margin-bottom: 10px;
}
.lost-password-link {
  margin-left: auto;
  font-size: 14px;
  color: #006eff;
  text-decoration: underline;
}
/* — Căn giữa nút Cập nhật trong tab Đổi mật khẩu — */
#tab-password .woocommerce-EditAccountForm p > button[name="save_account_details"] {
  display: block;
  margin: 30px auto 0; /* cách trên 30px, tự động canh giữa, không cách dưới */
  width: 200px;        /* nếu muốn cố định chiều rộng, hoặc bỏ dòng này để auto */
  text-align: center;
  border-radius:8px;
}
/* ——— Canh giữa nút Cập nhật tại Tab Thông tin cá nhân ——— */
#tab-personal #form-personal button[name="save_personal"] {
  display: block;
  margin: 30px auto 0;     /* margin-top: 30px; margin-bottom: 0; tự canh giữa */
  width: 160px;            /* fix width giống các button khác */
  text-align: center;
  border-radius:8px;
}


/* Responsive */
@media (max-width: 768px) {

  /* — Tab ngang cuộn được — */
  .account-page-header .account-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .account-page-header .account-tabs::-webkit-scrollbar {
    display: none;
  }
.custom-account-page .account-page-header {
    padding: 0px!important;
}
.account-page-title {
    font-size: 20px!important;
}
.account-page-header .tab-item {
    font-size: 14px!important;
}
  /* — Cover & Avatar thu nhỏ — */
  .profile-header .cover-photo {
    height: 150px;            /* thấp hơn desktop */
    border-radius: 12px 12px 0 0;
  }
  .profile-photo-wrapper {
      width: 110px;
        height: 110px;
        bottom: 400px;
        border-width: 4px;
  }
#tab-personal .profile-header .user-info {
    margin-left: 150px !important;
    padding-top: 8px;
  }
  .user-name { font-size: 18px; }
  .account-id { font-size: 12px; }


  /* — Tab — */
  #form-personal p label {
    width: 100px;
    font-weight: 500;
    color: #333;
}
#tab-password .form-row label {
    width: 130px;
}
#tab-account .form-row {
    flex-direction: column !important;
    align-items: stretch !important;
    margin-bottom: 16px !important;
  }
  #tab-account .form-row label {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  #tab-account .form-row .form-field {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* — Inputs full width — */
  #tab-account .form-field input,
  #tab-account .form-field select {
    width: 100% !important;
  }

  /* — Buttons full width — */
  #tab-account .form-field button,
  #tab-account .form-field .button {
    width: 100% !important;
  }

  /* — Special: Email-field grid → cột đơn — */
  .email-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* — OTP Modal hẹp lại — */
  .otp-modal {
    width: 90% !important;
    max-width: none !important;
    padding: 24px !important;
  }

  /* — Tab 1 & Tab 3 “Cập nhật” canh giữa — */
  #tab-personal #form-personal, #tab-account #form-account,
  #tab-password {
    margin: 1.5rem 1rem !important;
  }
  #tab-personal button[name="save_personal"],
  #tab-password button[name="save_account_details"] {
    width: 80% !important;
    margin: 16px auto 0 !important;
  }
}

/* —— Quản lý BOOKING —— */
/* === RESPONSIVE CHO MOBILE === */
@media (max-width: 768px) {
  /* —— CARD BOOKING: 1 cột —— */
  .card-booking {
    grid-template-columns: 0.55fr 1fr!important;
}
.card-booking img {
    aspect-ratio: 3 / 4!important;
    width: 98%!important;
    height:98%!important;
}
.card-booking .card-title {
    font-size: 0.8rem!important;
}
.card-booking .card-addr {
    font-size: 0.6rem!important;
}
.card-booking .card-meta {
   font-size:13px!important;
}
.card-booking .card-meta div {
    font-size: 0.5rem!important;
}
.card-booking .card-meta div strong {
    font-size: .6rem!important;
}
.card-booking .card-price {
    font-size: 0.8rem!important;
}
.card-booking .btn-repeat {
    font-size: 0.8rem!important;
}

  /* nhỏ padding cho content */
  .card-booking .card-content {
    padding: 0.5rem 0.75rem;
  }

  /* —— CHI TIẾT BOOKING —— */
/* 1) Container xếp cột */
  .booking-detail .detail-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 1rem !important;
  }

  /* 2) Hai phần col-left / col-right full-width */
  .booking-detail .detail-columns > .col-left,
  .booking-detail .detail-columns > .col-right {
    width: 100% !important;
    margin: 0 !important;        /* bỏ margin cũ */
  }

  /* 3) Col-left bên trong vẫn dùng grid-area bình thường */
  .booking-detail .col-left {
    display: grid !important;
    grid-template-areas:
      "title"
      "addr"
      "thumb"
      "meta"
      "summary"
      "actions";
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* 4) Tinh chỉnh thêm nếu cần */
  .booking-detail .col-right {
    /* xóa margin-top, flex-gap đã lo khoảng cách */
    margin-top: 0 !important;
  }
.booking-detail .col-right .user-info {
    margin-bottom:0px!important;
}
/* biến p.links thành flex container và căn giữa các link */
  .booking-detail .col-right p.links {
    display: flex !important;
    justify-content: center !important;
    gap: 1.5rem;       /* khoảng cách giữa “Chính sách” và “Hướng dẫn” */
    padding-top: 1rem; /* nếu cần khoảng cách so với box trên */
    margin-bottom: 0rem!important;
    justify-content: space-between!important;
  }
  /* đảm bảo mỗi <a> không chiếm full width */
  .booking-detail .col-right p.links a {
    display: inline-block;
    margin: 0;
  }
  .pay-method-box {
    margin-bottom: 0rem!important;
}

  /* summary-top full ngang */
  .room-summary-top {
    grid-template-columns: repeat(auto-fit, minmax(60px,1fr)) !important;
  }

  /* nút quay lại, icon copy có thể thu nhỏ */
  .booking-detail .btn-back {
    font-size: 0.85rem !important;
  }
  .booking-detail .detail-header .copy-code {
    font-size: 1rem !important;
  }
  .room-summary-top .summary-value {
    font-size:0.9rem;
}
.booking-detail .col-left img {
  aspect-ratio: 16 / 8!important;
}
}

/* —— DANH SÁCH BOOKING —— */
/* 1 card / hàng */
.booking-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* —— CARD BOOKING —— */
/* chia 2 cột: 1 cột thumbnail, 1 cột content */
.card-booking {
  display: grid;
  grid-template-columns: 280px 1fr; /* bạn có thể thay 280px bằng kích thước thumbnail thực tế */
  background: #fff;
  border: 1px solid #eee;
  border-radius: .5rem;
  overflow: hidden;
  align-items: stretch;
}

/* thumbnail luôn full chiều cao cột trái */
.card-booking img {
  aspect-ratio: 16 / 11;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px;
    width: 100%;
    display: block;
}

/* phần nội dung bên phải */
.card-booking .card-content {
  display: flex;
  flex-direction: column;
  padding: 0rem 1rem;
}

/* —— HEADER: ID + STATUS —— */
.card-booking .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-booking .card-status {
  background: #E8F5E9;
  color: #388E3C;
  padding: .25rem .5rem;
  border-radius: .25rem;
  font-size: .8rem;
  margin-top: 5px;
}

/* —— TIÊU ĐỀ + ĐỊA CHỈ —— */
.card-booking .card-title {
  margin: 0px;
  font-size: 1.1rem;
}
.card-booking .card-addr {
  margin-bottom:5px;
  color: #555;
}

/* —— META BOXES: Phòng + Ngày & Giờ —— */
.card-booking .card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 0.2rem;
}
.card-booking .card-meta div {
  background: #F9F9F9;
  border: 1px solid #eee;
  border-radius: .5rem;
  padding: 0rem .75rem;
}
.card-booking .card-meta div strong {
  display: block;
  font-weight: normal;
  color: #888;
  margin-bottom: 0px;
  font-size: .9rem;
}

/* —— FOOTER: Giá + Nút Đặt lại —— */
.card-booking .card-footer {
  margin-top: auto;       /* đẩy xuống đáy */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-booking .card-price {
  color: #D29E40;
  font-weight: bold;
}
/* target đúng <p> trong .card-price */
.booking-list .card-booking .card-footer .card-price p {
  margin-bottom: 0 !important;
}
.booking-detail .col-left p.addr {
  margin-bottom: 3px !important;
}
.card-booking .btn-repeat {
  padding: .5rem 1rem;
  border: 1px solid #D29E40;
  color: #D29E40;
  border-radius: .5rem;
  text-decoration: none;
}


/* —— CHI TIẾT BOOKING —— */
/* —— BACK BUTTON —— */
.booking-detail .btn-back {
  display: inline-flex;
  align-items: center;
  color: #D29E40;
  font-weight: bold;
  background: none;
  border: none;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}


/* —— HEADER —— */
.booking-detail .detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #D29E40;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem 0.75rem 0 0;
}

/* Văn bản “Booking ID” nhỏ phía trên */
.booking-detail .header-left .header-label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}

/* Mã ID lớn */
.booking-detail .header-left .booking-id {
  font-size: 2.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 0.3rem;
  line-height: 1;
}
.booking-detail .detail-header .copy-code {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

/* —— STATUS —— */
.booking-detail .detail-status {
  background: #E8F5E9;
  color: #388E3C;
  text-align: center;
  padding: 0.75rem 1rem;
  font-weight: 600;
  margin: 0; /* không cần margin nếu .detail-columns sẽ đệm bên dưới */
}

/* —— COLUMNS CONTAINER —— */
.booking-detail .detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  background: #fff;
  border-radius: 0 0 0.75rem 0.75rem;
  padding: 1.5rem;
  margin-top: 0;
}

/* —— COL-LEFT —— */
.booking-detail .col-left {
  /* sắp xếp grid để kéo meta lên bên cạnh ảnh */
  display: grid;
  grid-template-areas:
    "title title"
    "addr addr"
    "thumb meta"
    "summary summary"
    "actions actions";
  grid-template-columns: 180px 1fr;
  grid-row-gap: 0.2rem;
  grid-column-gap: 1rem;
}
.booking-detail .col-left h2 {
  grid-area: title;
  margin: 0;
  font-size: 1.25rem;
}
.booking-detail .col-left .addr {
  grid-area: addr;
  color: #555;
  font-size: 0.9rem;
}
.booking-detail .col-left img {
  grid-area: thumb;
  aspect-ratio: 16 / 10;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px;
    width: 100%;
    display: block;
  border-radius: 0.5rem;
}
.booking-detail .col-left .room-meta {
  grid-area: meta;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 0rem;
}
.booking-detail .col-left .room-meta li {
  display: grid;
  grid-template-columns: 1.5rem auto; /* cột 1 rộng 1.5rem chứa icon, cột 2 auto chứa chữ */
  align-items: center;                /* căn icon + chữ giữa hàng */
  gap: 0.5rem;
  color: #D29E40;
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom:0px!important;
  line-height: 1.2!important;
  margin-left:0px!important;
}

/* —— SUMMARY (Ngày / Giờ / Số người) —— */
.booking-detail .col-left .room-summary {
  /* lấn sang cột 1 → cột cuối cùng */
  grid-column: 1 / -1;
  margin: 0rem 0; /* khoảng cách trên dưới */
}

/* —— SUMMARY TOP —— */
.room-summary-top {
  display: grid;
  /* auto-fit cột, mỗi cột tối thiểu 80px, chia đều */
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  border: 1px solid #eee;
      background: #eff1f5;
      border-radius:8px;
          margin-top: 8px;
}
.room-summary-top .summary-item {
  padding: 0.1rem 0.75rem;
  text-align: center;
}
.room-summary-top .summary-label {
  color: #555;
  font-size: 0.85rem;
}
.room-summary-top .summary-value {
  color: #D29E40;
  font-weight: bold;
}
.room-summary-top .summary-item + .summary-item {
  /* viền dọc giữa các item */
  border-left: 1px solid #e5e6ea;
  height:90%;
}

/* —— SUMMARY BOTTOM —— */
.room-summary-bottom {
  margin-top: 0.75rem;
}
.room-summary-bottom .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 0.75rem;
}
.room-summary-bottom .summary-row + .summary-row {
  border-top: 1px solid #eee;
}
.room-summary-bottom .summary-title {
  color: #555;
}
.room-summary-bottom .summary-amount {
  color: #333;
}
.room-summary-bottom .summary-row:last-child .summary-amount {
  font-weight: bold;
}


/* —— ACTIONS —— */
.booking-detail .col-left .actions {
  grid-area: actions;
  display: flex;
  gap: 1rem;
}
.booking-detail .col-left .btn-call {
  flex: 1;
  border: 1px solid #D29E40;
  color: #D29E40;
  padding: 0.75rem;
  border-radius: 0.5rem;
  text-align: center;
  text-decoration: none;
}
.booking-detail .col-left .btn-repeat {
  flex: 1;
  background: #D29E40;
  color: #fff;
  padding: 0.75rem;
  border-radius: 0.5rem;
  text-align: center;
  text-decoration: none;
}

/* —— COL-RIGHT —— */
.booking-detail .col-right {
  background: #fff;
  padding: 0rem;
  border-radius: 0.5rem;
}
.booking-detail .col-right .right-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.booking-detail .col-right h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}
.booking-detail .col-right .user-info{
 text-transform: capitalize;
}
.booking-detail .col-right .user-info dt {
  font-weight: bold;
  float: left;
  clear: left;
  width: 100px;
  color: #555;
}
.booking-detail .col-right .user-info dd {
  margin: 0 0 0.5rem 110px;
  color: #333;
}
.booking-detail .col-right .pay-method {
  background: #F0F4F8;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.booking-detail .col-right .links a {
  margin-right: 1.5rem;
  color: #D29E40;
  text-decoration: none;
  font-weight: 500;
}
.booking-detail .col-right .links a i {
  margin-right: 8px;
}
.pay-method-box {
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 2px solid #006941;
  background: #E8F5E9;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.pay-method-box .fa-wallet,
.pay-method-box .momo-icon,
.pay-method-box .fa-question-circle {
  font-size: 1.5rem;
  color: #006941;
}
.pay-method-box .momo-icon {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}
.pay-method-box .pay-method-label {
  font-size: 1rem;
  font-weight: 600;
  color: #006941;
}

/* -----------------------------------
   Pagination đẹp cho .booking-pagination
------------------------------------ */
.booking-pagination {
  margin: 2rem 0;
  text-align: center;
}

.booking-pagination .page-numbers {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.booking-pagination .page-numbers li {
  margin: 0 6px;
}

.booking-pagination .page-numbers a,
.booking-pagination .page-numbers span {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #d09e3f;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color .2s, color .2s;
}

/* Link trang thường */
.booking-pagination .page-numbers a {
  background-color: #fff;
  color: #d09e3f;
}

/* Trang hiện tại */
.booking-pagination .page-numbers .current {
  background-color: #d09e3f;
  color: #fff;
  cursor: default;
}

/* Hover các số và prev/next */
.booking-pagination .page-numbers a:hover {
  background-color: #d09e3f;
  color: #fff;
}

/* Prev / Next */
.booking-pagination .page-numbers .prev,
.booking-pagination .page-numbers .next {
  font-weight: 600;
}


/*trang tài liệu trong tài khoản*/
/* ==== Document List ==== */
.az-documents {
  margin: 2em 0;
}
.az-documents h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.az-documents-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2 cột cố định */
  grid-gap: 1rem;
}
@media (max-width: 768px) {
  .az-documents-list {
    display:block!important;
  }
  .az-doc-item {
      margin-bottom:10px!important;
  }
}


.az-doc-item .az-doc-link {
  display: flex;
  align-items: center;
  background: #EDF8FF;
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition: background .3s;
}

.az-doc-link:hover {
  background: #fff;
}

/* File icon */
.az-doc-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.az-doc-icon i {
  font-size: 2rem;
  color: #1FA2FF;
}

/* Text info */
.az-doc-info {
  margin-left: 0rem;
  flex-grow: 1;
}
.az-doc-label {
  font-size: 1rem;
  font-weight: 600;
  color: #222;
}
.az-doc-size {
  font-size: .875rem;
  color: #666;
  margin-top: .25rem;
}

/* Download button (ẩn) */
.az-doc-download {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.az-doc-download i {
  font-size: 1.25rem;
  color: #1FA2FF;
}
.az-doc-link:hover .az-doc-download {
  opacity: 1;
}


/* trang đặt cọc*/
.notice.success {
  background: #e6ffed;
  border: 1px solid #2ecc71;
  padding: 10px;
  margin-bottom: 1em;
  color: #27ae60;
  border-radius: 4px;
  text-align:center;
}

/* --- Mobile (dưới 768px) --- */
@media (max-width: 767px) {
  .step-nav {
    display: flex;
    flex-wrap: nowrap;              /* không wrap xuống dòng */
    overflow-x: auto;               /* bật scroll ngang */
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem;                /* thêm khoảng trống 2 bên */
    margin-bottom: 1rem;
  }
  .col-inner ul.step-nav >li {
    flex: 0 0 auto;             
    display: block!important;
  }
  .step-nav li:last-child {
    margin-right: 0;
  }
  .step-nav li .step-number {
    width: 1.75em;
    height: 1.75em;
    font-size: 0.9rem;
    margin-right: 0.4em;
    margin-left: 50px;
  }
  .step-nav li .step-label {
    font-size: 0.75rem;
    white-space: nowrap;            /* không xuống dòng */
  }
  .step-nav li:not(:last-child)::after {
        top: 25% !important;
        left: 68% !important;
        width: 65% !important;
  }
}

/* === Responsive cho toàn bộ form trên mobile === */
@media (max-width: 767px) {
  /* 1) Container 2 cột */
  .az-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
  }
.right-completed {
    width: 100% !important;
  }
  /* 2) Left & Right panel đều full-width */
  .az-columns .left-panel,
  .az-columns .right-panel {
    width: 100% !important;
    float: none !important;
    margin: 0;
    padding: 1rem;
  }
.first-right-panel, .box-payment {
    width: 108%!important;
    padding: 1rem!important;
    margin-left: -15px;
}
  /* 3) Khoảng cách bên dưới left-panel để tách khỏi right-panel */
  .az-columns .left-panel {
    margin-bottom: 1.5rem;
  }

  /* 4) Bỏ float & width cứng cho 2 trường ngày & giờ trong left-panel */
 .left-panel p:nth-of-type(3),
.left-panel p:nth-of-type(4) {
  min-width: 0;    /* allows children to shrink below their intrinsic size */
  float: none !important;
  width: auto !important;
  margin-right: 0 !important;
}

  /* 5) Nếu bạn có .two-cols để gom email & phone, stack lại 1 cột */
  .two-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem;
  }
  .two-cols > div {
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* 6) Đảm bảo input/select full-width */
  .left-panel select,
  .left-panel input,
  .left-panel textarea,
  .right-panel select,
  .right-panel input,
  .right-panel textarea {
    width: 100% !important;
    box-sizing: border-box;
  }
  .left-panel input[type="date"],
.left-panel input[type="time"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0.75em;           /* chỉnh padding tùy theme của bạn */
  border: 1px solid #ccc;    /* giống các input khác */
  border-radius: 0.5em;
}
.left-panel input[type="date"]::-webkit-calendar-picker-indicator,
.left-panel input[type="time"]::-webkit-clear-button {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  /* nếu icon bị che khuất, hãy thêm z-index */
  z-index: 2;}
  .left-panel p:nth-of-type(3),
.left-panel p:nth-of-type(4) {
  position: relative;
}
  .for-row {
    display: block!important;
}
.for-row h4 {
    white-space: nowrap!important;
    margin-bottom: 0.5rem!important;
}
.for-buttons {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
}
.agreement {
    display: block!important;
    text-align: center!important;
}
}

/*step 3*/
.right-completed{ width:58%; background:#fff; padding:1.5rem; border:1px solid #e2e8f0; border-radius:8px; }
.box-code {
    background-color: #f3fae9;
    border: 1px solid #83cc20;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 16px;
}
.box-code span {
    font-weight: 600;
}
.page.account .booking__detail .bill .box-code span strong {
    color: #83cc20;
}
.list {
    margin-top: 20px;
}
/* --- 4) Đổi bullet list thành icon check --- */
.list {
  list-style: none;
  padding-left: 0;
}
.list .item {
  position: relative;
  padding-left: 5px;
  margin-bottom: .5em;
}
.list .item::before {
  content: "\f00c";               /* Unicode của fa-check */
  font-family: "Font Awesome 5 Free"; /* hoặc "Font Awesome 6 Free" nếu bạn xài FA6 */
  font-weight: 900;               /* dấu hiệu solid */
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #7ccb32;
  margin-left: -20px;
}

.button-primary {
    border-radius: 8px !important;
    background: #d09e3f;
    padding:5px 15px;
    color:#fff;
    font-weight:700;
}
.button-primary i {
   margin-right:5px;
}
.button-manager-booking {
    gap:10px;
}

@media print {
  /* 1) Ẩn hết mọi thứ */
  body * {
    visibility: hidden !important;
  }
  /* 2) Bật lại toàn bộ phần in (wrapper và tất cả con) */
  .step3-print-area,
  .step3-print-area * {
    visibility: visible !important;
  }
  /* 3) Kéo wrapper lên góc, full-width */
  .step3-print-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}


.promo-code {
     display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 1rem; /* tuỳ chỉnh khoảng cách */
}
.promo-code input[type='text'] {
    width:75%;
}
.deposit-details .room-name-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem; /* tuỳ chỉnh khoảng cách */
}
.total-amount {
     display: flex;
    justify-content: space-between;
    align-items: center;
}
.summary-list {
    background-color: #efefef;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(228, 228, 231);
    border-image: initial;
}
/* reset float/width/margin cho summary-list */
.summary-list .room-type {
  float: none !important;
  width: auto !important;
  margin: 0.5rem 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* cho tổng tiền cũng giống vậy */
.room-total-price {
  float: none !important;
  width: auto !important;
  margin: 1rem 0 0 !important;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* wrapper 2 cột */
.az-columns {
  display: flex;
  gap: 2%;
  /* bỏ margin trên dưới mặc định */
  margin-top: 1.5rem;
  margin-bottom: 0px !important; 
  align-items: flex-start;  /* đảm bảo chỉ cao bằng nội dung */
}


/* === 3) Đảm bảo step3-history sát ngay dưới === */
.step3-history {
  margin-top: 1.5rem !important; /* nếu bạn muốn cách một khoảng nhỏ */
}
.left-panel { width: 40%; background:#fff; padding:1rem; border:1px solid #e2e8f0; border-radius:8px; margin-bottom: 0px;}
.left-panel select, .left-panel p:nth-of-type(3) input, .left-panel p:nth-of-type(4) input, .right-panel input[type='text'], .right-panel input[type='email'], .right-panel input[type='tel']  {
    border-radius:8px;
}

.first-right-panel, .box-payment { width:106%; background:#fff; padding:1.5rem; border:1px solid #e2e8f0; border-radius:8px; }

/* ============= STEP NAV ============= */
.step-nav {
  display: flex;
  gap: 0;             /* các li sát nhau, chúng ta thêm padding ở bên trong */
  padding: 0;
  margin: 1.5rem 0;
  list-style: none;
}

/* Mỗi bước */

.step-nav li {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Circle và label */
.step-nav .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #e2e8f0;
  color: #fff;
  font-weight: bold;
  margin-right: .5em;
  font-size: 1rem;
  position: relative;
}
.step-nav .step-label {
  color: #a0aec0;
  font-weight: 700;
  white-space: nowrap;
}

/* Vẽ line nối giữa các step */
.step-nav li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 80%;
  width: 45%;
  height: 2px;
  background: #e2e8f0;
  transform: translateY(-50%);
  z-index: 1;
}

/* Ẩn line trước bước đầu và line sau bước cuối */
.step-nav li:first-child::before,
.step-nav li:last-child::after {
  display: none;
}

/* ========== STATE: COMPLETED ========== */
/* Circle thành check và xoá số */
.step-nav li.completed .step-number {
  background: #38a169;      /* xanh lá */
  color: transparent;      /* ẩn số hiện tại */
}
.step-nav li.completed .step-number::before {
  content: "\f00c";         /* FontAwesome check */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  color: #fff;
  font-size: 1rem;
}
/* Label xanh, có gạch chân */
.step-nav li.completed .step-label {
  color: #38a169;
  text-decoration: underline;
}
/* Line hai bên xanh */
.step-nav li.completed::after {
  background: #38a169;
}

/* ========== STATE: ACTIVE ========== */
/* Circle cam + label cam */
.step-nav li.active .step-number {
  background: #dd6b20;
  color: #fff;
}
.step-nav li.active .step-label {
  color: #dd6b20;
}
/* Line bên phải cam */
.step-nav li.active::after {
  background: #dd6b20;
}
.step-nav li.completed,
.step-nav li.active {
  cursor: pointer;
}



/* form style */
.left-panel img { 
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px;
    width: 100%;
    display: block;
}
.left-panel h3 { margin:0; font-size:1.25rem; color:#2d3748; }
.left-panel .addr { font-size:.95rem; color:#4a5568; margin:0rem 0; }
.left-panel h4 { font-size:1rem; color:#2d3748; margin-bottom:.5rem; }

.summary-total { font-size:1.1rem; font-weight:600; margin-top:1rem; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 1) Bật lại <hr> */
.left-panel hr {
  display: block !important;      /* override flatsome */
  width: 100% !important;
  height: 1px !important;
  margin: 1rem 0 !important;
  border: none !important;
  background-color: #000 !important;
  box-sizing: border-box;
}
/* 2) Kéo 2 dòng date/time về cùng một hàng */
/* a) cho phép 2 thẻ <p> chứa date & time float cạnh nhau */
.left-panel p:nth-of-type(3),
.left-panel p:nth-of-type(4) {
  float: left;
  width: calc(50% - 0.5rem);
  margin-right: 1rem;
}

/* b) bỏ margin phải cho cột time */
.left-panel p:nth-of-type(4) {
  margin-right: 0;
}

/* c) xóa float sau khi xong, để phần “Tổng tiền” không bị dòng trên bao quanh */
.left-panel .summary-total {
  clear: both;
}

/* (Optional) nếu bạn muốn các label/input nằm sát nhau hơn */
/* căn chỉnh padding/margin bên trong */
.left-panel p:nth-of-type(3) label,
.left-panel p:nth-of-type(4) label {
  display: block;
  margin-bottom: .25rem;
}
.left-panel p:nth-of-type(3) input,
.left-panel p:nth-of-type(4) input {
  width: 100%;
  height:38px!important;
}

/* right form */
/* cho container chứa h4 + nút thành 1 hàng */
.for-row {
  display: flex;
  align-items: center;
  gap: 1rem;        /* khoảng cách giữa h4 và .for-buttons */
  margin: 1rem 0;   /* giống khoảng cách trước/sau các section khác */
}

/* reset margin mặc định của h4 để không cao quá */
.for-row h4 {
  margin: 0;
  font-size: 1rem;  /* giữ đúng size như .right-panel h4 khác */
  color: #2d3748;   /* cùng màu với các tiêu đề h4 khác */
  width:40%;
}

/* .for-buttons như cũ */
.for-buttons {
  display: inline-flex;
  gap: .5rem;
}
.right-panel label { display:block; margin-bottom:.25rem; font-weight:600; color:#2d3748; }
.right-panel input, .right-panel select, .right-panel textarea {
  width:100%; padding:.5rem .75rem; margin-bottom:0rem;
  border:1px solid #cbd5e0; border-radius:4px; font-size:.95rem; color:#2d3748;
  border-radius: 8px;
}
.two-cols { display:flex; gap:1rem; }
.two-cols > div { flex:1; }
.email-note {
  display: block;
  margin-top: 0.4rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: #718096;
}
.for-btn {
  display:inline-block; padding:.5rem 1rem; margin-right:.5rem;
  border:1px solid #cbd5e0; border-radius:4px; background:#fff; cursor:pointer;
  line-height: 1.3;margin-bottom: 0em;
}
.for-btn.active { background:#d69e2e; border-color:#d69e2e; color:#fff; }


/* container của 2 options */
.radio-group {
  display: flex;
   -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    gap: .75rem;
}
/* mỗi option bọc chung */
.radio-option {
 display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: 1rem;
    background: #fff;
    cursor: pointer;
    gap: 20px;
    transition: all .3s ease;
}
/* icon tròn */
.check-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #fff;
    color: #ccc;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    border: 1px solid #ccc;
}
.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}
.radio-option .radio-label {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    gap: 12px;
    -webkit-box-flex: 1;
    flex: 1;
}
.radio-option .radio-label .title {
    font-weight: 500;
}
.radio-option .radio-label .opt-price {
    font-weight: 700;
    color: #1f2937;
    font-size: 1rem;
    white-space: nowrap;
    text-align: right;
}
.radio-option .radio-label .label-footer {
    font-size: 12px;
    color: #6b7280;
    margin-top: .5rem;
    line-height: 1.4;
}
#remain_amount {
    font-weight: 700;
    color: #1f2937;
}
/* khi được chọn (đã checked) hoặc có class .selected */
.radio-option.selected {
  border: 1px solid #024834;
    background-color: #eefffa;
    box-shadow: 0 0 0 1px #024834;
}
.radio-option.selected .check-icon {
 border-color: #000;
    background-color: #024834;
    color: #fff;
}

/* ẩn luôn input radio */
.radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.submit-button-payment {
    display:flex;
    justify-content: center;
    margin-top:20px;
}
.agreement {
  font-size:.875rem; color:#718096; margin-top:0rem;
  display:flex;
    justify-content: center;
}
.agreement a { color:#3182ce; text-decoration:underline; padding: 0px 5px; }

/* dấu sao * style chung */
.required-star {
  color: #dd6b20;
  margin-left: 0.25em;
  font-weight: bold;
  display: inline-block;
}



/* --- Container chung cho phần trên cùng của nagivation trang tài khoản --- */
.az-account-header {
  border-bottom: 1px solid #eee;
}
.az-account-top {
  display: flex;
  gap: 1em;
  align-items: center;
}
.az-account-avatar img{
  border-radius: 50% !important;
  width: 70px!important; 
  height: 70px!important;
  object-fit: cover!important;
  padding: .25rem;
  background-color: #fff;
    border: 1px solid #dee2e6;
}
.az-account-info  {
  line-height:1.2;
}
.az-account-info h3 {
  margin: 0;
  font-size: 1em;
}
.az-account-info p {
  margin: 0.2em 0;
  font-size: 0.8em;
  color: #555;
}
.az-link-profile {
  font-size: 0.9em;
  color: #007acc;
  text-decoration: underline;
}
/* Ví tiền */
.az-account-wallet {
  margin-top: 1em;
  display: flex;
  gap: 1em;
  align-items: center;
  background-color: #fff3cd !important;
  border-radius:8px;
  padding: .7rem;
  justify-content: space-between !important;
  display: flex !important;
    flex-wrap: nowrap;
}
.az-wallet-label {
  font-weight: 400;
  font-size: 0.85em;
  white-space: nowrap;
  margin-bottom:2px;
}
.az-wallet-value {
  font-size: 0.9em;
  margin-right: auto;
  color: #d09e3f;
  font-weight: 700;
  margin-bottom: 0px;
}
.az-wi-topup {
  background-color: #c2922f;
  border-color: #c2922f;
  border-radius: 12px !important;
  transition: none;
  font-size: .75rem !important;
  justify-content: center !important;
  display: flex !important;
  margin-right:0px;
  white-space: nowrap;
  margin-bottom: 0px;
}
.az-wi-topup i {
    display: flex;
    align-items: center;
}
@media (max-width: 768px) {
.az-wi-topup i {
    color:#fff!important;
}
.az-wi-topup{
    color:#fff!important;
    padding: 0px 12px !important;
}
  }
/* Navigation items */

.woocommerce-MyAccount-navigation li.is-active a {
  color: #c2922f;
  font-weight: 600;
}
/*Ví tiền*/
/* qr code*/
/* Container chính */
.az-pay-page {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}
.az-pay-left {
  flex: 1 1 320px;
}
.az-pay-right {
   display: flex;
  flex-direction: column;
  align-items: center;      /* canh giữa theo trục ngang */
  justify-content: center;  /* canh giữa theo trục đứng nếu cần */
  text-align: center;       /* canh chữ ở giữa */
  padding: 20px;            /* nếu bạn có padding riêng */
  border-radius: 8px;
  color:#fff;
  position: relative;
}
.az-pay-right h4 {
  color:#fff;
}
.az-pay-right img:not(.scanner-bar):not(.qrcode-border) {
  display:flex;
  justify-content: center;
  border-radius: 8px;
}
.az-pay-right .qrcode-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1em;
}

/* QR gốc */
.az-pay-right .qrcode-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

/* border 4 góc */
.az-pay-right .qrcode-border {
position: absolute;
    top: 10px;
    left: 10px;
    width: 90%;
    height: 90%;
    pointer-events: none;
}

/* scanner-bar chạy animation */
.az-pay-right .scanner-bar {
  position: absolute;
  top: -3%;      /* bắt đầu ở mép trên khung */
  left: 6%;    /* căn lệch cho vừa khung */  
  width: 88%;
  height: 100px; /* hoặc bao nhiêu bạn muốn */
  pointer-events: none;
  animation: scan-bar 3s infinite cubic-bezier(.45, .03, .81, .63);
}

@keyframes scan-bar {
  /* 0%: ở trên, nhưng ẩn để sangtrọng */
  0%   { transform: translateY(-80%); opacity: 0; }
  /* 5%: mới hiện, vẫn ở trên */
  5%   { transform: translateY(-80%); opacity: 1; }
  /* 90%: chạy đến đáy khung, vẫn hiện */
  90%  { transform: translateY(100%);  opacity: 1; }
  /* 95%→100%: ẩn dần, đồng thời giữ đáy */
  95%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Expiry + Details */
.az-pay-expiry { 
  background:#fff8f0; padding:12px; border:1px solid #f0cbb8; border-radius:6px;
  text-align:center; margin-bottom:16px;
}
.az-pay-expiry p { margin: 0; color: #c37a3b; }
.az-pay-expiry h2 { margin: 8px 0; font-size: 2rem; color: #c37a3b; }

.az-pay-details {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}
.pay-logo span { line-height: 2.4em; }
.pay-logo {
    display: flex;
    align-items: center;
    padding-bottom: 7px;
    border-bottom: 1px solid #dbdddf;
}
.pay-logo img { margin-right: 8px; }
.pay-list { list-style: none; padding: 0; margin: 0 0 12px; }
.pay-list li {
  display: flex;
    align-items: center;
    margin-left: 0px !important;
    line-height: 2.4em;
    padding-bottom: 7px;
    padding-top: 7px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
}
.pay-list strong { width: 120px; }

.copy-btn {
  display: flex;
   margin-left: auto;
   line-height: 1.5em;
  align-items: center;
  gap: 4px;       /* khoảng cách giữa icon & text */
  background: none;
  color: #737475;
  cursor: pointer;
  font-size: 0.8em;
  margin-right:0px;
  padding:5px;
    justify-content: center;
    border: 1px solid #dbdfe9;
    border-radius: 6px;
    position: relative;
    font-weight:500;
    margin-bottom:0px;
}

.copy-btn i {
  font-size: 1em; /* điều chỉnh kích thước icon nếu cần */
  /* nếu bạn dùng font-icon, class .icon-copy sẽ vẽ ra hình clipboard */
}
.pay-note {
  display: flex;
  align-items: center;
  color: #d9534f;
  gap: 5px;
}
.pay-note .icon-info { margin-right: 6px; }

/* QR & hướng dẫn */
.az-pay-qr h4 {
  margin-top: 0;
  font-size: 1.1em;
  color: #fff;
}
.az-pay-qr img {
  display: block;
  margin: 12px auto;
  background: #fff;
  border-radius: 8px;
}
.qr-instruction {
  display: flex;
  align-items: center;
  margin: 12px 0;
}
.qr-instruction i { margin-right: 6px; }
.btn-download {
  display: inline-block;
  background: #fff;
  color: #333;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}
.qr-auto, .qr-loading { margin-top: 12px; font-size: 0.9em; }
.qr-loading { display: flex; align-items: center; }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Row 2: Cancel */
.az-pay-cancel-wrap { text-align: center;display: flex
;flex-direction: column; }
.az-btn-danger {
  background: #d9534f!important;
  border: none;
  color: #fff!important;
  cursor: pointer;
  font-size: 1.1em;
}

/* Thông báo expired */
.pay-expired {
  text-align: center;
  padding: 20px;
  font-size: 1.2em;
  color: #d9534f;
}



/* === Ví tiền chung === */
.az-wallet {  padding:2px; border-radius:8px; }
.az-wallet-top { margin-bottom:20px; }
.az-wallet-title { margin:0 0 10px; font-size:1.5em; }

/* Card */
.az-wallet-card { background:#fff; display:flex; justify-content:space-between; align-items:center;
  padding:15px; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.1);
}
.az-wallet-balance { display:flex; align-items:center; }
.az-wallet-icon { font-size:2em; margin-right:12px; }
.az-wallet-info .az-wi-row {
       display: flex;
    align-items: baseline;
}
.az-wallet-icon i {
    margin-bottom: 50px;
    width:24px;
    height:24px;
}

.az-wi-label { font-weight:500; margin-right:6px; }
.az-wi-value { font-size:1.1em; }
.azh-wi-label, .azh-wi-value { font-size:0.9em!important; }
.eye-show, .eye-hide { vertical-align: middle; }
.js-toggle-balance { background:none; border:none; padding:0; cursor:pointer;margin-left:10px; } 
.az-btn-deposit {
    background: #000;
    color: #fff;
    padding: 1px 10px !important;
    border: none;
    border-radius: 8px !important;
}

/* Tabs */
.az-wallet-tabs-wrap { background:#e2e6eb; border-radius:6px; }

.az-wallet-tabs li, .az-wallet-export-csv {
  padding: 10px 15px;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-weight: 500;
    color: #333;
    background: transparent;
    margin-bottom: 0px;
    margin-left: 0px !important;
}
.az-wallet-tabs li.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #d2993f transparent transparent transparent;
}
@media (max-width: 768px) {
.az-wallet-tabs li.active {
        margin-left: 0px !important;
    }
    .col-inner ul.az-wallet-tabs > li {
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }
}
@media (max-width: 549px) {
    .az-btn-deposit {
    font-size:14px!important;
    padding: 1px 5px !important;
}
.az-wi-label {
    font-size: 14px!important;
}
.azh-wi-label {
    font-size: 12px!important;
}
.az-wallet-tabs li {
    padding: 10px 10px;
  font-size:14px!important;
}
}
.az-wallet-tabs li.active { background:#d2993f; color:#fff; border-radius: 5px; }

/* Tab content */
.az-wallet-tab-content { display:none; padding:20px; }
.az-wallet-tab-content.active { display:block; background:#fff; border-radius:0 0 6px 6px; }

/* ===Tab Ví tiền Layout 2 cột === */
.az-deposit-form.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 768px) {
  .az-deposit-form.two-col {
    grid-template-columns: 1fr;
  }
  .az-wallet-tabs li.active {
      margin-left:0px!important;
  }
}

/* Left column */
.az-deposit-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.az-deposit-presets label {
  border:1px solid #3b7dec;
  border-radius:20px;
  padding:6px 12px;
  cursor:pointer;
  user-select: none;
}
.az-deposit-presets input {
    margin-right: 6px;
    margin-bottom: 0px;
}

/* Input với suffix */
.az-input-with-suffix {
  display:flex;
  margin-bottom:6px;
}
.az-input-with-suffix input {
  flex:1;
  padding:8px;
  border:1px solid #ccc;
  border-right:0;
  border-radius:4px 0 0 4px;
}
.az-input-with-suffix span {
  background:#eee;
  padding:8px 12px;
  border:1px solid #ccc;
  border-radius:0 4px 4px 0;
  height:38px;
}

/* Note/chữ màu đỏ */
.az-form-note {
  color:#c00;
  font-size:0.9em;
  margin-bottom:12px;
}

/* Summary */
.az-deposit-summary {
  display:none;
  margin-bottom:12px;
}
.az-deposit-summary table {
  width:100%;
  border-collapse: collapse;
}
.az-deposit-summary td {
  padding:4px 0;
}
.az-deposit-summary td:first-child { text-align:left; }
.az-deposit-summary td:last-child  { text-align:right; }

/* Invoice Form */
.az-invoice-primary {
     background: #cfe2ff;
    border-radius: 4px;
    padding: 0.2rem 1rem !important;
}
.az-invoice-toggle {
  margin-bottom:8px;
}
.az-invoice-toggle label {
  margin-top:8px;
}
.az-invoice-form label {
  display:block;
  margin-bottom:8px;
}
.az-invoice-form input[type='text'] {
  width:100%; padding:6px; border:1px solid #ccc; border-radius:4px;
}

/* Right column */
.az-deposit-methods label {
  display:flex;
  align-items:center;
  border:1px solid #ddd;
  border-radius:4px;
  padding:8px;
  margin-bottom:10px;
  cursor:pointer;
}
.az-deposit-methods input { margin-right:8px; }
.az-deposit-methods .logo {
  margin-left:auto;
  display:block;
}

/* Button */
.az-deposit-submit {
  width:100%;
  padding:12px 0;
  border:none;
  border-radius:6px;
  font-size:1em;
}
.az-btn-primary.az-deposit-submit {
  background:#3b7dec;
  color:#fff;
}

/* Bảng lịch sử */
.az-history-table th { background:#003366; color:#fff; }
.az-history-table td, .az-history-table th { padding:8px; }
.az-status { padding:4px 8px; border-radius:4px; font-size:0.9em; }
.az-status-success    { background:#e6f4ea; color:#2a7f43; }
.az-status-processing { background:#e8f1ff; color:#0b3d91; }
.az-status-failed     { background:#fcebea; color:#c12a2a; }

/*Quản lý điểm*/
/* 1. Hạng thành viên*/
/* ----- Rank card ----- */
.rank-card {
  padding: 1rem;
}
.rank-header {
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
}
.rank-header .rank-badge {
    width: 32px;
    height: auto;
    margin-top: -5px;
}
.rank-info {
  text-align: left;
  font-size: 0.75rem;
  margin-top: 0.75rem;
  white-space: nowrap;
}
.rank-info p {
  margin: 0.3rem 0;
}
.rank-info strong {
  color: #333;
}

.progress-bar-container {
    padding-inline: 12px;
    padding-block: 32px;
    }
    .progress-bar-wrapper {
  position: relative;
  overflow: visible; /* cho phép icon tràn ra */
}
.progress-bar { position: relative; background: #eee; border-radius: 8px; overflow: hidden;  width: 100%; height: 100%;}
.bar { display: block; width: 100%; height: 8px; position: relative; }
.progress { display: block; height: 100%; background: #f5a623; position: relative; }
.icon-car { position: absolute;
  top: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 2;}
.progress-info {
    left: 87%;
    top: 0%;
    position: absolute;
    display: flex
;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: column;
    transform: translate(-47%, 68%);
}
.payment { font-weight: 700; margin-right: 40px; font-size:12px; white-space: nowrap;}
.icon-flag { margin: 0 4px; }

.title.last { color: #333;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  margin-top: 12px;
  margin-right: 30px; }
  
/* Hạng Thường */
.title.last.rank-hang-thuong, .user-info .member-tier.tier-hang-thuong {
  background: #eee;
  color: #666;
}

/* Hạng Bạc */
.title.last.rank-hang-bac, .member-tier.tier-hang-bac {
  background: #dadcdf;
  color: #333;
}

/* Hạng Vàng */
.title.last.rank-hang-vang, .member-tier.tier-hang-vang {
  background: #f4c430;
  color: #333;
}

/* Hạng Bạch Kim */
.title.last.rank-hang-bach-kim, .member-tier.tier-hang-bach-kim {
  background: #d4d4d4;
  color: #333;
}

/* Hạng Kim Cương */
.title.last.rank-hang-kim-cuong, .member-tier.tier-hang-kim-cuong {
  background: #8ddada;
  color: #222;
}


.az-points-wrapper { margin: 1.5em 0; }
.az-cards { display: flex; gap: 1rem; flex-wrap: wrap;margin-bottom: 20px; }
.azh-card {
  background:#fff; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,.1);
  padding:1rem; flex:1; min-width:200px; position:relative;height:auto;
}
.azh-card {
  display: flex;
  flex-direction: column;
justify-content: space-between;
}
.azh-card h3 { font-size:1.1rem; margin-bottom:.5rem; display:flex; align-items:center;color: #d2993f; margin-right: -110px;
}
@media (max-width: 768px) {
.azh-card h3 { margin-right: -70px;
}
}
@media (max-width: 549px) {
    .azh-card h3 {
        margin-right: -50px;
    }
}
.azh-card h3 .dashicons { margin-right:.5em; color:#d2993f; }
.az-card-desc { font-size:.875rem; color:#555; margin-bottom:.5rem; }
.az-card-value { font-size:1.5rem; font-weight:bold; color:#ff6d01; }
.az-btn-quoidoi,
.az-btn-wheel, .az-btn-chi-tiet { background:#d2993f; color:#fff; text-decoration:none; padding:.5em 1em; border-radius:8px; display:inline-block;float: right; margin-right: 0; margin-left: auto;line-height: 1.2em;margin-bottom: 0em!important}
.azh-card img {
    height: 20px;
    width: 20px;
    margin-right:5px;
}
/* — Tab “Hạng thành viên” — */

/* 1) Overview */
.tab-panel#rank .rank-overview {
  padding: 1rem;
  background: #e3f2f9;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.tab-panel#rank .rank-overview h3 {
  margin-bottom: .5rem;
  text-align: center;
}
.tab-panel#rank .rank-overview p {
  margin: .3rem 0;
}

/* 1) Wrapper cho badges */
.rank-badges {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 1rem;
}

/* 2) Mỗi badge chiếm 1 phần đều nhau */
.rank-badges .badge-item {
  position: relative;
  flex: 1;
  text-align: center;
  z-index: 1;     /* badge luôn trên đường kẻ */
  cursor: pointer;
  opacity: 0.6;
  transition: opacity .2s;
}
.rank-badges .badge-item.active,
.rank-badges .badge-item:hover {
  opacity: 1;
}

/* 3) Vẽ đường kẻ từ chính giữa badge tới badge kế tiếp */
.rank-badges .badge-item:not(:last-child)::after {
  content: "";
    position: absolute;
    top: 25%;
    right: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 82%;
    background: #0a6e42;
    border-radius: 2px;
    z-index: 0;
    left: 109px;
}
.badge-item img {
  display: block;
  margin: 0 auto;
  width: 48px;
  height: 48px;
}
.badge-item span {
  display: block;
  margin-top: .5rem;
  font-weight: 600;
}
.badge-item small {
  display: block;
  font-size: .85rem;
  color: #666;
}

/* 3) Chi tiết từng rank */
.rank-details-content {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  background: #fafafa;
}
.rank-details h4 {
  margin-top: 1rem;
  font-size: 1rem;
}
.rank-details ul {
  margin: .5rem 0 1rem 1.2rem;
}
.rank-details ul li {
  margin-bottom: .3rem;
}
@media (max-width: 768px) {
 .badge-item span {
     display:none;
 }
 .rank-badges .badge-item:not(:last-child)::after {
        top: 35%;
        width: 56%;
        left: 56px;
}
}
@media (max-width: 549px) {
    .rank-badges .badge-item:not(:last-child)::after {
       top: 25%;
        width: 48%;
        left: 50px;
}
.rank-badges .badge-item[data-slug="hang-thuong"] {
  margin-top: -15px;
}
.rank-badges .badge-item[data-slug="hang-thuong"] img {
 margin-top: -8px;
}
}
/* === AZHOUSE POINTS TABS === */

.az-tabs li {
  padding: 10px 25px;
  text-align: center;
  cursor: pointer;
  position: relative;
  font-weight: 500;
  color: #333;
  background: transparent;   /* đảm bảo không đè trắng */
  margin-bottom: 0px;
  margin-left: 0px!important;
}

.az-tabs li.active {
  background: #d2993f;
  color: #fff;
}

/* Bo góc cho tab active khớp với container */
.az-tabs li.active {
  border-radius: 5px;
}
@media (max-width: 767px) {
    .azh-card {
  min-width: 150px;
}
  /* 1) Đè rule Flatsome */
  .col-inner ul.az-tabs > li {
    margin-left: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 2) Căn tabs về bên trái */
  .col-inner .az-tabs {
    justify-content: flex-start !important;
  }
}
/* Mũi tên nhọn */
.az-tabs li.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #d2993f transparent transparent transparent;
}

.az-tab-contents { background:#fff; border:1px solid #f1f3f5; border-radius:0 0 8px 8px; padding:1rem; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.az-event-text { color:#28a745; font-weight:600; text-align:center; }
/* ----------------------------------------------
   1. Table mặc định (desktop)
---------------------------------------------- */
.az-history-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 2rem;
}

/* Header */
.az-history-table thead {
  background: #002c5f;
}
.az-history-table th {
  padding: 12px 16px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  text-transform: none; /* chữ thường bình thường, nếu muốn IN HOA thì put uppercase */
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.az-history-table th:last-child {
  border-right: none;
}

/* Body */
.az-history-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
}
.az-history-table td:last-child {
  border-right: none;
}

/* Zebra */
.az-history-table tbody tr:nth-child(odd) {
  background: #f9f9f9;
}
.az-db-table tbody tr:hover {
  background: #f1f7fc;
}

/* Positive / Negative */
.az-db-table .positive { color: #2eb85c; font-weight: bold; }
.az-db-table .negative { color: #e55353; font-weight: bold; }

/* Giới hạn độ rộng cột ID Mã tin */
.az-history-table td[data-label="ID Mã tin"] {
  width: 100px;
}

/* ----------------------------------------------
   2. Responsive (mobile ≤768px)
---------------------------------------------- */
@media (max-width: 768px) {

  .az-history-table,
  .az-history-table thead,
  .az-history-table tbody,
  .az-history-table th,
  .az-history-table td,
  .az-history-table tr {
    display: block;
  }

  /* Ẩn header gốc */
  .az-history-table thead {
    display: none;
  }

  /* mỗi dòng thành một “card” */
  .az-history-table tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem;
    background: #fff;
  }

  /* mỗi ô hiển thị label + giá trị */
  .az-history-table td {
    position: relative;
    padding-left: 50%;
    text-align: left;
    border: none;
    border-bottom: 1px solid #eee;
    text-align:left!important;
  }
  

  /* lấy label từ data-label */
  .az-history-table td:before {
    position: absolute;
    top: 0;
    left: 0.75rem;
    width: 45%;
    padding-right: 0.5rem;
    white-space: nowrap;
    font-weight: 600;
    content: attr(data-label);
  }
}


/* ===== Quy đổi điểm – mockup style ===== */
.az-exchange-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}

.az-exchange-input-group {
  display: flex;
  width: 100%;
  max-width: 500px;
  margin: 1rem 0;
}

.az-exchange-input-group .input-prefix {
  background: #d2993f;
  color: #fff;
  padding: .75rem 1rem;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  height:38px;
}

#az-exchange-input {
  flex: 1;
  padding: .75rem 1rem;
  border: 1px solid #ccc;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  font-size: 1rem;
}

.az-exchange-summary {
  background: #e3f2fd;
  padding: 1rem;
  border-radius: 6px;
  width: 100%;
  max-width: 500px;
  margin-bottom: 1rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin: .5rem 0;
}

.summary-label {
  font-weight: 500;
}

.summary-value {
  font-weight: bold;
}

.az-exchange-submit {
    padding: 8.5px 36.5px;
    text-transform: uppercase!important;
    background: #d2993f;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.3em;
}

.az-exchange-submit:hover {
  opacity: .9;
}
.az-exchange-note {
    text-align:center;
}
/* Vòng quay may mắn
/*.hc-luckywheel{
    position:fixed;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}*/
.hc-luckywheel ul,
.hc-luckywheel li {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: 0px !important;
}

.hc-luckywheel {
    position: relative;
    width: 300px; /*Change this when change size*/
    height: 300px; /*Change this when change size*/
    border-radius: 50%;
}

.hc-luckywheel-container {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background-clip: padding-box;
    background-color: #ffcb3f;
    -webkit-transition: transform 6s ease;
    transition: transform 6s ease;
}

.hc-luckywheel-container canvas {
    width: inherit;
    height: inherit;
    border-radius: 50%;
}

.hc-luckywheel-list {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    z-index: 2;
}

.hc-luckywheel-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #e4370e;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

.hc-luckywheel-item span {
    position: relative;
    display: block;
    padding-top: 20px;
    /* width: 50px; */
    margin: 0 auto;
    text-align: center;
    -webkit-transform-origin: 50% 150px; /*Change this when change size*/
    -ms-transform-origin: 50% 150px; /*Change this when change size*/
    transform-origin: 50% 150px;
} /*Change this when change size*/

.hc-luckywheel-item img {
    position: relative;
    top: -20px;
    left: 0px;
    width: 100px; /*Change this when change size*/
    height: 100px;
} /*Change this when change size*/

.hc-luckywheel-btn {
    position: absolute;
    left: 109px; /*Change this when change size*/
    top: 109px; /*Change this when change size*/
    z-index: 3;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    color: #f4e9cc;
    background-color: #e44025;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
    text-decoration: none;
}

.hc-luckywheel-btn::after {
    position: absolute;
    display: block;
    content: "";
    left: 10px;
    top: -46px;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 30px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #e44025;
}

.hc-luckywheel-btn.disabled {
    background: #b07a7b;
    color: #ccc;
}
.box_lucky_wheel{
	display: flex;
	align-items: center;
	justify-content: center;
}
.hc-luckywheel-btn.disabled::after {
    border-bottom-color: #b07a7b;
}
.box_tab_my_point{
	overflow: hidden;
}
.title_lucky_wheel{
	font-size: 18px;
}
section#luckywheel.hc-luckywheel {
  display: flex !important;
  justify-content: center;
  position: relative;
  width: 300px;  /* trùng với canvas */
  margin: 0 auto 1.5rem;
}

/**Bảng giá dịch vụ/
/* --- Mobile: 3 cột, scroll ngang --- */
@media (max-width: 767px) {
  .az-pricing-cards {
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;                         /* khoảng cách giữa các card */
    overflow-x: auto;                   /* bật scroll ngang */
    padding-bottom: 10px;               /* để tránh cắt chân shadow */
    -webkit-overflow-scrolling: touch;  /* mượt trên iOS */
    scroll-snap-type: x mandatory;      /* snap nếu muốn */
  }

  .az-pricing-cards .az-card {
    flex: 0 0 calc((100% - 40px) / 3);  /* (100% – 2*gap) / 3 */
    max-width: calc((100% - 40px) / 3);
    scroll-snap-align: start;           /* snap nếu bật scroll-snap-type */
  }

  /* loại bỏ margin phải của card cuối cùng nếu bạn không dùng gap */
  .az-pricing-cards .az-card:last-child {
    margin-right: 0;
  }
}

/* Container chung */
.az-service-pricing {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Tiêu đề section */
.az-section-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: .5rem;
}

/* Cards wrapper */
.az-pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Card chung */
.az-card {
  flex: 1;
  min-width: 280px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Màu nền theo loại */
.az-card-lightgreen    { background: #E6FFEA; }
.az-card-lightblue     { background: #E8F5FF; }
.az-card-lightyellow   { background: #FFF9E6; }
.az-card-lightpurple   { background: #F5E6FF; }
.az-card-lightsalmon   { background: #FFE6E6; }

/* Heading card */
.az-card-heading {
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/* Meta list */
.az-card-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.az-card-meta li {
  margin-bottom: .5rem;
  line-height: 1.4;
}

/* Giá và thời gian */
.az-price    { font-weight: bold; }
.az-duration { font-weight: bold; }

/* Button “Xem chi tiết” */

.az-btn-green  { background: #4DC682; }
.az-btn-purple { background: #8C00FF; }
.az-btn-red    { background: #FF0000; }
.az-btn-gold   { background: #C99A44; }

/* Icon nhãn */
.az-label-img {
  display: block;
  max-width: 100px;
  margin: 0 auto 1rem;
}

/* Popup detail styling */
.az-detail-popup {
  max-width: 600px;
  padding: 20px;
}
.az-detail-popup h2 { margin-top: 0; }
.az-detail-popup h3 { margin: 1rem 0 .5rem; }
.az-detail-popup ul { padding-left: 1.2rem; }

/*Quản lý đăng tin*/
/* === Header: Search + Tabs + Controls === */
.manage-listings-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
}

/* Search box */
.listing-search {
  position: relative;
  flex: 1 1 300px;
  max-width: 600px;
}
.listing-search input[type="search"] {
  width: 100%;
  height: 40px;
  padding: 0 48px 0 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
}
.listing-search .search-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}
.listing-search .search-btn svg {
  width: 20px;
  height: 20px;
  stroke: #555;
}

/* Status tabs */
.listing-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.listing-status-tabs .tab {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 100px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.listing-status-tabs .tab.active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Controls: select all + sort */
/* === CHỈNH CHO Select All ở trái, Sort ở phải === */
.listing-controls {
  display: flex;
  justify-content: space-between; /* đẩy 2 phần ra 2 đầu */
  align-items: center;
  width: 100%;
  margin-top: 16px; /* nếu cần khoảng cách so với tabs */
}

.listing-controls .select-all {
  font-weight: 500;
  font-size: 14px;
}
.listing-controls .select-all input {
  margin-right: 8px;
}

/* Sort dropdown */
.listing-sort {
  position: relative;
  display: inline-block; /* bao quanh cả button + ul */
}
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;            /* khoảng cách giữa các phần tử */
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 100px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.sort-btn svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke: #555;
}
.sort-icon svg,
.arrow-icon svg {
  display: block;
}

.sort-label {
  white-space: nowrap;
}

.sort-btn:hover {
  background: #f9f9f9;
  border-color: #ccc;
}
.sort-options {
  display: none;
  position: absolute;
  top: 100%;      /* ngay bên dưới button */
  left: 0;
  margin: 0;      /* đảm bảo không có khe hở */
  padding: 4px 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 8px;
  z-index: 100;
  list-style: none;
}
.sort-options li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.listing-sort:hover .sort-options,
.listing-sort:focus-within .sort-options {
  display: block;
}
.sort-options li a {
display: block;
white-space: nowrap; 
  padding: 8px 16px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.sort-options li a:hover {
   background: #000;
  color: #fff;
}

/* === Listing cards === */
/* === Listing cards === */
.manage-listings-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Single item: 3 cột (thumb | info | actions) */
/* Listing item manager: 2 cột */
.listing-item-manager {
  display: grid;
  grid-template-columns: 1.35fr 1.65fr;       /* hai cột đều nhau */
  grid-template-rows: auto auto auto;
  align-items: start;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 2px 4px 0 rgba(40, 44, 46, .078);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
}

/* Đường kẻ đứng chia giữa 2 cột */
.listing-item-manager::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 44%;
  width: 1px;
  background: #ececec;
  transform: translateX(-.5px);
  pointer-events: none;
}

/* Cột trái: cách lề phải 24px để khỏi đè đường kẻ */
.listing-item-manager > .card-left {
  padding: 12px;
  padding-right: 12px; /* còn lại 12px cho divider */
}

/* Cột phải: cách lề trái 24px */
/* ==== Cho phép dropdown tràn ra ngoài container ==== */
.listing-item-manager,
.card-left {
  overflow: visible !important;
}

/* ==== Đẩy dropdown lên trên nút ==== */
.more-menu {
  /* bỏ top cũ nếu có */
  top: auto !important;
  /* đặt đáy menu chạm đỉnh container card-left */
  bottom: calc(100% + 4px) !important;
  right: 0 !important;

  /* luôn hiển thị trên tất cả */
  z-index: 9999 !important;
}

.listing-item-manager > .li-actions-wrapper {
  padding: 12px;
  padding-left: 12px; /* còn lại 12px cho divider */
}

/* CỘT TRÁI */
.card-left {
    position: relative;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.li-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Thumbnail */
.li-thumb {
  position: relative;
  flex-shrink: 0;
}
.thumb-checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
}
.thumb-checkbox input {
  transform: scale(1.3);
}
.li-thumb img {
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}
/* Badges */
.li-thumb .badge {
  position: absolute;
  left: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.li-thumb .badge.vip { top: 6px; background: #d0021b; }
.li-thumb .badge.status { top: 32px; background: #f2994a; }
/* Title */
.li-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.li-title .card-subtitle {
  font-size: 14px;
  color: #555;
}
/* Info */
.li-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.li-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.li-info h3 a { color: #222; text-decoration: none; }
.card-subtitle { font-size: 14px; color: #555; }
.card-meta {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: #666;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 2) Hàng meta + btn-more */
.li-meta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  top:35px;
  justify-content: space-between;
}
/* Mỗi meta-item 2 dòng */
.meta-item {
  font-size: 14px;
  color: #555;
  line-height: 0.7;
}
.meta-item strong {
  display: block;
  font-weight: 500;
  color: #333;
}

/* btn-more góc trên phải */
.btn-more {
  top: 0px;
  right: 0;
  background: none;
  padding: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(40, 44, 46, .122), inset 0 2px 2px hsla(0, 0%, 100%, .4);
  border-radius:999px;
  border: 1px solid #c1c9d2;
  height:40px;
  width:40px;
  margin-right:0px!important;
}
.more-menu {
  position: absolute;
  top: 28px;
  right: 0;
  display: none;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 6px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.btn-more:hover + .more-menu,
.more-menu:hover {
  display: block;
}
.more-menu li a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
}
.more-menu li a:hover {
  background: #f5f5f5;
}

/* CỘT PHẢI */

.li-actions-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
/* Loại bỏ margin-bottom mặc định của Flatsome cho button trong manage listings */
.manage-listings-list button,
.manage-listings-list .button {
  margin-bottom: 0 !important;
}
/* Stats box */
.stats-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #eff1f5;;
  padding: 12px 16px;
  border-radius: 8px;
  justify-content: space-between;
}
.stats-box .stat {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  row-gap: 0px;
  column-gap: 6px;
  align-items: center;
  white-space: nowrap;
}

/* icon ở (1,1) */
.stats-box .stat svg {
  grid-row: 1 / span 2;    /* chiếm 2 hàng */
  grid-column: 1;
  align-self: center;      /* canh giữa theo trục dọc */
}

/* label ở (1,2) */
.stats-box .stat span {
  grid-row: 1;
  grid-column: 2;
  font-size: 0.75rem;
  color: #333;
  font-weight:400;
}

/* value ở (2,2) */
.stats-box .stat strong {
  grid-row: 2;
  grid-column: 2;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin: 0; /* loại bỏ khoảng cách mặc định */
  text-align:center;
}
.stats-box .divider {
  width: 1px;
  height: 24px;
  background: #ddd;
}

/* Action buttons */
.action-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;         /* không cho wrap xuống hàng */
  overflow-x: auto;          /* nếu quá dài thì scroll ngang */
  justify-content: space-between;
}
.btn-quick-sell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 25px;
  background: #d09e3f;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s;
  margin-right:0px;
}
.btn-quick-sell:hover { background: #333; }
.action-buttons a.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 25px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s;
  margin-right:0px;
}
.action-buttons a.button:hover { background: #f9f9f9; }

/* Notice panel */
.notice-panel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;       /* không wrap */
  justify-content: space-between;

}
.notice-panel .notice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #555;
}
.notice-panel .btn-repost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s;
}
.notice-panel .btn-repost:hover { background: #f9f9f9; }
/* ===========================
   MOBILE (dưới 768px)
   =========================== */
@media (max-width: 767px) {

  /* 2) CARD: 1 CỘT THAY VÌ 2 CỘT */
  .listing-item-manager {
    display: flex !important;
    flex-direction: column;
    padding: 0!important;
  }
  /* Ẩn divider đứng */
  .listing-item-manager::before {
    display: none;
  }

  /* THU GỌN CỘT TRÁI */

  .li-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .li-thumb img {
    width: 100%;
    height: auto;
  }
  /* meta-row chuyển xuống ngay dưới header */
  .li-meta-row {
    gap: 16px;
    top:0px!important;
  }


  
  .listing-status-tabs {
 justify-content: space-between;
}
.stats-box .stat span {
    display:none;
}
.btn-quick-sell {
    gap: 3px;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
}
.action-buttons a.button {
    gap: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
}
.action-button, .stats-box {
    justify-content: space-between;
}
}

/* ----- đăng tin mới ----- */
.dtm-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dtm-row label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.dtm-ttcb input[type='text'], .dtm-ttcb textarea,
.dtm-row input[type='number'],.dtm-row input[type='text'],
.dtm-row select,
.dtm-row textarea, .dtm-section-content input[type='url'], .dtm-section-content textarea, .pccc_row input[type='text'] {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
.dtm-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #666;
}

/* ----- chung cho Hình ảnh / Video / Bản đồ ----- */
.dtm-section {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
}
.dtm-iconbox {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border: 2px dashed #d09e3f;
  border-radius: 0.5rem;
  background: #f1ecc8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dtm-iconbox svg {
  width: 61px;
  height: 61px;
}
.dtm-section-content {
  flex: 1;
}
.dtm-section-content label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.dtm-section-content ul, .dtm-section-content ul li {
  margin-bottom:0;
}


/* cho phép input file “ẩn” nhưng vẫn bắt click */
.dtm-iconbox {
  position: relative;
}
.dtm-iconbox input[type="file"] {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dang-tin-button {
    text-align:center;
}

.button.large {
    font-size: 20px;
    border-radius: 6px;
    line-height: 2em;
    min-height: 2em;
    text-align: left;
    padding: 0 0.5em;
}
.add-button {
    text-align:left;
    font-size: 14px;
}
#add_pccc, #add_room {
   border-radius: 6px;
   background:#65c776;
   border: 2px dashed #65c7761a ;
    line-height: 1.8em;
    min-height: 1.8em;
    text-align: left;
    padding: 0 0.5em;
}

/*header logo*/
.logo-left .logo {
    margin-right: 10px!important;
}
.nav-spacing-xlarge>li {
    margin: 0 8px!important;
}
/*form đăng ký tài khoản*/
/* === Tab header === */
.custom-myaccount-modal .myaccount-modal-tabs {
  display: flex;
  border-bottom: 1px solid #e6e9ec;
  margin-bottom: 1rem;
}
.custom-myaccount-modal .myaccount-modal-tabs .tab {
  flex: 1;
  padding: .75rem 0;
  text-align: center;
  cursor: pointer;
  background: #f8f8f8;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 1rem;
  transition: background .2s, border-color .2s;
}
.custom-myaccount-modal .myaccount-modal-tabs .tab:hover {
  background: #ececec;
}
.custom-myaccount-modal .myaccount-modal-tabs .tab.active {
  background: #fff;
  border-color: #0052cc;
  color: #0052cc;
  font-weight: 600;
}

/* === Show/Hide forms === */
.custom-myaccount-modal .form-login,
.custom-myaccount-modal .form-register {
  display: none;
}
.custom-myaccount-modal.login-mode .form-login {
  display: block;
}
.custom-myaccount-modal.register-mode .form-register {
  display: block;
}

/* === Form và field styling === */
.custom-myaccount-modal form {
  max-width: 480px;
  margin: 0 auto 1rem;
}
.custom-myaccount-modal .form-row {
  margin-bottom: 1.2rem;
}
.custom-myaccount-modal label {
  display: block;
  font-weight: 500;
  margin-bottom: .3rem;
  color: #333;
}
.custom-myaccount-modal .input-text {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

/* === Eye-icon === */
.password-field {
  position: relative;
}
.password-field .input-text {
  padding-right: 2.5em;
}
.password-field .toggle-password {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
}
.password-field .toggle-password:hover {
  color: #333;
}

/* === Nút Submit === */
.custom-myaccount-modal .woocommerce-button.button {
  width: 100%;
  padding: .75rem;
  background: #d09e3f;
  border: none;
  color: #fff;
  font-size: 1rem;
  border-radius: 4px;
  transition: background .2s;
}
.custom-myaccount-modal .woocommerce-button.button:hover {
  background: #b8842d;
}

/* === Checkbox Điều khoản === */
.custom-myaccount-modal .form-row.form-row-wide label {
  display: flex;
  align-items: center;
}
.custom-myaccount-modal .form-row.form-row-wide input[type="checkbox"] {
  margin-right: .5rem;
  width: auto;
  height: auto;
}

/* Thêm padding chung cho nội dung modal */
.custom-myaccount-modal {
  padding: 1.5rem 2rem;
  box-sizing: border-box;
}

/* Nếu bạn đang dùng Flatsome, modal dialog có thể là: */
.ux-modal__dialog,
.zoom-anim-dialog {
  max-width: 480px !important;
  width: 90% !important;
  padding: 0; /* bỏ padding mặc định nếu có */
}

/* Form bên trong modal cũng không sát khung */
.custom-myaccount-modal form {
  padding: 0;
  margin: 0;
}

/* Chỉnh khoảng cách giữa các form-row */
.custom-myaccount-modal .form-row {
  margin-bottom: 1rem;
}
/* row Ghi nhớ – Quên mật khẩu */
.custom-myaccount-modal .remember-lost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-myaccount-modal .lost-password-link {
  font-size: .9rem;
  color: #0052cc;
  text-decoration: none;
}
.custom-myaccount-modal .lost-password-link:hover {
  text-decoration: underline;
}
/* 1) Account-type row: radio + label trên cùng 1 hàng */
.custom-myaccount-modal .account-type-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.custom-myaccount-modal .account-type-row label {
  display: inline-flex;
  align-items: center;
  margin-right: 1.5rem;
}
.custom-myaccount-modal .account-type-row input[type="radio"] {
  margin-right: .5rem;
  vertical-align: middle;
}

/* 2) Terms row: checkbox và text trên cùng 1 hàng, links ngăn cách */
.custom-myaccount-modal .terms-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.custom-myaccount-modal .terms-row label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.custom-myaccount-modal .terms-row input[type="checkbox"] {
  margin-right: .5rem;
  margin-top: .2rem;
}
.custom-myaccount-modal .terms-row a {
  margin: 0 .25rem;
  white-space: nowrap;
}

/* 3) Center nút Đăng ký */
.custom-myaccount-modal .form-register button[name="register"] {
  display: block;
  margin: 1.5rem auto 0;
}
.lightbox-content {
    border-radius:8px;
}

/* Căn giữa và giới hạn chiều rộng form đăng nhập & đăng ký */
.custom-myaccount-modal .form-login,
.custom-myaccount-modal .form-register {
  max-width: 430px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  box-shadow: 0 4px 18px #0001;
  border-radius: 12px;
  background: #fff;
}


/* -------- DESKTOP LAYOUT -------- */
.my-account-wrapper {
  display: flex;
  gap: 30px;
}
.my-account-sidebar {
  flex: 0 0 230px;
  background: #fff;
  border: 1px solid #e6e9ec;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 10px;
}
.my-account-content {
  flex: 1;
  background: #eff1f5;
  border: 1px solid #e6e9ec;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 15px;
}
/* Sidebar icons */
.my-account-sidebar .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  padding:8px;
}
.my-account-sidebar .woocommerce-MyAccount-navigation a i {
  font-size: 1.2em;
  color: #d09e3f;
}

/* -------- HIDE MOBILE ELEMENTS ON DESKTOP -------- */
.my-account-mobile-header,
.my-account-mobile-nav {
  display: none;
}

/* -------- MOBILE LAYOUT ≤768px -------- */
@media (max-width: 768px) {

  /* hide desktop sidebar */
  .my-account-sidebar {
    display: none;
  }
  .my-account-wrapper {
    flex-direction: column;
  }

  /* show mobile header */
  .my-account-mobile-header {
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e6e9ec;
    padding: 0 1rem;
    height: 50px;
  }
  .my-account-mobile-toggle {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    margin-right: .75rem;
    margin-left:-30px;
  }
  .my-account-mobile-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
  }

  /* off-canvas nav */
  .my-account-mobile-nav {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 260px; height: 100vh;
    background: #fff;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 9999;
    padding: 3rem 1rem 1rem;
    overflow-y: auto;
  }
  /* list style reset */
  .my-account-mobile-nav ul {
    list-style: none;
    margin: 0; padding: 0;
  }
  .my-account-mobile-nav li {
    margin-bottom: 12px;
  }
  .my-account-mobile-nav a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 8px;
    border-radius: 4px;
  }
  .my-account-mobile-nav a i {
    font-size: 1.2em;
    color: #d09e3f;
  }

  /* khi mở */
  .my-account-mobile-nav.open {
    transform: translateX(0);
  }
  /* khóa scroll nền */
  body.nav-open {
    overflow: hidden;
  }
}
/* REMOVE BULLETS */
.my-account-sidebar .woocommerce-MyAccount-navigation ul,
.my-account-sidebar .woocommerce-MyAccount-navigation ul li,
.my-account-mobile-nav ul,
.my-account-mobile-nav ul li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}


/* tìm kiếm nổi bật */
.popular-searches {
  margin-top: 15px;
  font-size: 14px;
  color: #fff;
}
.popular-searches .popular-term {
position: relative;
    display: inline-flex;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 16px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 5px;
    color: #04213f;
    transition: all .3s ease-out;
  margin-right: 1px;
    margin-bottom: 6px;
    margin-left: 1px;
}

/* Label “Tìm kiếm nổi bật:” */
.popular-searches strong {
  font-weight: 600;
  margin-bottom: 0px;
}

/* Hover state */
.popular-searches .popular-term:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.azhouse-total-results .fa-solid, .azhouse-total-results .fa-solid strong {
    color: #d09e3f;
}
/* 4) Nếu bạn muốn thu hẹp luôn khoảng cách dưới cột trái */
 div.content_left.large-8.small-12.col {
  padding-bottom: 5px !important;
}

/* CSS cho badge đánh giá trên trang chủ */

    /* --- 2) Badge rating: bắt vào góc trái --- */
    .azhouse-badge-rating {
     position: absolute !important;
    top: 30px !important;
    left: 47px !important;
    z-index: 20 !important;
    cursor: help;
    }

    /* hình shield */
    .azhouse-badge-rating .shield {
      position: relative;
      width: 90px;
      height: 90px;
      background: url("/wp-content/themes/flatsome-child/image/shieldazh.png") no-repeat center/contain;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* số rating */
    .azhouse-badge-rating .rating-num {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      line-height: 1;
    }
    /* nhãn bên dưới */
    .azhouse-badge-rating .rating-label {
      font-size: 12px;
      color: #000;
      margin-top: 2px;
      font-weight: 700;
    }

    /* tooltip */
    .azhouse-badge-rating::before {
      content: attr(data-tooltip);
      position: absolute;
      top: -32px;
      left: 50%;
      transform: translateX(-50%) scale(0);
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
      font-size: 12px;
      pointer-events: none;
      transition: transform .15s ease-out;
    }
    .azhouse-badge-rating::after {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%) scaleY(0);
      border: 6px solid transparent;
      border-top-color: rgba(0,0,0,0.8);
      pointer-events: none;
      transition: transform .15s ease-out;
    }
    .azhouse-badge-rating:hover::before,
    .azhouse-badge-rating:hover::after {
      transform: translateX(-50%) scale(1);
    }
    
/* CSS cho badge đánh giá trên single page */
/* container ảnh phải relative */
.show_to_1024 {
  position: relative;
}

/* badge rating */
.azh-badge-rating {
  position: absolute;
  top: 8px;      /* khoảng cách từ trên cùng */
  left: 8px;     /* khoảng cách từ bên trái */
  z-index: 10;
  cursor: help;
}

/* Shield shape bằng clip-path */
/* Shield shape bằng clip-path */
.azh-badge-rating .shield {
  position: relative;
  width: 90px;
  height: 90px;
  background: url("/wp-content/themes/flatsome-child/image/shieldazh.png") no-repeat center/contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Số rating */
.azh-badge-rating .rating-num {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

/* Label bên dưới */
.azh-badge-rating .rating-label {
  font-size: 12px;
  color: #000;
  margin-top: 2px;
  font-weight:700;
}

/* Tooltip */
.azh-badge-rating::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  pointer-events: none;
  transition: transform .15s ease-out;
}
.azh-badge-rating::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,0.8);
  pointer-events: none;
  transition: transform .15s ease-out;
}
.azh-badge-rating:hover::before,
.azh-badge-rating:hover::after {
  transform: translateX(-50%) scale(1);
}



/* Container hiển thị theo chiều dọc, căn giữa */
.woocommerce-product-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Thu gọn khoảng cách giữa số trung bình và lượt đánh giá */
.woocommerce-product-rating .avg-number {
  margin-bottom: 4px;
  line-height: 1; /* đảm bảo không thừa cao */
}

/* Thu gọn khoảng cách và giảm cỡ font cho lượt đánh giá */
.woocommerce-product-rating .avg-count {
  margin-bottom: 4px;
  font-size: 13px;
  color: #666;
}

/* Thu gọn khoảng cách giữa stars và label */
.woocommerce-product-rating .avg-stars {
  margin-bottom: 4px;
}

/* Phóng to cỡ chữ của label (“Tốt”, “Tuyệt vời”, …) */
.woocommerce-product-rating .avg-label {
  font-size: 16px;
  font-weight: 600;
  color: #d09e3f; /* hoặc màu bạn muốn */
  margin-top: 2px;
}

/* 1) Trên mobile: xuống 2 dòng cho label + nút lọc */
@media only screen and (min-width: 320px) and (max-width: 860px) {
  /* a) Đưa “Lọc xem theo:” lên dòng riêng, 
        các nút button xuống dòng thứ 2 */
  .fc-reviews-filter {
    gap: 1px!important;
  }
  .fc-reviews-filter .filter-label {
    flex: 0 0 100%;
    margin-bottom: 8px;
  }
  .fc-reviews-filter .filter-btn {
    margin-right: 6px;
    margin-bottom: 6px;
     padding: 1px 7px;
  }
/* Bỏ scroll x*/
.img_reviews_box {
        overflow-x: hidden;
}
.fc-reviews-filter {
  margin-top: -5px !important;
}
}

/* ===== Tạo bộ lọc cho phần đánh giá ===== */
/* === GIẢM GAP VÀ KÍCH THƯỚC BUTTON === */
.fc-reviews-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;           /* giảm gap từ 8 xuống 6px */
  margin: 24px 0 16px;
}

/* === THÔNG BÁO KHÔNG CÓ MATCH === */
#reviews-no-match { text-align:center; margin:16px 0; font-style:italic; color:#666; }

.filter-label { font-weight:600; margin-right:8px;padding-bottom: 15px; }
.filter-btn {
  background:#f0f0f0; border:none; padding:1px 10px; border-radius:15px;
  cursor:pointer; display:flex; align-items:center; gap:4px;
  transition:background .2s,color .2s; 
  font-size: 14px;    /* hơi nhỏ hơn */
}
.filter-btn .icon-star { color:#999; }
.filter-btn.active,
.filter-btn:hover {
  background:#d09e3f; color:#fff;
}
.filter-btn.active .icon-star,
.filter-btn:hover .icon-star {
  color:#fff;
}
/* Ẩn comment khi filter */
.commentlist li.show { display: block; }

.star-rating-error {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 8px;
}


/* Ẩn toàn bộ input radio gốc */
.comment-form-rating .star-rating-group input[type=radio] {
  display: none;
}

/* container 2 dòng: label + stars */
.comment-form-rating {
  margin-bottom: 24px;
}
.comment-form-rating .star-rating-label {
  font-weight: 600;
  margin-bottom: 8px;
  white-space: nowrap;
}
.comment-form-rating .star-rating-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* mỗi ô sao */
.comment-form-rating .star-rating-group label.star {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #999;
  transition: transform .2s, color .2s;
}

/* icon và số */
.comment-form-rating .star-rating-group .icon-star {
  font-size: 24px;
}
.comment-form-rating .star-rating-group .star-value {
  font-size: 12px;
  margin-top: 4px;
  color: #666;
}

/* hover 1 label sao sẽ:
   - zoom riêng label đang hover (scale 1.3)
   - đổi màu tất cả label trước đó */
.comment-form-rating .star-rating-group label.star:hover  {
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2)

}
.comment-form-rating .star-rating-group label.star.hovered,
.comment-form-rating .star-rating-group input:checked + .icon-star,
.comment-form-rating .star-rating-group input:checked + .icon-star + .star-value {
  /* màu cho star và số khi hovered hoặc checked */
  color: #ffba00 !important;
}

/* 1) Cho label chỉ rộng tối đa 180px, xuống dòng tự động */
.comment-form-rating .star-rating-label {
  max-width: 180px;    /* bạn test con số này, tăng/giảm cho vừa */
  white-space: normal; /* cho phép wrap */
  line-height: 1.3;    /* khoảng cách giữa 2 dòng */
  margin-bottom: 12px;
}

/* 2) Ép star-group nằm gọn trong form */
.comment-form-rating .star-rating-group {
  display: flex;
  justify-content: space-between; /* các ô sao đều nhau */
  max-width: 450px;               /* tổng chiều rộng tối đa */
  margin: 0 auto;                 /* canh giữa trong form */
  padding: 0 8px;                 /* chừa lề 2 bên */
}

/* 3) Nếu bạn muốn group sát trái, bỏ margin auto: */
/* 
.comment-form-rating .star-rating-group {
  margin-left: 0;
}
*/




div#reviews.woocommerce-Reviews {
    top: 80px;
    border-radius: 8px;
    box-shadow: 2px 6px 16px 4px rgba(33, 33, 33, .16);
    padding: 1.2rem;
}

/*Sửa menu 3 cấp cho flatsome*/
.nav-dropdown>li.nav-dropdown-col{display:block;}
.nav-dropdown{border:1px solid #ddd; padding:0px;border-radius:8px;}
.nav-dropdown .nav-dropdown-col>a, .nav-dropdown li a{font-weight:normal !important; text-transform:none !important;font-size:15px; font-weight:500}
.nav-dropdown .nav-dropdown-col>ul li:hover{background:#db0000}
.nav-dropdown-default>li:hover>a, .nav-dropdown .nav-dropdown-col>ul li:hover>a{color:white}
.nav-dropdown-default>li:hover{background:#F0F0F0}
.nav-dropdown-default>li>a{border-bottom:0 !important}.nav-dropdown-has-arrow li.has-dropdown:before{border-width: 10px;
    margin-left: -10px;}
.nav-dropdown .nav-dropdown-col>ul{border: 1px solid #d2d2d2;margin-top:-40px;box-shadow: 2px 2px 5px #828282;display:none;position: absolute;
    left: 100%;z-index: 9;background: white;min-width: 240px;}
.nav-dropdown>li.nav-dropdown-col{width:100%;border-right:0}
.nav-dropdown .nav-dropdown-col>ul li a{padding:10px;  text-transform: none;color:black}
.header-nav li.nav-dropdown-col:hover >ul{display:block !important}
/*gioi thieu*/
/* 1) Cho icon + text thành 2 cột flex, icon luôn top-aligned */
.vertical-line.icon-box {
  display: flex;
  align-items: flex-start;
	padding-bottom: 15px;
}

/* 2) Tạo khoảng cách từ icon tới text */
.vertical-line.icon-box .icon-box-img {
  margin-right: 15px;
}

/* 3) Vẽ đường kẻ dọc chỉ bên cạnh phần text */
.vertical-line.icon-box .icon-box-text {
  position: relative;
  padding-left: 0px;       /* đẩy text ra khỏi đường kẻ */
}

/* 4) Dùng pseudo-element để kẻ đường bắt đầu ngay dưới icon */
.vertical-line.icon-box .icon-box-text::before {
  content: "";
  position: absolute;
  margin-left: -35px;
  top: 40px;                /* điều chỉnh sao cho đường bắt đầu ngay dưới icon */
  bottom: 0;
  width: 2px;
  background-color: #d09e3f;
}
.gigamall.img .img-inner {
    border-radius: 50px;
}
/* Bắt rộng hết nhánh map-popup */
#map-popup {
  max-width: 800px!important;  /* container ẩn */
}

/* Bắt chung cho tất cả Fancybox inline */
.fancybox__content {
  max-width: 80vw !important;  /* hoặc 800px */
}

/* CSS hiệu ứng bóng lướt NGHIÊNG cho logo*/
#logo:after,#logo:before{transform: skewX(-25deg) translateY(-50%);content:"";position:absolute;top:50%;width:40px;height:100%;background-color:white;z-index:0}
#logo:before{left:0%;animation:light-left 5s infinite alternate linear}
#logo:after{right:-5%;animation:light-right 5s infinite alternate linear}
 
@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}to{left:105%;opacity:0}}@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}to{right:105%;opacity:0}}

/*Tạo mạng lưới cho azhouse*/
/* 1. Wrapper & list */
.store-map-wrapper {
  display: flex;
  gap: 20px;
  margin: 20px 0;
  transition: all .3s ease;
}
.store-list {
  width: 30%;
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #ddd;
  transition: all .3s ease;
}

/* 2. Khi collapsed */
.store-map-wrapper.collapsed {
  gap: 0 !important;
}
.store-map-wrapper.collapsed .store-list {
  display: none;
}
.store-map-wrapper.collapsed .map-container {
  flex: 1 1 100%;
}

/* 3. Map container */
.map-container {
  position: relative;
  flex: 1;
  transition: all .3s ease;
}

/* 4. Leaflet toggle (sau zoom controls) */
.leaflet-bar-toggle {
  background: #fff !important;
  border-bottom: 1px solid #ccc !important;
  width: 26px !important;
  height: 26px !important;
  line-height: 26px !important;
  text-align: center !important;
  cursor: pointer;
}
.leaflet-bar-toggle:last-child {
  border-bottom: none !important;
}
.leaflet-bar-toggle i {
  font-size: 16px;
  color: #333;
}

/* 5. Filter header */
.store-filter {
 display: grid
;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 0px 10px;
    background: #d09e3f;
    padding: 10px;
}
.search-wrap {
  position: relative;
  grid-column: 1 / -1;
}
.search-wrap input {
  width: 100%;
  padding: 10px 40px 10px 12px;
  font-size: 16px;
  border: 1px solid #fff;
  border-radius: 4px;
  box-sizing: border-box;
}
.search-wrap .fa-search {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 18px;
  color: #333;
  pointer-events: none;
}
.store-filter #country-select,
.store-filter #district-select {
  padding: 0px 12px;
  font-size: 16px;
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: rgb(241,236,200);
  box-sizing: border-box;
}
#locate-btn {
  grid-column: 1 / -1;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
   margin-bottom: -10px;
    margin-top: -12px;
    margin-left: -12px;
}
#locate-btn:hover { text-decoration: underline; }

/* 6. Store list */
#stores { list-style:none; margin:0; padding:0; }
#stores li {
  display:flex; gap:10px; padding:8px;
  border-bottom:1px solid #eee; cursor:pointer;
}
#stores li.active { background:#f0f8ff; }
#stores img { width:80px; height:60px; object-fit:cover; border-radius:4px; }
#stores .info { flex:1; font-size:14px; }
#stores .info h4 { margin:0 0 4px; font-size:16px; }
#stores .info p { margin:2px 0; }
#stores .info .dir { display:inline-block; margin-top:4px; font-weight:bold; }
#stores .info .dir i { margin-right:4px; }

/* 7. Map */
#map {
  width:100%; height:600px;
  border:1px solid #ddd; box-sizing:border-box;
}

/* 8. Mobile (<768px) */
@media(max-width:768px){
  .store-map-wrapper { flex-direction:column; }
  .store-list, .map-container { width:100%; flex:none; }
  #map { height:300px; }
  .leaflet-bar-toggle { display:none; }
}
.leaflet-bottom {
    display: none;
}

/*Thống kê cho thuê theo khu vực*/
.category-page-row {
    padding-top: 0px!important;
}
/* thống kê cho thuê theo khu vực */
:root { --gap: 20px; }

.custom-category-grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: var(--gap);
}

/* COMMON */
.custom-category-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.custom-category-link {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .3s, filter .3s;
}
.custom-category-item:hover .custom-category-link {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.custom-category-overlay { 
     position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}
.custom-category-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff;
}

.custom-category-count {
    font-size: 16px;
    color: #fff;
}
/* DESKTOP ≥769px */
@media (min-width: 769px) {
  .custom-category-item { aspect-ratio: 4/3; }

  .thu-duc    { grid-column: 1/span 8; }
  .binh-thanh { grid-column: 9/span 4; }
  .go-vap     { grid-column: 1/span 4; }
  .phu-nhuan  { grid-column: 5/span 4; }
  .tan-binh   { grid-column: 9/span 4; }
  /* Bỏ aspect-ratio chỉ cho 2 ô đầu, và gán height cố định */
  .custom-category-item.thu-duc,
  .custom-category-item.binh-thanh {
    aspect-ratio: auto !important;
    height: 275px !important;
  }
}

/* MOBILE/TABLET <768px — KHÔNG đặt height cho “Thủ Đức” */
@media (max-width: 768px) {
  .custom-category-grid { grid-template-columns: repeat(12,1fr); 
      gap: 10px;
  }

  /* 4 ô nhỏ: span 6 cột, aspect 3:2 */
  .binh-thanh,
  .go-vap,
  .phu-nhuan,
  .tan-binh {
    grid-column: span 6;
    aspect-ratio: 3/2;
  }

  /* Thủ Đức : span 6 cột × 2 rows, height sẽ do JS set */
  .thu-duc {
    grid-column: span 6;
    grid-row:    span 2;
  }
}

/* Style cho Giá "Giá từ:" */
.thongtin-them, .azhouse-dia-chi {
    line-height: 2;
}

.product-small .price-wrapper .price .amount {
    font-weight: 700!important;
    color: #d09e3f !important;
}
.gia-tu {
    font-size: 13px;
    font-weight: 400 !important;
    color: #999 !important;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

/* Style cho dòng Thông tin thêm */
.thongtin-them {
    font-size: 0.95em;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px; /* Khoảng cách giữa các mục diện tích/phòng ngủ */
    margin-bottom: 6px;
}

/* Icon trong diện tích và phòng ngủ */
.thongtin-them .font-icon {
    margin-right: 4px;
    vertical-align: middle;
}

.trang-thai-phong-home {
            display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
     border-radius: 6px;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9;
        }
        .trang-thai-con-trong {
            background-color: #d09e3f;
            color: #fff;
        }
        .trang-thai-da-thue {
            background-color: #ea1e12;
            color: #fff;
        }
.trang-thai-phong {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    margin-left: 3px;
     border-radius: 6px;
    text-align: center;
}
.trang-thai-phong.con-trong {
        background:#d09e3f;
    color: #fff;
    
}
.trang-thai-phong.da-thue  {
        background:#ea1e12;
    color: #fff;
}

/* 1. Đặt wrapper card relative */
.products .product-small.box,
.woocommerce ul.products li.product {
  position: relative;
}

/* 2. Badge sát góc trên‑trái */
.azhouse-corner-phong-trong {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin: 0 !important;
}

/* Single product badge */
.azhouse-badge-phong-trong-single {
  display: inline-block;
}

/* Corner badge in loop */
.azhouse-corner-badge {
  /* đã đặt inline-style, nhưng bạn có thể override ở đây */
}

.azhouse-dia-chi {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #666;
}

.azhouse-dia-chi i {
  margin-right: 0.4em;
  color: #d09e3f;
}

/*hiển thị badge tiêu đề sản phẩm*/
.doi_tac_azhouse {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ffc266 0%, #FF8800 100%);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  gap: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-right:3px;
}
.doi_tac_azhouse svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  background-color: #219150; 
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right:3px;
  
}

.verified-badge i {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  fill: white;
}
.woocommerce-loop-product__title-link {
  display: inline-flex;
  align-items: center;
}

.woocommerce-loop-product__title {
  margin-right: 4px;
}

.verified-badge {
  transition: background-color 0.2s ease;
}

.woocommerce-loop-product__title-link:hover .verified-badge {
  background-color: #219150;
}

/* 1. Underline nhẹ khi hover */
.woocommerce-loop-product__title-link:hover .woocommerce-loop-product__title {
  text-decoration: underline;
}

/* 2. Đổi màu chữ khi hover */
.woocommerce-loop-product__title-link:hover .woocommerce-loop-product__title {
  color: #27ae60; /* bạn có thể thay thành màu bạn muốn */
}

/* 3. Thêm hiệu ứng chuyển màu mượt (transition) */
.woocommerce-loop-product__title,
.verified-badge {
  transition: color 0.2s ease, background-color 0.2s ease;
}

.woocommerce-loop-product__title-link:hover .verified-badge {
  background-color: #219150; /* màu tối hơn khi hover */
}

.woocommerce-loop-product__title-link:hover .woocommerce-loop-product__title {
  color: #d09e3f;
}

/* 4. Thay đổi con trỏ chuột */
.woocommerce-loop-product__title-link {
  cursor: pointer;
}

/* 5. Nếu muốn thêm shadow nhẹ cho title khi hover */
.woocommerce-loop-product__title-link:hover .woocommerce-loop-product__title {
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/*End badge tiêu đề sản phẩm*/

.product-section .col-inner {
    	background-color: unset !important;
    background: unset !important;
    /* box-shadow: none !important; */
        border-radius: 8px;
    background: #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
    border: solid 1px rgba(151, 151, 151, .25);
    -webkit-transition: all .5s;
    transition: all .5s;
    box-shadow: rgba(50, 50, 105, 0.15) 2px 2px 5px 2px, rgba(0, 0, 0, 0.05) 1px 1px 1px 1px;
}
/*tin tuc*/

.col.post-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ebecec;
}
 .blog-archive #post-list .post-item {
    padding-bottom: 10px!important;
}
#post-list, #secondary {
    border-radius: 8px;
    box-shadow: 2px 6px 16px 4px rgba(33, 33, 33, .16);
    padding: 1.2rem;
}
.pb-0, .pb-0 h3 {
	color: #000;
}
@media screen and (min-width: 850px) {
    .row-divided>.col+.col:not(.large-12) {
        border-left: 0px;
    }
}
.single-product .mfp-close{
	top: 60px !important;
}
.img_chu_dau_tu{
border-radius: 8px;
    padding: 20px;
    background: #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.1);
    border: solid 1px rgba(151, 151, 151, .25);
    -webkit-transition: all .5s;
    transition: all .5s;
    box-shadow: rgba(50, 50, 105, 0.15) 1px 2px 5px 1px, rgba(0, 0, 0, 0.05) 1px 1px 1px 2px;
}
.img_chu_dau_tu:hover{
-webkit-box-shadow:0 2px 10px 0 rgba(0,0,0,.3);
        box-shadow: 0 2px 10px 0 rgba(0,0,0,.3);
}

.post-item .image-cover{
	border-radius: 6px;
}
.label-primary {
    border-radius: 4px;
    display: inline-block;
    float: left;
    color: #fff;
    font-size: .875rem;
    line-height: 1.5;
    font-weight: 500;
    padding: 0.375rem 0.5rem 0.25rem;
    width: auto;
}
.label-primary.hot {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ea1e12;
    color: #fff;
    width: auto;
    font-size: 10px;
    font-weight: 600;
    padding: 5px 8px 2px;
}
.label-primary.free {
    background: #376209;
}
.project-trend .card-project {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  
  
  word-wrap: break-word;
  background-clip: border-box;
  -webkit-box-shadow: unset;
  box-shadow: unset;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  animation-duration: 0.0001s;
    animation-name: sentinel-aa2861927e198;
}
@media (min-width: 1200px) {
  .project-trend .card-project:hover {
    opacity: 0.86;
  }
  .project-trend .card-project:hover .btn-favorite {
    display: block;
    visibility: visible;
  }
  .project-trend .card-project .btn-favorite {
    display: none;
    visibility: hidden;
    -webkit-transition: all 300s ease;
    transition: all 300s ease;
  }
  .project-trend .card-project .btn-favorite.active {
    display: block;
    visibility: visible;
  }
}
.project-trend .card-project .btn-favorite {
  top: 24px;
  right: 24px;
}
.project-trend .card-project .label-primary {
  position: absolute;
  top: 24px;
  left: 24px;
  width: auto;
  padding: 8px 10px 4px;
  font-size: 10px;
  line-height: 10px;
  font-weight: 500;
  text-transform: uppercase;
  z-index: 10;
  max-width: calc(100% - 104px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.project-trend .card-project-body h3{
	text-align:left;
}
.project-trend .card-project-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  height: 100%;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 0)),
    color-stop(20%, rgba(0, 0, 0, 0)),
    to(rgba(0, 0, 0, 0.8))
  );
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0.8)
  );
  border-radius: 8px;
  padding: 24px;
}
.project-trend .card-project-address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 4px;
  z-index: 10;
}
.project-trend .card-project-address a,
.project-trend .card-project-address li {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}
.project-trend .card-project-address li {
	list-style: none;
	margin-left: 0px;
}
.project-trend .card-project-address li a:hover {
  color: #fff;
  opacity: 0.86;
}
.project-trend .card-project-address li + li {
  margin-left: 4px;
}
.project-trend .card-project-address li + li::before {
  color: #fff;
}
.project-trend .card-project-title {
  white-space: normal;
  overflow: unset;
  margin-bottom: 4px;
 
  font-size: 18px;
  line-height: 26px;
  color: #fff;
}
.project-trend .card-project-title::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.project-trend .card-project-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 10;
}
.project-trend .card-project-price strong {
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  color: #fff;
}

@media screen and (max-width: 1024px) {
  .project-trend .swiper-wrapper {
    height: 378px;
  }
  .project-trend .swiper-slide {
    width: 252px !important;
    height: 378px;
    margin-right: 14px;
  }
  .project-trend .card-project {
   
    height: 378px;
  }
  .project-trend .card-project-body {
    padding: 16px;
  }
  .project-trend .card-project .label-primary {
    top: 16px;
    left: 16px;
    max-width: calc(100% - 84px);
  }
  .project-trend .card-project .btn-favorite {
    top: 16px;
    right: 16px;
  }
}

.fa_icon svg{
	position: relative;
	top: 3px;
	fill: var(--primary-color);
    width: 20px;
    height: 20px;
}
.calc-mortgage-tool .fa_icon svg, .download_show .fa_icon svg, .cta-bottom-wrapper .fa_icon svg{
	fill: #fff;
}

.btn-icons:hover .fa_icon svg{
	fill: #fff;
}


@font-face {
  font-family:'rever-icon';
    src: url('fonts/ReverIcons.eot');
    src: url('fonts/ReverIcons.eot?#iefix') format('embedded-opentype'),
    url('fonts/ReverIcons.woff') format('woff'),
    url('fonts/ReverIcons.ttf') format('truetype'),
    url('fonts/ReverIcons.svg#roboto_condensedregular') format('svg');
    font-display:swap;
}
.h-dk {
    position: absolute;
    top: 20%;
    right: calc((100% - 1000px)/2);
}
.h-dk .col {
    background: rgba(59, 59, 63, 0.6);
    padding: 20px !important;
}
.h-dk form {
    margin-bottom: 0;
}

.h-dk h3 {
    color: white;
    font-size: 22px;
}
.h-dk div.wpcf7-mail-sent-ok {
    border: 2px solid white !important;
    border-radius: 0px !important;
    color: white !important;
}
.link_bds{
	display:none;
}
.footer-wrapper .widget_nav_menu{
	padding:0px;
}
.border_bottom_white{
	border-bottom:1px solid #ffffff;
}
.font-icon { font-family:'rever-icon', Verdana, Geneva, sans-serif ;text-rendering:auto; line-height:20px; font-size:18px; font-style: normal; vertical-align: middle}
.bedroom:before  { content:"\f105"; padding-right:3px}
.bathroom:before  { content:"\f106"; padding-right:3px}
.livingroom:before  { content:"\f106"; padding-right:3px}
.garage:before  { content:"\f143"; padding-right:3px;}
.priceofsize:before  { content:"\f145"; padding-right:3px}
.area:before  { content:"\f144"; padding-right:3px}
.apartment-icon:before  { content:"\f133"; padding-right:3px}
.ownerbuilding-icon:before  { content:"\f134"; padding-right:3px}
.locationbuilding-icon:before  { content:"\f135"; padding-right:3px}
.unitsbuilding-icon:before  { content:"\f136"; padding-right:3px}
.streetview:before {content:"\f132"; font-size:2em}
.direction:before {content:"\f132"}
#dk-bao-gia div.wpcf7-mail-sent-ng, div.wpcf7-aborted{
	color:#ffffff;
	border-radius:0px !important;
}
div.wpcf7-mail-sent-ok {
    border: 2px solid #00779A !important;
	border-radius:0px !important;
	color: #00779A !important;
}
#wrapper, #main {background-color: #fff;position: relative;}
.justin .icon-box-text p{text-align: justify;}
.white.button.is-outline{color: #fff!important;}
.white.is-outline:hover{color: #666!important;}
.badge-container{display: none;}
.stuck{background: #000;}
.image-tools .quick-view img{width: initial!important; max-width: initial!important;}
.product-small .box-text .product-title{font-weight: bold;}

.tai_sao .icon-box{background: #0075D2;padding: 8px;border-radius: 10px;}
.tai_sao .icon-box p{font-weight: bold;}
.section-title span{text-transform: inherit;line-height: 40px;}
.section-title {
    font-weight: 700;
}

.star-rating:before{color: yellow!important;}
.text-den .col-inner{font-weight: bold;color: #222;border-radius: 10px;}
.text-den .col-inner .testimonial-text p{font-weight: bold;color: #666}
.blog-post-inner .is-divider{display: none;}
.single-post .entry-image{display: none;}
.footer-1{color: #222;font-size: 13px;font-weight: bold;}
.footer-1 .dark, .dark p, .dark td{font-weight: initial;font-size: 13px;}
.footer-1 .widget-title {color: rgb(0, 156, 222); font-size: 15px;}
.footer-1 .is-divider{background-color: rgb(0, 156, 222);}
.bot_0{padding-bottom: 0!important;}
.breadcrumbs a{ font-weight: bold;text-transform: capitalize; font-size: .8rem;}
.product-main .product-info h1.product-title{font-size: 1.4rem;}
.product-main .product-info .product-short-description{font-size: 14px;font-weight: bold;}
form .quantity{display: none;}.product-info{font-weight: bold;}
.nut_xem_demo{background: #0075D2;padding: 10px;min-width: 164px;display: block;text-align: center; height: 48px;color: #fff;text-transform: uppercase;line-height: 25px;}
.nut_xem_demo:hover{background:linear-gradient(#0075D2, #911EAB) ;color: #fff;}
.single_add_to_cart_button{width: 100%;}
.sticky-add-to-cart--active .single_add_to_cart_button{width: inherit;}
.single_add_to_cart_button{height: 48px;}
.sticky-add-to-cart__product .product-title-small{font-size: .8rem;}
#secondary .widget span.widget-title , #product-sidebar .widget span.widget-title , #shop-sidebar .widget span.widget-title {color: #d09e3f !important;font-size: 20px;font-weight: 800;}
/*
#secondary .widget span.widget-title:after , #product-sidebar .widget span.widget-title:after , #shop-sidebar .widget span.widget-title:after{ 
	background: #009cde;bottom: -5px;content: "";display: block;height: 1px;position: relative;width: 100%;}
*/
.entry-content.single-page .blog-share .is-divider, #secondary .widget .is-divider , #product-sidebar .widget .is-divider , #shop-sidebar .widget .is-divider{background-color: var(--primary-color)!important;max-width: 100%!important;margin-top: 8px!important;height: 1px;}
#secondary , #product-sidebar , #shop-sidebar{font-size: 14px;font-weight: bold;}
h2.section-title-normal span {margin-right: 15px;padding-bottom: 3.5px;border-bottom: 0;margin-bottom: 0;padding: 4px 15px;font-size: 19px;color: white;padding-top: 7px;text-transform: uppercase;}
h2.section-title-normal {border-bottom: 2px solid rgb(199,37,40);background: #0079b6;}
h2.section-title span{line-height: inherit;}

h2.section-title a {font-size: 15px;background: rgb(199,37,40);padding: 8px 15px;color: white;font-weight: 400;}

.content-pos .box-text {padding-bottom: 0;padding: 10px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;background: white;}
ul.menu>li+li , .widget>ul>li+li{border-top: 1px dashed #ececec;}
.content-pos .post-item .post-title {height: 21px;overflow: hidden;color: #2c2b3b;margin-bottom: 5px;}
.box-text .from_the_blog_excerpt{margin-top: 10px;}
.category-blog .from_the_blog_excerpt {height: inherit!important;}
.article-inner h3, .article-inner h1, .article-inner h2, .article-inner h4, .article-inner h5, .article-inner h6{padding-left: 0px;color: black;}
.row-lien-he h3{border-left: none;}
.page-wrapper{padding-top: 10px!important;padding-bottom: 10px!important;}
.blog-archive .img_dau_t{margin-bottom: 20px;}
#comments .comment-respond{background-color: transparent!important;}
.entry-header-text .is-divider{display: none;}
.entry-header-text{padding: 0;}
.entry-content{padding-top: 0;}
.home .breadcrumbs{display: none;}
.breadcrumbs{font-weight: 300;font-size: 13px;
}
.blog-wrapper .breadcrumbs{
    padding-left:50px;
    padding-bottom:10px;
}
@media (max-width:768px) {.blog-wrapper .breadcrumbs {
    padding-left: 30px!important;
}
}
.breadcrumbs a{font-weight: 300;color: #0092ff;}
h6.entry-category{display: none;}
.meta-related{display:block;background: #e6f4ff;padding: 10px 0;margin-bottom: 15px;} 
.meta-related ul{padding-left: 15px;margin-bottom: 0;}
.meta-related ul li {list-style: square;font-size: 15px;margin-bottom:0px;}
.meta-related ul li a{color: #0092ff;text-transform: none; }
.meta-related ul li a:hover{color: #0072c8;}
.lien-quan{padding: 0 15px 15px;}
.lien-quan .gallery-icon{height: 110px;}
.lien-quan .gallery-icon img{height: 100%;object-fit: cover;border-radius: 4px;}
.lien-quan .wp-caption-text{    font-size: 14px;text-align: left;font-weight: bold;line-height: 21px;margin-top: 10px;height: 60px;overflow: hidden;margin-bottom: 10px;}
#comments .comment-respond{padding: 0;}
.fb_iframe_widget{margin-bottom: 10px;}
.row.row-large{}
#top-bar li a {text-transform: none;font-size: 14px!important;}
.header-bottom .nav li a:hover, .header-bottom .nav li.active a {background: #2c2b3b;}
.header-bottom .nav li a {line-height: 37px;padding: 5px 15px;}
section.content-pos , section.lien-he , .doi-tac, .footer-boot{padding-bottom: 0!important;}
.doi-tac .section-title-container{margin-bottom: 0!important;}
.doi-tac .icon-box {box-shadow: 0 -8px 17px #dedede;height: 155px;padding: 10px 5px;background: white;}
.icon-phone:before, .icon-envelop:before {color: #da0007;}


.row-lien-he .large-12 .col-inner {border-radius: 10px;border: 2px solid #dd202a;padding: 20px;display: inline-block;}
.form-lien-he {display: block;clear: both;width: 100%;}
.form-lien-he .left {width: 50%;padding-right: 10px;display: inline-block;float: left;}
.form-lien-he .right {width: 50%;padding-left: 10px;display: inline-block;float: right;}
input[type='email'], input[type='search'], input[type='number'], input[type='url'], input[type='tel'], input[type='text'], textarea, select {height: 38px;font-size: 15px;border-radius: 5px;box-shadow: none;}

.form-lien-he input[type='submit'] {margin: 0;display: block;width: 100%;border-radius: 5px;background: #d09e3f;text-transform: none;font-weight: 400;}
#breadcrumbs {margin-top: 20px;color: #ff9b00;background: #f7f7f7;margin-bottom: 20px;padding: 6px 15px;display: block;width: 100%;font-size: 15px;font-family: "roboto condensed",sans-serif;border: 1px solid #e8e8e8;}
.blog-single .entry-header h1.entry-title{border-bottom: 1px solid var(--primary-color);padding-bottom: 10px;}
.he-thong {
    margin-top:-30px!important;
}
@media (max-width: 390px) {
.tab_sea {
    top: 100px!important;
}
}
@media (max-width: 549px) {
.tab_sea {
    top: 150px!important;
}
}
@media (max-width: 480px) {
.tab_sea {
    top: 140px!important;
}
}

.tab_sea{position: absolute;top: 200px;z-index: 999;max-width: 1170px;}
.tab_search{margin-top: 0!important;}
.tab_sea .button, .tab_sea button, .tab_sea input, .tab_sea textarea, .tab_sea select, .tab_sea fieldset{margin-bottom: initial!important;}
.tab_sea .col:first-child .col-inner{margin-right: inherit!important;}

.accordion-title{display: initial!important;padding: .6em 0.3em!important; border-top:none!important;color: #fff!important;}
.searchandfilter ul li{margin-left: 0!important;}
input[type='email'], input[type='search'], input[type='number'], input[type='url'], input[type='tel'], input[type='text'], textarea, select{border-radius: 0;}
table.tbl-info td img {
    width: 16px;
    position: relative;
}
table.tbl-info td img.logo_chudautu{
	width:80px;
}
table.tbl-info {
    background: white;
    box-shadow: 0 2px 16px 0 rgba(170, 170, 170, .2);
    padding: 10px 24px 0;
}
/*
.box-infomation-bds .tbl-info tr td:nth-child(n), .box-infomation-bds .tbl-info tr td:nth-child(3n) {
    width: 20%;
} */
.box-infomation-bds .tbl-info tr td {
    padding: 10px 5px;
}
.tbl-info tr td {
    padding: 7px 5px 7px;
    border-bottom: 1px solid #d3d9e1;
}
.product-main {
    padding: 0px 0;
}
.loc_sp{    background: #F7F6F6;
    padding: 10px;
    margin-bottom: 20px;}
.footer-secondary{display: none;}
.loc_sp form , .loc_sp ul{margin-bottom: 0;}
.loc_sp input[type='submit']{margin-bottom: 0;}
.woocommerce-product-gallery__image{max-height: 355px;overflow: hidden;}
.product-footer .is-divider{display: none;}
.product-footer .product_meta, .product-footer .social-icons{display: none;}
.product-footer span.amount{font-size: 18px;}
.product-short-description , #tab-description{text-align: justify;}
.content_right > .col-inner{
	border: 1px solid rgba(131,131,131,.36);
    border-radius: 2px;
	box-sizing: border-box;
}
.content_right > .col-inner form{
	margin:6px;
}
.content_right h3, .box-lineHeight-mobile h3{background: #d09e3f;color: #fff;padding: 5px;text-align: center;font-weight: 700;}
.content_right input[type='submit']{width: 100%;}

.product-footer .woocommerce-tabs{border-top: none;}
.product-footer .woocommerce-tabs li a{color: #000000!important;font-size: 25px;font-weight: 400!important;}
.product-footer .woocommerce-tabs li a:before{background-color:#fff!important;}
.related-products-wrapper h3{display: block;
    color: #d09e3f;padding-left: 14px;}
.product-small .product-title{
	}
.product-small .product-title a{
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
  
    font-size: 14px;
    color: #30333a;
    font-weight: 400;
    line-height: 1.5;
	font-weight: bold;
}
.icon-pro {
    width: 1.1em;
}
.has-shadow .box-text{padding-left: 0.5em;
    padding-right: .5em;padding-bottom: .5em;border-top-right-radius: 8px;}
/*
.row-box-shadow-1 .col-inner ,.related-products-wrapper .row > .product-small > .col-inner {
	box-shadow: none !important;
	border:1px solid #ddd;
	-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}*/
.list-project{margin-bottom: 0;}
span.amount{color:var(--primary-color); font-size: 18px;line-height: 20px;}
.list-project li {
    display: inline-block;
    color: #838383;
    padding: 0 1.5em 0 0;
    margin-left: 0!important;
    font-size: 14px;
}


.has-shadow>.col>.col-inner{
	background-color: unset !important;
    background: unset !important;
    /* box-shadow: none !important; */
        border-radius: 8px;
    background: #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
    border: solid 1px rgba(151, 151, 151, .25);
    -webkit-transition: all .5s;
    transition: all .5s;
    box-shadow: rgba(50, 50, 105, 0.15) 2px 2px 5px 2px, rgba(0, 0, 0, 0.05) 1px 1px 1px 1px;
	
}
.related-products-wrapper .box-text{padding-left: 1em;padding-right: 1em;}
.tt_them{padding-top: 7px;}
.tt_them .listing-address {
	color:#838383;
	font-size:13px !important;
}
.image-fade_in_back{max-height: 220px;}
.product-small .show-on-hover.top.right{
	display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px; /* khoảng cách giữa 2 badge */
  padding: 0px !important; /* xóa padding mặc định */
  min-width: 10em !important;
  opacity:1 !important;
}

.product-small .show-on-hover.bottom.left{
	opacity:1 !important;
	background: rgba(199,37,40,.86);
    color: #ffffff;
	width:100%;
	text-align:center;
	padding:0px !important;
	
}
.product-small .show-on-hover.bottom.left:blank{
	opacity:0 !important;
	
}
.product-small .show-on-hover.bottom.left .trang_thai_div{
	height:32px;
	padding:6px;
}
.like-count {
	visibility:visible!important;
	opacity:1 !important;
    position: absolute;
    top: 0;
    right: 0;
    min-width:0em;
    height: 4em;
}
.like-count-layout {
    position: relative;
    height: 100%;
    width: 100%;
}



.search_form_wrapper form .tab-container{
    width:100%;
    min-width:100%;
    display:block;
    overflow:-webkit-paged-x;
    margin-bottom:15px;
    float:left;
z-index:99999;
}
.search_form_wrapper form .tab-container .tab_form{
    width:auto;
    float:left;
    margin-right:30px
}
.search_form_wrapper form .tab-container .tab_form:last-child{
    margin-right:0
}
.search_form_wrapper form .tab-container .tab_form input{
    display:none
}
.search_form_wrapper form .tab-container .tab_form input:checked+label{
    float:left;
    font-weight:700;
    border-bottom:2px solid #fff;
    Color:#fff;
}
.search_form_wrapper form .tab-container .tab_form label{
    font-size:18px;
    color:rgba(255,255,255,.75);
    padding-bottom:8px;
    cursor:pointer !important;
z-index:9999999;
	display:block;
}
.search_form_wrapper form .search-container{
	border-radius: 4px;
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    clear: both;
	height: 56px;
	background: #fff;
}
.search_form_wrapper form .search-container>a{
    display:none;
    position:absolute;
    right:0;
    
}
@media (max-width:480px){
    .search_form_wrapper form .search-container>a{
        display:none;
    }
}
.search_form_wrapper form .search-container .zmdi{
    position:absolute;
    left:0;
    top:0;
    color:#000;
    font-size:25px;
    padding: 10px 0 0 10px;
}
@media (max-width:640px){
    .search_form_wrapper form .search-container .zmdi{
        display:none
    }
	 .search_form_wrapper form .search-container>a{
        display:none;
    }
}
.suggest-form .search-container{
	
	
}
.search_form_wrapper form .search-container .search-input{
  font-size: 18px;
    height: 48px;
    width: calc(100% - 155px);
    background: #fff;
    border: 0 !important;
    outline: none;
    padding: 0 10px 0 60px;
    float: left;
}
@media (max-width:640px){
  
}
.search_form_wrapper form .search-container .btn-search{
   border: 0;
    max-width: 155px;
    min-width: inherit;
    float: right;
    font-size: 18px !important;
    background: var(--primary-color);
    height: 48px !important;
    line-height: 48px !important;
    margin-right: 0px;
    position: absolute;
    right: 4px;
	border-radius: 4px;
}
.search_form_wrapper form .search-container .btn-search:focus{
    border:0;
    outline:none
}
.search_form_wrapper form .search-container .btn-search .zmdi{
    position:relative;
    padding:0;
    color:#fff;
    display:none
}
.search_form_wrapper form .search-container .recent-search{
    position:absolute;
    background:#fff;
    top:55px;
    left:0;
    width:100%;
    max-width:calc(100% - 155px);
    z-index:10;
    border:1px solid rgba(131,131,131,.2);
    padding:5px 0;
    font-size:14px
}
@media (max-width:768px){
    .search_form_wrapper form .search-container .recent-search{
        top:50px
    }
}
@media (max-width:640px){
    .search_form_wrapper form .search-container .recent-search{
        max-width:calc(100% - 62px)
    }
}
@media (max-width:480px){
    .search_form_wrapper form .search-container .recent-search{
        display:none!important
    }
}
.search_form_wrapper form .search-container .recent-search li{
    height:auto;
    min-height:40px
}
.search_form_wrapper form .search-container .recent-search li:hover{
    background:#f3f4f7
}
.search_form_wrapper form .search-container .recent-search li a{
    width:100%;
    display:block;
    padding:10px 15px;
    color:#30333a
}
.search_form_wrapper form .search-container .recent-search li a span{
    display:block;
    line-height:20px
}
.search_form_wrapper form .search-container .recent-search li a span i{
    color:#838383
}
.hidden{
    display:none
}

.dark-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;opacity:1;visibility:visible;background:rgba(0,0,0,.6);-webkit-transition:opacity .25s ease,visibility 0s ease .25s;transition:opacity .25s ease,visibility 0s ease .25s}
#floating-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 70px;
    height: 70px;
}
.floating-button .hamburger {
    border-radius: 30px;
    background: var(--primary-color);
    color: #fff;
    width: 60px;
    height: 60px;
    -webkit-transition: all .25s;
    transition: all .25s;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 99997;
    cursor: pointer!important;
    outline: none;
    padding: 10px;
    display: inline-block;
    -webkit-transition-property: opacity,-webkit-filter;
    transition-property: opacity,-webkit-filter;
    transition-property: opacity,filter;
    transition-property: opacity,filter,-webkit-filter;
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
}
.hamburger-box {
    width: 40px;
    height: 38px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 38px;
    font-size: 30px;
}
.hamburger-box i.hamburger-default {
    position: absolute;
    top: 4px;
    bottom: 0;
    left: 0;
    display: block;
    right: 0;
    -webkit-animation: bell-out .3s;
    animation: bell-out .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
	 animation: shake 1s; 

  /* When the animation is finished, start again */
  animation-iteration-count: infinite; 
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
#floating-container.open .count{display:none}


#floating-container.open .hamburger-box i.hamburger-default{-webkit-animation:bell-in .15s linear;animation:bell-in .15s linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
#floating-container .hamburger-close {
    opacity: 0;
    position: absolute;
    top: 2px;
    bottom: 0;
    left: 0;
    display: block;
    right: 0;
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-animation: edit-out .3s;
    animation: edit-out .3s;
    background: url(x-button-icon.png) no-repeat;
    background-position: 50%;
}
#floating-container.open .hamburger-close{-webkit-animation:close-in .2s;animation:close-in .2s;-webkit-animation-delay:.1s;animation-delay:.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.floating-button .hamburger .count {
    display: block;
    white-space: nowrap;
    position: absolute;
    top: -5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--primary-color);
    text-align: center;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    background: #fff;
    border: 1px solid var(--primary-color);
}
.birdseed-beacon, .birdseed-beacon span {
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
    position: absolute;
}

.birdseed-beacon {
    border-radius: 100px;
    background: var(--primary-color);
    overflow: visible;
    bottom: 20px;
    right: 20px;
    z-index: 99996;
    -webkit-animation: beaconA 1.5s infinite;
    animation: beaconA 1.5s infinite;
}

.birdseed-beacon span{content:"";border-radius:100px;border:2px solid var(--primary-color);;display:block;bottom:0;right:0;z-index:99995;-webkit-animation:beaconB 1.5s infinite;animation:beaconB 1.5s infinite}
.floating-menu {
    visibility: hidden;
    position: fixed;
    left: 20px;
    padding-bottom: 10px;
    bottom: 80px;
    z-index: 100;
	
    list-style-type: none;
    padding: 0;
    margin: 0;

}

.floating-menu li a{display:inline-block;padding:8px 15px;background:#fff;box-shadow:0 0 5px #424242;border-radius:5px;margin-bottom:10px; display: list-item;
    text-align: -webkit-match-parent;}
#floating-container.open ul{visibility:visible;-webkit-animation:scale-in .5s;animation:scale-in .5s}
.s-content {
    
    z-index: 3;
    
   
    font-size: 16px;
    line-height: 1.67;
}

.s-content ul li {
    padding-left: 30px;
    padding-top: 10px;
    position: relative;
    display: block
}

.s-content ul li:before {
    content: "";
    background-image: url(image/check-icon.svg);
    display: block;
    position: absolute;
    left: 0;
    top: 16px;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px
}
	.show_to_1024{
		display:block;
	}
	.hide_to_1024{
		display:none;
	}




.social-content{
    position:absolute;
    right:0;
    bottom:14px
}
.social-content .font-icon{
    font-size:30px;
    width:30px;
    margin-left:10px;
    vertical-align:middle
}
.social-content a img{
    margin-left:5px;
    display:inline-block;
    vertical-align:middle
}
.share{
    float:left;
    width:35%
}
.listing-detail{
    font-size:14px;
   width:100%;
    float:left;
}
.listing-item{
    -ms-flex:0 0 auto;
    -webkit-box-flex:0;
    flex:0 0 auto;
    width:calc(100% * 1/4);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    line-height:30px;
    float:left
}
.listing-item:nth-child(1n){
    margin-right:0px;
    margin-left:0
}
.listing-item .item-left{
    -ms-flex:0 0 auto;
    -webkit-box-flex:0;
    flex:0 0 auto;
    width:50%;
    color:rgba(48,51,58,.86);
    font-weight:600
}
.listing-item .item-left:nth-child(1n){
    margin-right:0px;
    margin-left:0
}
.listing-item .item-right{
    width:50%;
    margin-right:0;
    margin-left:auto;
    font-weight:400;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    max-height:30px;
    overflow:hidden;
    white-space:nowrap;
    color:rgba(48,51,58,.68)
}
#price-area{
    color:#c52728
}
.project-house{
    display:table;
    height:90px;
    width:100%;
    font-size:14px
}
.project-house+.project-house{
    border-top:1px solid #ececec
}
.project-house div{
    display:table-cell;
    vertical-align:middle
}
.project-house .img{
    height:60px;
    width:10%;
    position:relative
}
.project-house .img .cover{
    display:block;
    height:60px;
    position:relative;
    overflow:hidden;
    margin-right:10px
}
.project-house .img .cover img{
    width:90px;
    border:1px solid #ccc;
    position:absolute;
    display:block;
    max-width:100%;
    max-height:100%;
    left:0;
    right:0;
    top:0;
    bottom:0
}
.project-house .title{
    width:30%
}
.project-house .title h3{
    margin-right:20px;
    font-weight:500;
    font-size:14px
}
.project-house .room{
    width:16.67%
}
.project-house .room span,.project-house .area-m2 span,.project-house .price-m2 span{
    margin-right:5px
}
.project-house .area-m2{
    width:16.67%
}
.project-house .price-m2{
    width:16.67%
}
.project-house .btn{
    text-align:right;
    width:10%
}
.project-house .btn a{
    display:block;
    padding:9px 13px 5px;
    border:1px solid #000;
    border-radius:2px;
    float:right;
    height:36px;
    min-width:75px;
    font-weight:500
}
.project-house .btn a:hover{
    border:1px solid #c52728
}
.project-sumary{
	/*border-bottom:1px solid #ccc;*/
}
.project-sumary .project-name .detail{
    float:left;
    width:100%;
    display:block;
    overflow:hidden;
    font-size:16px;
    padding:30px 0 0;
    border-top:1px solid #dedede
}
section.project-header div.project-name div.share ul li.share{
    width:100%;
    text-align:right;
    font-size:16px;
    margin-bottom:15px
}
section.project-header div.project-name div.share ul li.btn{
   
    font-size:16px;
    display:inline-block;
    padding:30px 0 0;
    float:right;
    margin-left:10px
}
section.project-header div.project-name {
    padding-bottom:10px!important;
}

.product-main .social-share span {
    color: var(--primary-color) !important;
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
    font-weight: 700;
}
.box-collapse {
    background: white;
    margin: 20px 0;
    border-radius: 8px;
        box-shadow: 0 2px 16px 0 rgba(170, 170, 170, .2);
        border: 1px solid rgba(48,51,58,.2);
        padding: 10px 20px;
}
.box-tong-quan {
    background: white;
    border-radius: 8px;
        box-shadow: 0 2px 16px 0 rgba(170, 170, 170, .2);
        border: 1px solid rgba(48,51,58,.2);
        padding: 10px 24px 0;
}
.box-lineHeight, .box-lineHeight-mobile
{
    background: white;
    border-radius: 8px;
        box-shadow: 0 2px 16px 0 rgba(170, 170, 170, .2);
        border: 1px solid rgba(48,51,58,.2);
}
.box-lineHeight-mobile {
    margin-bottom: 20px;
}
@media only screen and (min-width:1024px){
    .box-lineHeight-mobile {
    display:none!important;
}
        
    }
.lhtv{
    width:40%!important
}
.menu-detail-under ul{
    width:60%
}



.detail-house .address { font-size: 16px;color: #999}
.detail-house .address h2 { display: inline-block; font-weight: normal; padding-right: 5px; font-size: 16px;width:auto;}
.detail-house .address h2 a {color: #808080;}
.detail-house .address h2 a:hover { color: #c72528;}

.logo-white-r { float:left; width:30px; margin-top:37px}
.headquanters { margin-left:70px; width:calc(100% - 100px);}
.mb10 { margin-bottom:10px}
.price-detail { padding-top:12px}
.price-house:before {content:"\f164"; font-size:2em}
.agent-detail-house { height:100%; margin-top:50px; border:1px solid #ccc; border-bottom:0}
.agent-detail-house:after { clear:both; display:table; content:''}

  
 
.agent-detail-house { height:100%; margin-top:50px; border:1px solid #ccc; border-bottom:0}
.agent-detail-house:after { clear:both; display:table; content:''}

.left-content { float:left; width:65%; margin-right:3%; font-size:16px; line-height: 26px}

.left-content .more{padding-top: 20px}
.left-content .view-more-gray.more{ padding-top: 10px }
.left-content .content .list-advantage:first-child{padding-top: 0}
.contact-agency-info input, textarea  { width:100%; padding:10px; border:1px solid #999; margin:0 0 10px; font-size:1em; font-weight:400; display:block;border-radius:8px;}
.contact-agency-info textarea::-webkit-input-placeholder { color:#444c59}
.contact-agency-info textarea:-moz-placeholder {color: #111}
.contact-agency-info textarea::-moz-placeholder {color:#111}
.contact-agency-info textarea:-ms-input-placeholder {color:#111}
.contact-agency-info input::-webkit-input-placeholder { color:#111}
.contact-agency-info input:-moz-placeholder {color: #111}
.contact-agency-info input::-moz-placeholder {color:#111}
.contact-agency-info input:-ms-input-placeholder {color:#111}

/*Top Search */
body.home .top-search , body.page-template-page-transparent-header-light .top-search, .page-template-page-transparent-header-dark .top-search{
	display:none;
}
.top-search *, {
    -webkit-font-smoothing:antialiased!important;
    -moz-osx-font-smoothing:grayscale
}
.top-search input[type=search]::-webkit-search-cancel-button{
   /* -webkit-appearance:searchfield-cancel-button*/
}
.top-search ::-webkit-input-placeholder{
    color:rgba(0,4,68,.3)
}
.header-nav-main.nav-left > li.html{
	width:100%;
}
.top-search input{
    text-rendering:auto;
    color:initial;
    letter-spacing:normal;
    word-spacing:normal;
    text-transform:none;
    text-indent:0;
    text-shadow:none;
    display:inline-block;
    text-align:start;
    margin:0
}

.top-search{
    width:100%;
    max-width:450px;
    margin-left:0px;
    height:44px;
    line-height:44px;
    border:1px solid rgba(48,51,58,.3);
    border-radius:0px;
    box-sizing:border-box;
    box-shadow:0;
    position:relative
}
.top-search:hover{
    box-shadow:0 2px 4px rgba(0,0,0,.1)
}
.top-search>a{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:10;
    display:none
}
.top-search form{
    width:100%;
    height:100%;
    position:relative;
    display:flex;
    align-items:center
}
.top-search form .search-type{
    padding:0 10px;
    height:20px;
    width:100%;
    max-width:101px;
    border-right:1px solid rgba(48,51,58,.3);
    line-height:20px;
    cursor:pointer;
    white-space:nowrap
}


.top-search form .search-type select{
    display:block;
    position:absolute;
   
    top:0px;
    left:0;
    width:100px;
    z-index:10;
    border:none;box-shadow:none;
	border-radius:0px
    padding:7px 7px 5px;
    font-size:13px;
	height:42px;
		
}

.select_box select{
  width: 220px;
  border: 0;
  position: relative;
  z-index: 99;
  background: none;
}
.top-search form .search-type select option{
	font-size:12px
}

.top-search form .zmdi{
    margin-left:10px;
    padding:0;
    font-size:20px;
    color:rgba(0,4,68,.3)
}

.top-search form input{
    width:100%;
    border:0;
    height:100%;
    font-size:13px;
    position:relative;
    padding:0 10px;
    
}
.top-search form input:focus{
    border:0!important;
    outline:0;
	box-shadow:none !important;
}

/* CSS tài liệu  */

@media only screen and (min-width:1024px){
   
	.show_to_1024{
		display:block;
	}
	.hide_to_1024{
		display:none;
	}
}
@media only screen and (max-width:1024px){
    .search_form_wrapper{
        width:100%;
        
    }
	
	.hide_to_1024{
		display:none !important;
	}
}
@media only screen and (max-width:1140px){
	.header-nav-main .top-search select,.header-nav-main.nav-left > li.html, .header-nav-main .top-search form, .header-nav-main .top-search{
		display:none !important;
	}
}
@media only screen and (max-width:768px){
    .detail-commodities li {
    font-size: 14px!important;
}
	
	.box-lineHeight, .thong_tin_ngan_gon{
		display:none!important;
	}
	.h-dk {
		right: 15px;
	}
	.show_to_1024 .content-detail-house{display:block !important;}
    
	.hide_to_1024{
		display:block;
	}
    .search_form_wrapper .heading-01{
        font-size:28px;
        line-height:1.36;
        margin-bottom:0 25px 50px;
        text-align:center
    }
    .search_form_wrapper form .tab-container{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -ms-flex-flow:row nowrap;
        flex-flow:row nowrap;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        overflow:inherit;
        margin-bottom:20px
    }
    .search_form_wrapper form .search-container .search-input{
        height:50px
    }
    .search_form_wrapper form .search-container .btn-search{
        height:50px!important;
        line-height:50px!important
    }
}
@media only screen and (max-width:768px){
    .related-products-wrapper h3 {
    padding-left:0px;
}
    .search_form_wrapper form .search-container .search-input{
        width:calc(100% - 64px);
		padding-left: 10px;
    }
    .search_form_wrapper form .search-container .btn-search{
     display:inline-block;
		margin-right:0px !important;
		 max-width:-webkit-fit-content;
        max-width:fit-content;
        max-width:-moz-fit-content
    }
    .search_form_wrapper form .search-container .btn-search .zmdi{
        display:block
    }
	.search_form_wrapper form .search-container .btn-search i{font-size:13px!important}
    .search_form_wrapper form .search-container .btn-search span{
        position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
    }
	#sp_lienquan{
        margin-left: 14px !important;
        margin-right: 14px;
	}
	#sp_lienquan .row > .col.product-small{
		width:100%;
		max-width: 100%;
    flex-basis: 100%;
		padding:0px !important;
		margin-bottom: 20px;
	}
}

	.box-list-view .box .box-image, .box-vertical .box-image{width: 40%!important;}
	h5.post-title{font-size: 16px; margin-bottom: 5px;max-height: 20px; overflow: hidden;}
	.slder .flickity-viewport{height: 640px!important;} 
	.box-lineHeight {
    height: 440px!important;
    display: flex;
    flex-direction: column;
	    justify-content: space-between;
	}
	.mobile{display: none;}
	.product-info{padding-top: 0;padding-bottom: 0;}
	.pb-0 {
    margin-bottom: 30px;
}

@media only screen and (max-width: 744px) {
.desktop{display: none!important;}
.row-small>.col{padding: 0 15.8px 19.6px!important;}
.desktop{display: none;}
	/*
.box-infomation-bds .tbl-info tr td:nth-child(n), .box-infomation-bds .tbl-info tr td:nth-child(3n){width: auto;}
	*/
}

.entry-content.single-page > p.short_description{
	background: #f9f9f9;
    border-left: 10px solid #0999d8;
    /* margin: 1.5em 10px; */
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
	margin-top: 16px;
	font-style: italic;
}
.entry-content.single-page > p.short_description:before{
	color: #0999d8;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
.entry-content.single-page > .article_content, .entry-content.single-page .my_social_icons{
	display: inline-block;
}
.entry-content.single-page .my_social_icons{
	vertical-align: top;
    width: 60px;
    
    position: absolute;
   text-align:center;
   display:none!important;
}
.entry-content.single-page .my_social_icons a.icon.circle{
	border-color: var(--primary-color);
	color: var(--primary-color)
}
.entry-content.single-page .my_social_icons span.sharetitle{
	margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
.entry-content.single-page > .article_content{
	padding-left: 70px;
	text-align:justify;
}
@media only screen and (max-width: 420px){
	.tags_goiy {
  margin-top: -13px;
		text-align:center;
}
.entry-content.single-page > .article_content{
	display: block;
	width: 100%;
	padding-left:0px;
}
	.entry-content.single-page .my_social_icons{
		display: none;
	}
.entry-content.single-page .blog-share{
	vertical-align: middle;
	width: 100%;
}
.entry-content.single-page .blog-share .is-divider {
	display : block ! important;
}
	
	.p-doc-relative-wrapper .content-document-de{
		
		display:none;
	}
	/*.slder .flickity-viewport{height: 740px!important;} */
	
	
	.s-content h2.thin{
	padding-left: 30px;
}
	#floating-container{
		bottom:40px;
	}
.s-content .btn_dangky{
	width:180px;
	margin-left: calc(50% - 90px) !important;
	
}
	.floating-menu {
		left:4px;
	}
	.floating-menu li a{
		margin-bottom:4px;
		font-size:12px;
	}
	.sticky-add-to-cart__product img , .sticky-add-to-cart__product span.amount{display: none;}
	.form-lien-he .left, .form-lien-he .right {width: 100%;padding-left: 0;padding-right: 0;}
	.searchandfilter li{width: 100%;margin-left: 0!important; padding-right: 0!important;}
	
	.social-share span,.social-share .trangthainoibat{
		display:inline-block !important;
	}
		
	.h-dk {
		position:absolute;
		
		right: 0;
		
	
			
	}
	.h-dk .col {
			display:block;
		z-index:999999 !important;
	}
	
}
/*TÌM KIẾM TRANG CHỦ*/
.header, .header-wrapper {
    background-color: #fff;
}
.nav-dark .nav>li>a {
    color: #000!important;
}
.logo a {
    margin-left: 15px;
}
/*dăng tin ngay*/
.header__cpanel--item .btn-secondary {
    color: #fff;
    background: #d09e3f;
}
.header__cpanel--item .btn {
    cursor: pointer;
    border: none;
    height: 40px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    text-transform: capitalize!important;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
}
.header__cpanel--item .btn i {
    font-size: 18px;
}
.fa-regular, .far {
    font-weight: 700;
}

/*goi điện*/

.text-icon-up-down {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
;
    justify-content: flex-start;
    -webkit-box-align: flex-start;
    -webkit-flex-align: flex-start;
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    align-items: center;
    margin-bottom: 16px;
}
 .text-icon-up-down img {
        width: 30px;
        height: 30px;
    }
 .text-icon-up-down .sub-title {
        font-size: 14px;
    }
.text-icon-up-down .sub-title {
    margin-left: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
    text-align: left;
}
.text-icon-up-down .title {
        font-size: 17px;
    }
    .text-icon-up-down .title {
    margin-left: 8px;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 0;
    text-transform: unset;
}
.text-icon-up-down .title a {
    color: #d09e3f;
}
/*title trang chủ*/
.title-trangchu p {
    margin-bottom: 1px!important;
}
/*khám phá azhouse*/
.ul-tab-icon {
        margin-bottom: 8px;
    }
    .ul-tab-icon {
    text-align: center;
    margin-bottom: 23px;
    padding-left: 0;
    width: 100%;
}
.ul-tab-icon ul {
    display: flex
;
    justify-content: center;
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 0;
}
.ul-tab-icon ul li {
        width: 80px;
    }
    .ul-tab-icon ul li {
    display: inline-block;
    width: 100px;
    text-align: center;
    margin-right: 1px;
    margin-bottom: 10px;
}
.ul-tab-icon ul li a.active {
    pointer-events: none;
}
.ul-tab-icon ul li a {
    display: block;
    white-space: break-spaces;
    text-align: center;
}
ul-tab-icon ul li a.active .icon {
    background-color: transparent;
}
.ul-tab-icon ul li a:hover .icon, .ul-tab-icon li a.active .icon {
    border-color: #d09e3f;
    background-color: #d09e3f !important;
}
.ul-tab-icon ul li .icon {
        width: 64px;
        height: 64px;
        border-radius: 8px;
        margin-bottom: 4px;
    }
    .ul-tab-icon ul li .icon {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 auto 8px;
    width: 64px;
    height: 64px;
    border: 1px solid #000;
    background-color: var(--fff);
    border-radius: 15px;
    transition: .5s all;
}
.ul-tab-icon ul li a img {
        width: 30px;
        height: 30px;
    }
        .ul-tab-icon ul li .text {
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
    }

.product-small.box .trang-thai-du-an,.product-small.box .khuyen-mai {
    background-color: #d09e3f !important;
}
/*AZHOUSE GẦN BẠN*/
.azhouse-ganban .image-cover{
    border-radius: 10px;
}
/*Tiện ích*/
.has-icon-bg .icon .icon-inner {
    color: #d09e3f !important;
    background: #d09e3f;
}
.icon-box-right, .icon-box-center {
    width: 100%;
    padding: 20px;
    border-radius: 6px;
    box-shadow: rgba(50, 50, 105, 0.15) 1px 2px 5px 1px, rgba(0, 0, 0, 0.05) 1px 1px 1px 2px;
    background: #fff;
}

/*************** ADD CUSTOM CSS HERE.   ***************/

@media only screen and (max-width: 48em) {
    .col-inner ul li {
    margin-left: auto!important;
    margin-bottom: auto;
}
.nav>li>a>i.icon-menu {
  color: #d09e3f !important;
        font-weight: 700 !important;
        font-size: 30px !important;
}
.icon-telegram {
    height:36px;
    width:36px;
}
}