/* =========================================
   UI SỔ VÀNG (THIẾT KẾ MỚI TỪ ẢNH)
   ========================================= */
.sv-page {
  background-color: #fcf8f2 !important;
  /* Nền vàng kem nhạt ấm áp */
  font-family: -apple-system, system-ui, sans-serif;
}

.sv-header {
  padding: 15px 20px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.sv-back-btn {
  background: #fcd535;
  border: none;
  color: #111;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(252, 176, 69, 0.3);
}

.sv-export-btn {
  background: transparent;
  border: none;
  color: #111;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.sv-container {
  padding: 10px 20px 80px 20px;
  max-width: 600px;
  margin: 0 auto;
}

/* Thẻ Tổng Quan */
.sv-summary-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}

.sv-card-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 15px;
  display: inline-block;
  padding: 5px 15px;
  background: #fffdf5;
  border-radius: 20px;
}

/* Grid 4 ô */
.sv-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 15px;
}

.sv-metric-box {
  background: #ffe6b3;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sv-metric-label {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sv-icon-circle {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.sv-metric-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 4px;
}

.sv-metric-sub {
  font-size: 0.7rem;
  color: #888;
  font-style: italic;
}

/* Dòng PnL (Lãi Lỗ) */
.sv-pnl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-radius: 12px;
  font-weight: 700;
  margin-top: 10px;
}

.sv-pnl-label {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.sv-pnl-val {
  font-size: 1.1rem;
  flex: 1;
  text-align: center;
}

.sv-pnl-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: white;
}

.sv-pnl-loss {
  background: #fef9f9;
  color: #ef4444;
}

.sv-pnl-loss .sv-pnl-badge {
  background: #ef4444;
}

.sv-pnl-profit {
  background: #ecfdf5;
  color: #10b981;
}

.sv-pnl-profit .sv-pnl-badge {
  background: #10b981;
}

/* Lịch sử giao dịch dạng Card Expandable */
.sv-history-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sv-hist-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  border: 1px solid #f1f5f9;
}

.sv-hist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sv-hist-date {
  font-size: 1rem;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-hist-date span {
  font-weight: 700;
  font-family: monospace;
  font-size: 1.1rem;
}

.sv-hist-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sv-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.sv-action-btn:hover {
  color: #1e293b;
}

.sv-action-btn.note-btn:hover {
  color: #8b5cf6;
}

/* Màu tím cho note */
.sv-action-btn.del-btn:hover {
  color: #ef4444;
}

/* Màu đỏ cho xóa */

/* Trạng thái thu gọn */
.sv-hist-collapsed {
  margin-top: 12px;
  font-size: 1rem;
  color: #334155;
}

.sv-fw-bold {
  font-weight: 600;
  color: #0f172a;
}

/* Trạng thái mở rộng */
.sv-hist-expanded {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.95rem;
  color: #64748b;
}

.sv-hist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-hist-row span:first-child {
  width: 20px;
  text-align: center;
}

/* Căn lề icon emoji */

/* Dòng PnL (Lãi Lỗ) chung cho cả Tổng quan & Item */
.sv-pnl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-radius: 12px;
  font-weight: 700;
}

.sv-pnl-label {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.sv-pnl-val {
  font-size: 1.1rem;
  flex: 1;
  text-align: center;
}

.sv-pnl-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: white;
}

.sv-pnl-loss {
  background: #fee2e2;
  color: #ef4444;
}

.sv-pnl-loss .sv-pnl-badge {
  background: #ef4444;
}

.sv-pnl-profit {
  background: #ecfdf5;
  color: #10b981;
}

.sv-pnl-profit .sv-pnl-badge {
  background: #10b981;
}

/* Nút FAB (+) */
.sv-fab {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fcd535;
  color: #111;
  font-size: 2rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(252, 176, 69, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: transform 0.2s;
}

.sv-fab:active {
  transform: scale(0.9);
}

/* Input Modal Sổ vàng */
.sv-input {
  width: 100%;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.95rem;
  outline: none;
  transition: 0.2s;
}

.sv-input:focus {
  border-color: #fcb045;
  background: white;
}

.sv-btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: #fcb045;
  color: #111;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s;
}

.sv-btn-primary:active {
  transform: scale(0.98);
}

/* =========================================
   UI SỔ VÀNG (THIẾT KẾ MỚI CHUẨN PIXEL)
   ========================================= */

/* Thiết lập màu nền tổng thể và font chữ mặc định cho toàn bộ trang */
.sv-page-new {
  background-color: #fdf6e9 !important;
  font-family: -apple-system, system-ui, sans-serif;
}

/* -----------------------------------------
   1. KHU VỰC HEADER (THANH ĐIỀU HƯỚNG)
   ----------------------------------------- */
/* Nút Home ở góc trên bên phải */
.sv-btn-home {
  background: transparent;
  border: none;
  color: #64748b;
  /* Màu xám trung tính */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* Hiệu ứng khi di chuột vào nút */
.sv-btn-home:hover {
  color: #111;
  /* Đổi sang màu đen đậm */
  background: #f1f5f9;
  /* Nền xám nhạt */
}

/* Hiệu ứng lún xuống khi bấm */
.sv-btn-home:active {
  transform: scale(0.9);
}

/* Thanh header dính (sticky) ở trên cùng trang, dàn đều các phần tử 2 bên */
.sv-header-new {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fdf6e9;
}

/* Nút menu (hamburger icon) với bo góc và nền vàng đặc trưng */
.sv-btn-hamburger {
  background: #ffefb3;
  border: none;
  color: #111;
  width: 36px;
  height: 25px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nút chức năng đám mây (đồng bộ/lưu trữ) nằm trên header */
.sv-btn-cloud {
  background: transparent;
  border: none;
  color: #111;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

/* -----------------------------------------
   2. KHU VỰC NỘI DUNG CHÍNH (MAIN LAYOUT)
   ----------------------------------------- */
/* Khung chứa nội dung chính, giới hạn chiều rộng 500px (tối ưu cho mobile/app) và căn giữa */
.sv-main-wrap {
  padding: 10px 20px 100px 20px;
  max-width: 500px;
  margin: 0 auto;
}

/* -----------------------------------------
   3. BẢNG THỐNG KÊ TỔNG QUAN (DASHBOARD)
   ----------------------------------------- */
/* Khung nền trắng bo góc, tạo hiệu ứng nổi (shadow) để chứa các chỉ số */
.sv-white-board {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  margin-bottom: 20px;
}

/* Tiêu đề của bảng thống kê */
.sv-board-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 18px;
  display: inline-block;
  padding: 8px 16px;
  background: transparent;
  border-radius: 20px;
  color: #1a1a1a;
}

/* Bố cục lưới 2 cột (2x2) */
.sv-grid-2x2 {
  display: grid;
  /* DÙNG minmax(0, 1fr) THAY VÌ 1fr ĐỂ NGĂN GRID TỰ PHÌNH TO TRÀN MÀN HÌNH */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Khối hộp thông số màu vàng nhạt */
.sv-box-yellow {
  background: linear-gradient(135deg, #ffe6b3 0%, #fae69c, #f1dc91 100%);
  border: 1px solid #efefef;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.15);

  /* GIẢM padding từ 16px xuống 12px để tăng không gian cho chữ trên mobile */
  padding: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* Cắt phần viền tràn nếu có */
}

/* Tiêu đề hộp (Ví dụ: Tổng chi phí) */
.sv-box-head {
  font-size: 0.7rem;
  font-weight: 500;
  color: #475569;
  /* Màu xám trung tính giống ảnh */
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Các con số lớn (Ví dụ: 256.100.000 đ) */
.sv-box-val {
  font-size: 1.15rem;
  /* Giảm nhẹ size để vừa vặn hơn trên đt */
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.5px;

  /* ÉP CON SỐ TỰ RỚT DÒNG NẾU QUÁ DÀI */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Dòng chú thích nghiêng (Ví dụ: TB/chỉ: 17.074.000 đ) */
.sv-box-sub {
  font-size: 0.75rem;
  font-weight: 400;
  /* Nét thường */
  color: #64748b;
  /* Xám nhạt */
  font-style: italic;
  /* In nghiêng */
}

/* -----------------------------------------
   4. THANH HIỂN THỊ LỜI/LỖ (PnL - Profit and Loss)
   ----------------------------------------- */
/* Thanh ngang hiển thị tổng kết lời/lỗ */
.sv-pnl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 700;
  margin-top: 10px;
}

.sv-pnl-label {
  font-size: 0.9rem;
}

.sv-pnl-val {
  font-size: 1.05rem;
  flex: 1;
  text-align: center;
}

/* Nút hiển thị phần trăm (%), bo góc tròn */
.sv-pnl-percent {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  color: white;
}

/* Trạng thái lỗ (Màu đỏ) */
.sv-pnl-loss {
  background: #fee8e9;
  color: #e1373e;
}

.sv-pnl-loss .sv-pnl-percent {
  background: #e1373e;
}

/* Trạng thái lời (Màu xanh lá) */
.sv-pnl-profit {
  background: #ecfdf5;
  color: #10b981;
}

.sv-pnl-profit .sv-pnl-percent {
  background: #10b981;
}

/* Trạng thái hòa vốn / trung tính (Màu xám/xanh dương nhạt) */
.sv-pnl-neutral {
  background: #f1f5f9;
  color: #64748b;
}

.sv-pnl-neutral .sv-pnl-percent {
  background: #94a3b8;
}

/* Đường gạch ngang phân cách nét đứt */
.sv-divider {
  border: 0;
  border-top: 1px dashed #e2e8f0;
  margin: 18px 0;
}

/* Nút bấm xem chi tiết/thông tin thêm có màu tím nhạt */
.sv-btn-info {
  width: 100%;
  background: #f3f0ff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  color: #4c379a;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Icon danh sách (list) nằm ở góc phải của nút info */
.sv-icon-list {
  position: absolute;
  right: 12px;
  width: 26px;
  height: 26px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
}

.sv-icon-list::after {
  content: "⋮=";
  font-size: 0.8rem;
  color: #4c379a;
  font-weight: bold;
}

/* Bảng thống kê phụ (dành cho bạc/tài sản khác) với nền xám */
.sv-silver-board {
  background: #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 25px;
}

/* -----------------------------------------
   5. DANH SÁCH LỊCH SỬ GIAO DỊCH
   ----------------------------------------- */
/* Header của phần lịch sử */
.sv-history-header-new {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* Chấm hoặc badge nhỏ màu vàng tạo điểm nhấn cho header lịch sử */
.sv-badge-yellow {
  background: #fed74a;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

/* Hàng chứa các nút bộ lọc (Filter) */
.sv-filter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* Từng nút bộ lọc (Tất cả, Mua, Bán...) */
.sv-filter-box {
  background: white;
  border: 1px solid #fcebb6;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #444;
}

/* Khung bọc danh sách các thẻ giao dịch */
.sv-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Mỗi thẻ (card) đại diện cho 1 giao dịch/mục ghi chép */
.sv-card-item {
  background: white;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

/* 2. Điều chỉnh nút (+) để nó nằm "sát vào" lề phải của nội dung */
/* ==========================================================================
   NÚT (+) OVERLAY (NỔI LƠ LỬNG) & ẨN KHỎI TRANG CHỦ
   ========================================================================== */

/* 1. Ẩn nút (+) khi Sổ Vàng đang đóng để không bị "dính" ngoài trang chủ */
#tichChiPage:not(.open) .sv-fab-add {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Tinh chỉnh các thẻ lịch sử để trông sạch sẽ hơn */
.sv-hist-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 0 !important;
  /* Xóa bỏ margin-bottom để không bị cộng dồn khoảng trắng với lệnh gap ở trên */
}

/* Header của từng thẻ chứa ngày tháng và các thao tác (Sửa/Xóa) */
.sv-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  /* Mình đã giảm thêm margin bên trong thẻ từ 12px xuống 8px cho gọn hơn */
}

.sv-item-date {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-item-actions {
  display: flex;
  gap: 12px;
  color: #a1a1aa;
}

.sv-item-actions span {
  cursor: pointer;
  transition: 0.2s;
}

.sv-item-actions span:hover {
  color: #1a1a1a;
}

/* Tiêu đề loại giao dịch (VD: Mua Vàng Nhẫn) */
.sv-item-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Các dòng thông tin chi tiết (Số lượng, Đơn giá...) */
.sv-item-row {
  font-size: 0.9rem;
  color: #475569;
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
}

/* Highlight giá trị trong mỗi dòng chi tiết */
.sv-item-row .val {
  font-weight: 700;
  color: #1a1a1a;
}

/* -----------------------------------------
  
/* -----------------------------------------
   7. FORM NHẬP LIỆU (MODAL THÊM/SỬA)
   ----------------------------------------- */
/* Nền của popup/modal form */
.sv-modal {
  background: #ffffff !important;
  padding: 25px 20px !important;
}

.sv-form-group {
  margin-bottom: 15px;
}

.sv-label {
  display: block;
  font-weight: 700;
  color: #475569;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.sv-required {
  color: #ef4444;
}

/* Input Modal Sổ vàng: Đổi sang gạch chân để chữ sát lề trái */
.sv-input {
  width: 100%;
  padding: 8px 0px;
  /* Số 0 ép giá trị sát lề trái, dóng thẳng hàng với tiêu đề */
  border: none;
  /* Bỏ viền hộp */
  border-bottom: 1.5px solid #e2e8f0;
  /* Chuyển thành gạch chân */
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: #111;
  outline: none;
  transition: 0.2s;
}

.sv-input:focus {
  border-bottom-color: #fcb045;
  background: transparent;
}

/* Nút Lưu */
.sv-btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: #fcb045;
  color: #111;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s;
}

.sv-btn-primary:active {
  transform: scale(0.98);
}

/* -----------------------------------------
   7. FORM NHẬP LIỆU (MODAL THÊM/SỬA)
   ----------------------------------------- */
/* Nền của popup/modal form */
.sv-modal {
  background: #ffffff !important;
  padding: 25px 20px !important;
}

.sv-form-group {
  margin-bottom: 15px;
}

.sv-label {
  display: block;
  font-weight: 700;
  color: #475569;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.sv-required {
  color: #ef4444;
}

/* Input Modal Sổ vàng: Hộp bo góc với đệm trái 15px giúp mọi giá trị dóng thẳng hàng */
.sv-input {
  width: 100%;
  padding: 12px 15px;
  /* Chìa khóa để các giá trị thẳng hàng nhau ở mép trái hộp */
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.95rem;
  color: #111;
  outline: none;
  transition: 0.2s;
  box-sizing: border-box;
  /* Ép kích thước đồng đều */
}

.sv-input:focus {
  border-color: #fcb045;
  background: white;
}

/* -----------------------------------------
   8. TABS TRONG FORM (GHI CHÚ)
   ----------------------------------------- */
.sv-tabs {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.sv-tab-btn {
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
}

.sv-tab-btn.active {
  background: #fcd535;
  color: #111;
}

/* Khung nội dung Ghi chú */
.sv-tab-content {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 15px;
  /* Giữ đúng 15px để dòng chữ ghi chú thẳng hàng với các ô input bên trên */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.02);
}

.sv-textarea {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.95rem;
  color: #111;
  min-height: 80px;
  resize: vertical;
  padding: 0;
}

.sv-textarea::placeholder {
  color: #cbd5e1;
}

/* Nút Lưu ở dưới cùng */
.sv-btn-save {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: #fcd535;
  color: #111;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sv-btn-save:active {
  transform: scale(0.98);
}

/* ==========================================================================
   ĐỔI FONT CHỮ SỔ VÀNG THÀNH BE VIETNAM PRO (ĐÃ TỐI ƯU ĐỘ CAO)
   ========================================================================== */
/* Áp dụng cho toàn bộ trang Sổ vàng và Modal */
#tichChiPage,
#tichChiPage input,
#tichChiPage select,
#tichChiPage textarea,
#tichChiPage button,
#addTcModalOverlay * {
  font-family: 'Be Vietnam Pro', -apple-system, system-ui, sans-serif !important;
  font-weight: 500;
  /* Dùng Medium (500) làm mặc định để chữ đứng và rõ nét hơn */
  -webkit-font-smoothing: antialiased;
  /* Khử răng cưa giúp chữ mượt như app native */
}

/* ==========================================================================
   VÁ LỖI NÚT (+) VÀ THANH CUỘN KÉP TRÊN DESKTOP
   ========================================================================== */

/* 1. XÓA THANH CUỘN KÉP: Khóa thanh cuộn của Trang chủ khi mở Sổ vàng */
body.sv-desktop-active {
  overflow: hidden !important;
}

/* 2. ẨN NÚT (+) KHỎI TRANG CHỦ: Tàng hình nút + khi Sổ Vàng đang đóng */
#tichChiPage:not(.open) .sv-fab-add {
  display: none !important;
}

/* 3. CĂN NÚT (+) LỌT LÒNG VÀO KHUNG 500PX TRÊN MÁY TÍNH */
.sv-fab-add {
  position: fixed !important;
  bottom: 55px !important;
  left: 50% !important;
  margin-left: 170px !important;
  right: auto !important;

  width: 56px !important;
  height: 56px !important;
  /* BỔ SUNG 4 DÒNG NÀY ĐỂ CHỐNG MÉO TRÊN ĐIỆN THOẠI */
  min-width: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  -webkit-appearance: none !important;

  border-radius: 50% !important;

  /* CHỈNH SỬA TRONG SUỐT VÀ VIỀN VÀNG TẠI ĐÂY */
  background: rgba(254, 215, 74, 0.337) !important;
  border: 2px solid #fed74a !important;
  color: #030303 !important;

  font-size: 1.8rem !important;
  font-weight: normal !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(254, 215, 74, 0.2) !important;

  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

/* THÊM HIỆU ỨNG HOVER CHO ĐẸP */
.sv-fab-add:hover {
  background: rgba(254, 215, 74, 0.1) !important;
  transform: scale(1.05) !important;
}

.sv-fab-add:active {
  transform: scale(0.9) !important;
}

/* 4. TRẢ LẠI GIAO DIỆN BÌNH THƯỜNG KHI XEM TRÊN ĐIỆN THOẠI */
@media (max-width: 540px) {
  .sv-fab-add {
    left: auto !important;
    margin-left: 0 !important;
    right: 25px !important;
  }
}

/* Trạng thái Lịch sử đã được Bán (Chuẩn thiết kế) */
.sv-hist-card-sold {
  border: 1px solid #ddd6fe !important;
  /* Viền tím nhạt pastel */
  background-color: #f5f3ff !important;
  /* Nền tím siêu nhạt (purple-50) */
  box-shadow: none !important;
  /* Bỏ đổ bóng để phẳng hơn */
}

/* Xóa màu tím đậm của ngày tháng, trả về màu đen như ảnh */
.sv-hist-card-sold .sv-hist-date span {
  color: #0f172a !important;
}

/* --- GIAO DIỆN THÔNG TIN BÁN MỞ RỘNG --- */
.sv-sell-info-wrapper {
  border: 1px solid #8dc8dd;
  /* Viền tím pastel */
  border-radius: 14px;
  margin-top: 15px;
  overflow: hidden;
  background: white;
}

.sv-sell-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: #f5f3ff;
  /* Nền tím siêu nhạt */
  cursor: pointer;
  color: #7248b0;
  /* Tím đậm */
  border-radius: 12px;
  margin: 4px;
  transition: background 0.2s;
}

.sv-sell-info-header:hover {
  background: #ede9fe;
}

.sv-sell-info-title {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 0.95rem;
}

.sv-sell-info-title span {
  margin-left: 6px;
  font-weight: normal;
  font-size: 0.85rem;
}

.sv-icon-list-new {
  width: 26px;
  height: 26px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd6fe;
  color: #4c1d95;
}

.sv-sell-info-content {
  padding: 0 12px 12px 12px;
}

.sv-sell-box {
  background: #f5f3ff;
  /* Nền tím nhạt */
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sv-sell-box-head {
  font-size: 0.8rem;
  color: #4c1d95;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.sv-sell-box-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: #4c1d95;
}

/* =========================================================
   NỀN GRADIENT VÀNG NHẠT CHO 4 Ô LỚN SỔ VÀNG
   ========================================================= */

.sv-box-yellow {
  /* Dải màu gradient từ vàng kem sáng sang vàng nhạt */
  background: linear-gradient(135deg, #ffe6b3 0%, #fae69c, #f1dc91 100%);

  /* Viền mỏng màu vàng để khối trông sắc nét hơn */
  border: 1px solid #efefef;

  /* Bo góc và bóng đổ ánh vàng nhẹ nhàng */
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.15);

  padding: 16px;
  /* Căn chỉnh lại khoảng cách cho thoáng */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hiệu ứng nổi lên nhẹ khi người dùng lướt chuột qua (tuỳ chọn) */
.sv-box-yellow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 179, 8, 0.25);
}


/* Tương thích chế độ Dark Mode (nếu có) */
@media (prefers-color-scheme: dark) {
  .sv-box-yellow {
    background: linear-gradient(135deg, #422006 0%, #78350F 100%);
    border-color: #92400E;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

  .sv-box-yellow .sv-box-head {
    color: #FDE68A;
  }

  .sv-box-yellow .sv-box-val {
    color: #FEF08A;
  }

  .sv-box-yellow .sv-box-sub {
    color: #FCD34D;
  }
}

/* =========================================================
   TỐI ƯU HIỂN THỊ 4 Ô SỔ VÀNG TRÊN MOBILE (MỞ RỘNG DIỆN TÍCH)
   ========================================================= */
@media (max-width: 600px) {

  /* --- 1. ÉP SÁT LỀ ĐỂ TĂNG CHIỀU RỘNG TỔNG THỂ --- */
  .sv-main-wrap {
    padding-left: 8px !important;
    /* Giảm lề trái của trang */
    padding-right: 8px !important;
    /* Giảm lề phải của trang */
  }

  .sv-white-board {
    padding: 15px 10px !important;
    /* Bóp hẹp khoảng trắng của viền bảng trắng */
  }

  .sv-grid-2x2 {
    gap: 8px !important;
    /* Thu hẹp rãnh giữa 2 ô vuông (mặc định 12px) */
  }

  /* --- 2. CẤU HÌNH 4 Ô LỚN --- */
  .sv-box-yellow {
    padding: 20px 8px !important;
    /* Tràn chữ ra sát viền của từng ô vàng */
    justify-content: space-evenly !important;
    /*
        
    }

    .sv-box-val {
        font-size: 1.25rem !important; 
        letter-spacing: -0.5px;
        white-space: nowrap !important; /* ÉP CỨNG: Tuyệt đối không cho rớt dòng */
  }

  .sv-box-sub {
    font-size: 0.85rem !important;
  }

  .sv-box-head {
    font-size: 0.8rem !important;
    letter-spacing: -0.2px;
    /* Thu hẹp khoảng cách chữ tiêu đề 1 xíu để lấy chỗ */
  }

  /* --- 3. CẤU HÌNH THANH LÃI LỖ (PnL) --- */
  .sv-pnl-bar {
    padding: 8px 8px !important;
    /* Giảm padding hai bên để nhường chỗ cho số tiền */
    gap: 4px !important;
    /* Rút ngắn khoảng cách giữa Tiêu đề - Số tiền - Phần trăm */
  }

  .sv-pnl-label {
    font-size: 0.95rem !important;
  }

  .sv-pnl-val {
    font-size: 1.2rem !important;
    white-space: nowrap !important;
    /* ÉP CỨNG: Không rớt dòng */
  }

  .sv-pnl-percent {
    font-size: 0.95rem !important;
    padding: 6px 10px !important;
  }

  /* =========================================================
   TÙY CHỈNH GIÃN DÒNG VÀ THỤT LỀ CHO 4 Ô LỚN
   ========================================================= */

  /* 1. TĂNG GIÃN DÒNG (Áp dụng cho cả Máy tính và Điện thoại) */
  .sv-box-head {
    margin-bottom: 18px !important;
    /* Đẩy khoảng cách từ Tiêu đề xuống Số tiền rộng ra */
  }

  .sv-box-val {
    margin-bottom: 14px !important;
    /* Đẩy khoảng cách từ Số tiền xuống dòng chữ nghiêng rộng ra */
  }

  /* 2. TĂNG THỤT LỀ TRONG (Chỉ áp dụng trên Điện thoại để tránh xô lệch form máy tính) */

  .sv-box-yellow {
    /* 20px là lề trên/dưới. 14px là lề trái/phải (đã tăng từ 8px lên 14px để thụt lề nhiều hơn) */
    padding: 20px 14px !important;
  }
  
}
/* =========================================================
   GIẢM CHIỀU RỘNG 2 Ô: TỔNG SỐ LƯỢNG VÀ TÍCH LŨY (TRÊN MOBILE)
   ========================================================= */
@media (max-width: 600px) {
    .sv-grid-2x2 .sv-box-yellow:nth-child(3),
    .sv-grid-2x2 .sv-box-yellow:nth-child(4) {
        /* Trả lại padding giống hệt 2 ô phía trên để thẳng hàng */
        padding: 8px 14px !important;
    }
}