html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
  /* Cỡ chữ CƠ SỞ cho TOÀN BỘ app — căn cứ theo cỡ chữ bong bóng chat AI (đã xác nhận ổn, dễ đọc): 16px ở
     màn hình rộng (máy tính), 15px ở màn hình hẹp (điện thoại). Đặt tại body để MỌI phần tử trong app —
     kể cả những gì được xây dựng trong TƯƠNG LAI — tự động kế thừa đúng cỡ chữ này theo cơ chế kế thừa
     CSS tiêu chuẩn, TRỪ những nơi đã tự khai báo cỡ chữ riêng (badge nhỏ, tiêu đề lớn, nhãn phụ...) —
     các khai báo cụ thể luôn được ưu tiên hơn, không hề bị ảnh hưởng bởi thay đổi này. */
  body{margin:0; overflow-x:hidden; font-size:16px;}
  @media (max-width:768px){ body{ font-size:15px; } }
  #root{overflow-x:hidden;}
  .preview-banner{
    position:sticky; top:0; z-index:60; background:#fff3cd; color:#7a5b00;
    padding:10px 16px; text-align:center; font-size:13px; font-weight:600;
    border-bottom:2px solid #f0c14b;
  }
  .link-btn{
    background:none; border:none; padding:0; margin:0; color:var(--rice-dark);
    text-decoration:underline; font-weight:700; font-size:inherit; cursor:pointer; display:inline;
  }
  .preview-banner .link-btn{
    background:none; border:none; padding:0; margin:0; color:#1a4d8f;
    text-decoration:underline; font-weight:700; font-size:inherit; cursor:pointer;
  }
  .access-mode-banner{
    position:sticky; top:0; z-index:59; display:flex; align-items:center; justify-content:center;
    gap:10px; flex-wrap:wrap; padding:9px 16px; text-align:center; font-size:13px; font-weight:600;
    border-bottom:1px solid rgba(47,74,60,.18);
  }
  .access-mode-banner-guest{ background:#eef5ee; color:#2f4a3c; }
  .access-mode-banner .link-btn{ color:#2f4a3c; }
  .drive-hub{display:flex; flex-direction:column; gap:14px;}
  .drive-hub-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);}
  .drive-hub-head h3{margin:4px 0 2px; font-size:20px; color:var(--ink);}
  .drive-hub-actions,.drive-space-tabs,.drive-toolbar-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .eyebrow{font:700 11px var(--app-font-mono); letter-spacing:.12em; color:var(--gold);}
  .drive-space-tabs{padding:0 2px;}
  .drive-notice{padding:10px 13px; border-radius:10px; background:#f4f0e5; color:var(--ink); border:1px solid var(--line); font-size:13px;}
  .drive-notice-local{background:#eef5ee; color:var(--green);}
  .drive-notice-tour{background:#fff3cd; color:#7a5b00; border-color:#f0c14b;}
  .drive-office-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
  .drive-office-card{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); text-align:left; cursor:pointer;}
  .drive-office-card:hover{background:var(--paper-2); border-color:var(--gold);}
  .drive-office-card span{grid-row:1/3; font-size:27px;}
  .drive-office-card b{font-size:13px;}
  .drive-office-card small{color:#756f60; font-size:11px;}
  .drive-office-placeholder{max-width:560px;}
  .drive-office-placeholder-icon{text-align:center; font-size:54px; margin:8px 0 4px;}
  .drive-office-placeholder h4{margin:0 0 8px; text-align:center; color:var(--ink); font-size:18px;}
  .drive-office-placeholder-note{padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:var(--paper-2); color:#756f60; font-size:13px;}
  .office-module-page{min-height:420px; display:flex; align-items:center; justify-content:center; padding:18px 0;}
  .office-module-card{width:min(720px,100%); padding:30px; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); text-align:center;}
  .office-module-icon{font-size:58px; margin-bottom:8px;}
  .office-module-card h3{margin:4px 0 10px; font-size:28px; color:var(--ink);}
  .office-module-card .sub{max-width:560px; margin:0 auto; line-height:1.65;}
  .office-module-status{display:flex; flex-direction:column; gap:5px; margin:22px auto; padding:14px 16px; max-width:540px; border:1px solid rgba(199,154,43,.45); border-radius:12px; background:rgba(199,154,43,.1); color:var(--ink);}
  .office-module-status span{font-size:13px; color:#756f60;}
  .office-module-actions{display:flex; justify-content:center; gap:9px; flex-wrap:wrap;}
  .drive-empty-actions{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px;}
  .drive-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
  .drive-breadcrumb{display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:#756f60;}
  .drive-breadcrumb button{border:0; background:none; color:var(--rice-dark); font-weight:700; cursor:pointer; padding:4px;}
  .drive-toolbar-right input{min-width:210px; border:1px solid var(--line); border-radius:8px; padding:9px 11px; background:#fffdf7;}
  .drive-items{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;}
  .drive-item{min-height:132px; display:flex; flex-direction:column; gap:10px; padding:15px; border:1px solid var(--line); border-radius:12px; background:#fffdf7; box-shadow:0 2px 8px rgba(47,74,60,.06); cursor:pointer; transition:transform .15s, box-shadow .15s;}
  .drive-item:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(47,74,60,.12);}
  .drive-item-icon{font-size:30px;}
  .drive-item-main{display:flex; flex-direction:column; gap:4px; min-width:0;}
  .drive-item-main b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
  .drive-item-main span{font-size:12px; color:#756f60; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .drive-item-actions{display:flex; gap:6px; margin-top:auto; justify-content:flex-end;}
  .drive-item-actions button{border:0; background:transparent; cursor:pointer; padding:4px; border-radius:6px;}
  .drive-item-actions button:hover{background:#f0eadb;}
  .drive-items.is-list{display:flex; flex-direction:column; gap:7px;}
  .drive-items.is-list .drive-item{min-height:0; flex-direction:row; align-items:center; padding:10px 13px;}
  .drive-items.is-list .drive-item-icon{font-size:21px;}
  .drive-items.is-list .drive-item-main{flex:1;}
  .drive-empty{grid-column:1/-1; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#756f60; border:1px dashed var(--line); border-radius:14px; background:rgba(255,253,247,.65); text-align:center;}
  .drive-empty div{font-size:36px;}
  .drive-route-card{display:flex; flex-direction:column; gap:18px; padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);}
  .drive-route-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
  .drive-route-action-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .drive-route-scope{font-size:12px; font-weight:700; color:var(--rice-dark); background:var(--paper-2); border-radius:999px; padding:6px 10px;}
  .drive-route-title{display:flex; align-items:flex-start; gap:14px; padding-bottom:4px; border-bottom:1px solid var(--line);}
  .drive-route-title h3{margin:3px 0; color:var(--ink); font-size:23px;}
  .drive-route-icon{font-size:38px; line-height:1;}
  .drive-route-section{display:flex; flex-direction:column; gap:10px;}
  .drive-route-children{display:flex; flex-direction:column; gap:6px;}
  .drive-route-child{display:grid; grid-template-columns:28px 1fr 20px; align-items:center; gap:8px; width:100%; padding:10px 12px; text-align:left; border:1px solid var(--line); border-radius:9px; background:var(--white); color:var(--ink); cursor:pointer;}
  .drive-route-child:hover{background:var(--paper-2);}
  .drive-route-empty,.drive-route-denied{padding:24px; text-align:center; color:#756f60; border:1px dashed var(--line); border-radius:10px;}
  .drive-route-denied div{font-size:42px; margin-bottom:8px;}
  .drive-route-denied h3{margin:0 0 6px; color:var(--ink);}
  .drive-route-error{padding:24px; text-align:center; color:#756f60; border:1px solid #e6c6b8; border-radius:10px; background:#fff7f2;}
  .drive-route-error > div{font-size:42px; margin-bottom:8px;}
  .drive-route-error h3{margin:0 0 6px; color:var(--ink);}
  .drive-route-loading{text-align:center; color:#756f60; padding:30px;}
  .drive-route-footer{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding-top:6px; border-top:1px solid var(--line);}
  .drive-file-viewer{min-height:180px; border:1px solid var(--line); border-radius:10px; background:var(--white); overflow:auto;}
  .drive-viewer-image-wrap{display:flex; align-items:center; justify-content:center; padding:14px; min-height:180px; background:#f4f6f3;}
  .drive-viewer-image-wrap img{display:block; max-width:100%; max-height:70vh; object-fit:contain; border-radius:6px;}
  .drive-viewer-pdf{display:block; width:100%; min-height:70vh; border:0; background:#fff;}
  .drive-viewer-text{margin:0; padding:16px; max-height:70vh; overflow:auto; color:var(--ink); font:13px/1.65 var(--app-font-mono); white-space:pre-wrap; overflow-wrap:anywhere;}
  .drive-viewer-table{overflow:auto; padding:10px;}
  .drive-viewer-table table{width:max-content; min-width:100%; border-collapse:collapse; font-size:13px;}
  .drive-viewer-table th,.drive-viewer-table td{border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:top;}
  .drive-viewer-table th{background:var(--paper-2); font-weight:800;}
  .drive-viewer-docx{padding:18px; line-height:1.7; max-height:70vh; overflow:auto;}
  .drive-viewer-docx img{max-width:100%; height:auto;}
  .drive-viewer-slides{display:flex; flex-direction:column; gap:10px; padding:12px;}
  .drive-viewer-slide-note{padding:10px 12px; border-radius:8px; background:var(--paper-2); color:#756f60; font-size:12px;}
  .drive-viewer-slide{padding:16px; min-height:90px; border:1px solid var(--line); border-radius:9px; background:#fffdf7; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65;}
  .drive-viewer-slide-number{margin-bottom:7px; color:var(--rice-dark); font:700 11px var(--app-font-mono); letter-spacing:.08em; text-transform:uppercase;}
  .drive-viewer-fallback{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:180px; padding:24px; text-align:center; color:#756f60;}
  .drive-viewer-fallback .drive-viewer-icon{font-size:42px;}
  .drive-viewer-fallback h4{margin:0; color:var(--ink);}
  .drive-viewer-fallback p{margin:0 0 6px;}
  .drive-quick-note-modal{max-width:680px;}
  .drive-quick-note-modal .field-label{display:block; margin:12px 0 5px; color:var(--rice-dark); font-size:12.5px; font-weight:700;}
  .drive-quick-note-modal .text-input{display:block; width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:var(--white); color:var(--ink); font:inherit; resize:vertical;}
  .drive-quick-note-modal .text-input:focus{outline:2px solid var(--gold-soft); border-color:var(--gold);}
  .drive-move-modal{max-width:520px;}
  .drive-move-modal .field-label{display:block; margin:12px 0 5px; color:var(--rice-dark); font-size:12.5px; font-weight:700;}
  .drive-move-modal .text-input{display:block; width:100%; box-sizing:border-box; min-height:40px; border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:var(--white); color:var(--ink); font:inherit;}
  .drive-context-menu{position:fixed; z-index:120; display:flex; flex-direction:column; min-width:180px; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--paper); box-shadow:0 12px 28px rgba(47,74,60,.22);}
  .drive-context-menu button{border:0; border-radius:7px; padding:9px 11px; text-align:left; background:transparent; color:var(--ink); cursor:pointer; font:inherit; white-space:nowrap;}
  .drive-context-menu button:hover{background:var(--paper-2);}
  .drive-state{grid-column:1/-1; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#756f60; border:1px dashed var(--line); border-radius:14px; background:rgba(255,253,247,.65); text-align:center; padding:20px;}
  .drive-state-icon{font-size:36px;}
  .drive-state-error b{color:var(--ink);}
  .drive-share-add{display:grid; grid-template-columns:minmax(0,1fr) 1fr auto; gap:8px; align-items:center; margin:14px 0;}
  .drive-share-add input,.drive-share-add select{min-width:0; width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink);}
  .drive-share-list{display:flex; flex-direction:column; gap:7px; max-height:260px; overflow:auto;}
  .drive-share-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--white);}
  .drive-share-row div{display:flex; flex-direction:column; gap:3px; min-width:0;}
  .drive-share-row b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .drive-share-row span{font-size:12px; color:#756f60;}
  .drive-share-empty{padding:18px; text-align:center; color:#756f60; border:1px dashed var(--line); border-radius:9px;}
  .drive-comments{border-top:1px solid var(--line); padding-top:18px;}
  .drive-comments-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
  .drive-comment-list{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
  .drive-comment{position:relative; padding:11px 12px 10px; border:1px solid var(--line); border-radius:9px; background:var(--white);}
  .drive-comment-head{display:flex; align-items:center; gap:10px; padding-right:42px;}
  .drive-comment-head time{font-size:11px; color:#8a846f;}
  .drive-comment p{margin:7px 0 4px; white-space:pre-wrap; overflow-wrap:anywhere;}
  .drive-comment > button{padding:3px 8px; font-size:11px;}
  .drive-comment-compose{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
  .drive-comment-compose textarea{width:100%; min-height:74px; padding:10px 12px; resize:vertical; border:1px solid var(--line); border-radius:9px; background:var(--white); color:var(--ink); font:inherit;}
  .drive-comment-compose > div{text-align:right;}
  .drive-comment-note{padding:10px 12px; color:#756f60; background:var(--paper-2); border-radius:8px; font-size:12px;}
  @media (max-width:600px){
    .drive-share-add{grid-template-columns:1fr;}
    .drive-route-card{padding:16px;}
    .drive-route-title h3{font-size:20px;}
    .drive-hub-actions,.drive-space-tabs,.drive-toolbar-right{width:100%;}
    .drive-hub-actions .btn,.drive-space-tabs .btn,.drive-toolbar-right .btn{flex:1; min-width:0;}
    .drive-toolbar-right input{width:100%; flex-basis:100%;}
    .drive-items{grid-template-columns:1fr;}
    .drive-office-grid{grid-template-columns:1fr;}
    .drive-items.is-list .drive-item{align-items:flex-start;}
    .drive-items.is-list .drive-item-actions{margin-left:auto;}
    .drive-viewer-pdf{min-height:60vh;}
    .drive-office-placeholder{max-width:100%;}
    .office-module-card{padding:22px 16px;}
    .drive-viewer-slide{padding:13px;}
  }

  @media (hover:none), (pointer:coarse){
    .drive-item:hover{transform:none; box-shadow:0 2px 8px rgba(47,74,60,.06);}
    .drive-item-actions button{min-width:38px; min-height:38px; display:inline-flex; align-items:center; justify-content:center;}
    .drive-office-card{min-height:76px;}
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  }

  @media (max-width:820px){
    .app-shell{flex-direction:column;}
    .grid3{grid-template-columns:1fr;}
    .form-grid{grid-template-columns:1fr;}
    .topbar{flex-wrap:wrap; padding:14px 16px; gap:10px;}
    .content{padding:16px;}
    .drive-hub-head{flex-direction:column;}
    .drive-toolbar-right{width:100%;}
    .drive-toolbar-right input{flex:1; min-width:0;}
    /* Nút tab lặp lại ở dưới cùng modal (Kho lưu trữ / Tuỳ chỉnh màu / Chế độ xem cột) — màn hình hẹp
       chỉ giữ lại nút tab ở khung tiêu đề, ẩn hẳn bộ lặp lại ở chân bảng cho gọn. */
    .modal-foot-tabs{ display:none !important; }
    /* Cột đầu tiên chứa nút bút ✏️ (sv-sticky-1) ở 3 panel "Phương án vay đang hoạt động"/"Khoản vay
       đến hạn chưa xử lý"/"Khoản vay đang hoạt động" — màn hình hẹp ẩn hẳn đi cho gọn, cột đầu tiên
       lúc này luôn là Tên phương án/Họ và tên. */
    .sv-sticky-1{ display:none !important; }
    /* Nút "Lịch sử Nợ rủi ro"/"Lịch sử Nợ xấu"/"Xem lịch sử tất toán"/"Xem lịch sử TNTH" — màn hình
       hẹp rút gọn còn đúng 1 tên chung "Xem LS" cho gọn, logic bên trong không đổi. */
    .btn-narrow-label{ display:inline !important; }
    .btn-full-label{ display:none !important; }
    /* Cặp nút 2 cột đầu (Tính tiền lãi/Tất toán/Gia hạn nợ) — màn hình hẹp gộp thành 1 nút "Chọn hành
       động" có menu thả xuống, ẩn hẳn cột thứ 2 (cột "Quyết định") vì nút của nó đã gộp vào menu này. */
    .wide-action-pair{ display:none !important; }
    .narrow-action-pair{ display:inline-block !important; }
    .narrow-action-pair-col2{ display:none !important; }
    /* Chỉ màn hình hẹp: bỏ hẳn phần đệm (padding) bên trái của modal "Hồ sơ đang soạn" —
       để các cột cố định (Tên phương án/Họ và tên) khi cuộn ngang thật sự SÁT MÉP TRÁI màn hình, không
       còn khoảng trống do padding gây ra. Màn hình rộng giữ nguyên như cũ (có padding, chừa chỗ hiển
       thị các nút bấm khác ở mép trái). */
    #qfp-modal-body{ padding-left:0 !important; }
    /* Chỉ màn hình hẹp mới tách 2 hàng — 2 nút chọn tất cả ở trên, dòng Tổng tiền ở dưới riêng biệt. */
    .iahist-selectall-wrap{ flex-direction:column; align-items:flex-start; gap:6px; }
    .bell-panel{width:min(340px, calc(100vw - 32px)); right:-8px;}
    .modal-bg{padding:0; align-items:stretch;}
    /* Các dòng "nhãn / số tiền" trong biên lai (thu lãi, trả lãi, tất toán...) — màn hình hẹp: số tiền
       luôn xuống HÀNG RIÊNG bên dưới dòng chữ, căn sát lề phải — tránh dòng chữ dài chèn ép số tiền
       xuống hàng lộn xộn, xấu xí trên điện thoại. */
    .kv-row{ flex-direction:column; align-items:flex-start; gap:2px; }
    .kv-row > *:last-child{ align-self:flex-end; text-align:right; }
    /* Nút "➕ Thêm thành phần" (chat AI, siêu ghi chú, tạo bài tuyên truyền, thêm nhanh bằng AI) —
       màn hình hẹp: thu gọn thành hình vuông chỉ còn icon, có hiệu ứng nổi bồng bềnh y hệt nút chat
       AI/siêu ghi chú, logic bên trong giữ nguyên không đổi. */
    .ai-add-btn{ width:46px !important; padding:0 !important; justify-content:center; border-radius:50% !important; animation: fabBob 4.5s ease-in-out infinite; }
    .ai-add-btn .ai-add-label{ display:none; }
    /* Kho lưu trữ / Chế độ xem cột / Tuỳ chỉnh màu — dòng tiêu đề luôn nằm TRÊN các nút bên cạnh
       (kể cả nút ✕), chạy tràn hết bề ngang, xuống hàng tự nhiên nếu cần — CHỈ áp dụng màn hình hẹp. */
    .modal-head-stack-narrow{ flex-wrap:wrap; }
    .modal-head-stack-narrow h3{ width:100%; flex-basis:100%; order:1; }
    .modal-head-stack-narrow > div, .modal-head-stack-narrow > button{ order:2; margin-left:auto; }
    /* Khung sổ xuống của bộ lọc — LUÔN neo cố định gọn trong màn hình (không tính theo vị trí nút bấm
       kích hoạt nó nữa) — trước đây nếu nút bấm nằm gần mép phải màn hình hẹp, khung sổ xuống (rộng
       tối thiểu 220px) sẽ tràn ra ngoài màn hình, phải vuốt ngang mới thấy hết checkbox. */
    .sv-filter-panel{ position:fixed !important; left:10px !important; right:10px !important; width:auto !important; min-width:0 !important; max-width:none !important; z-index:390 !important; }
    .modal{max-width:100%; width:100%; min-height:100dvh; border-radius:0; display:flex; flex-direction:column;}
    /* Ngoại lệ: các popup chào mừng nhỏ (chỉ có vài dòng chữ) — KHÔNG áp dụng quy tắc chiếm toàn màn
       hình ở trên, để khung nền trắng chỉ bao vừa đủ đúng nội dung chữ bên trong, không che phủ toàn bộ
       màn hình phía sau app (lỗi thật đã xảy ra trước đây). */
    .modal-bg.welcome-popup-bg{ align-items:center !important; padding:20px !important; }
    .modal-bg.welcome-popup-bg .modal{ min-height:0 !important; width:auto !important; max-width:92vw !important; border-radius:16px !important; }
    .modal-body{max-height:none; flex:1;}
    /* Sổ vay vốn — màn hình bề ngang hẹp: TẮT HẲN việc cố định cột (Địa phương/Họ và tên/số thứ tự
       dòng-cột) ở TẤT CẢ các panel và TẤT CẢ các modal có danh sách — cho cuộn ngang thoải mái, không
       cố định cột nào cả. */
    .sv-sticky-1, .sv-sticky-2, .frz-col1, .frz-col2, .frz-col3{ position:static !important; box-shadow:none !important; }
    .modal-head, .modal-foot{padding:14px 16px;}
    .modal-foot{flex-wrap:wrap;}
    .modal-foot .btn{flex:1; min-width:120px;}
  }

  /* ---- Điện thoại (≤600px): chữ đủ lớn, nút đủ to, cách xa để bấm không nhầm ---- */
  @media (max-width:600px){
    .auth-card{padding:28px 20px;}
    .field input, .field select, .field textarea{font-size:16px; padding:12px 13px;}
    .toolbar{gap:10px 8px;}
    .toolbar input, .toolbar select{font-size:15px; padding:11px 12px; min-height:42px; flex:1 1 100%;}
    .btn{font-size:14.5px; padding:11px 16px; min-height:44px;}
    .btn-sm{padding:9px 12px; font-size:13px; min-height:38px;}
    .toolbar .btn{flex:1 1 100%;}
    table{font-size:14px;}
    th{font-size:12px; padding:11px 12px;}
    td{padding:12px; font-size:14px;}
    .table-wrap{border-radius:10px;}
    .panel-body{padding:14px;}
    .panel-head{padding:13px 14px;}
    .panel-head h3{font-size:14px;}
    .stat-card{padding:16px;}
    .stat-card .num{font-size:26px;}
    .kv-row{font-size:13.5px; padding:9px 0;}
    .divider-lbl{font-size:11px; margin:18px 0 10px;}
    .topbar h2{font-size:16px;}
    .modal-head h3{font-size:15px;}
    .nav-item{font-size:13px; padding:11px 14px; gap:8px;}
    .backup-actions .btn, .backup-actions{width:100%;}
    .backup-actions .btn{flex:1 1 100%;}
  }

  /* ---- backup panel ---- */
  .backup-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}

  /* ---- print area (khổ A4, ẩn trên màn hình) ---- */
  #print-area{display:none;}
  #print-area .print-header{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; font-size:13px; margin-bottom:6px;}
  #print-area .print-header-right{text-align:right;}
  #print-area .print-divider{margin-top:4px;}
  #print-area .print-title{text-align:center; font-size:16px; margin:18px 0 16px; letter-spacing:.01em;}
  #print-area .print-sec{font-size:13.5px; margin:16px 0 8px; text-decoration:underline;}
  #print-area table.print-table{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:4px;}
  #print-area table.print-table th, #print-area table.print-table td{border:1px solid #333; padding:5px 8px; text-align:left;}
  #print-area table.print-table td:last-child, #print-area table.print-table th:last-child{text-align:right;}
  #print-area .print-signdate{text-align:right; font-style:italic; margin-top:26px; font-size:13px;}
  #print-area .print-signblock{display:flex; justify-content:space-between; margin-top:6px; font-size:13px;}
  #print-area .print-sign-col{width:46%; text-align:center;}
  #print-area .print-sign-note{font-style:italic; font-size:12px; margin-top:2px;}
  #print-area .print-sign-space{height:70px;}

  @media print{
    body *{ visibility:hidden; }
    #print-area, #print-area *{ visibility:visible; }
    #print-area{ display:block; position:absolute; left:0; top:0; width:100%; padding:0 8mm; color:#000; font-family:var(--app-font-serif); }
    .no-print{ display:none !important; }
    @page{ size:A4 portrait; margin:15mm 12mm; }
    /* Khổ A4 NẰM NGANG riêng cho bảng Sổ vay vốn (nhiều cột) — kích hoạt bằng class .landscape */
    @page landscape-a4{ size:A4 landscape; margin:10mm; }
    #print-area.landscape{ page:landscape-a4; padding:0 4mm; }
    #print-area.landscape table.print-table{ width:100%; table-layout:fixed; word-break:break-word; }
  }

  /* ================= Trợ lý AI "Chàng Nông dân Thông minh" ================= */
  @keyframes fabBob{
    0%, 55%{ transform:translateY(0) rotate(0deg); }
    65%{ transform:translateY(-7px) rotate(-4deg); }
    75%{ transform:translateY(0) rotate(0deg); }
    85%{ transform:translateY(-3px) rotate(3deg); }
    100%{ transform:translateY(0) rotate(0deg); }
  }
  /* Hiệu ứng chớp nhẹ nhàng, chậm rãi nền xanh lá — báo hiệu 2 mốc Quý liền kề vừa được tự động
     đồng bộ theo nhau khi người dùng sửa 1 trong 2 (kéo dài 2,5 giây, lặp chậm không gây khó chịu). */
  @keyframes qimFlashGreen{
    0%, 100%{ background:transparent; }
    50%{ background:rgba(129,199,132,.55); }
  }
  .qim-flash{ animation: qimFlashGreen 0.85s ease-in-out 3; border-radius:8px; }
  @keyframes lcPulseScale{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(2.5); } }
  .lc-pulse{ animation: lcPulseScale 0.3s ease-in-out 3; position:relative; z-index:5; }
  /* Nút "GIA HẠN" / "Xem" — nền đổi màu tuần hoàn trắng ↔ cam nhạt, chậm rãi mượt mà; độ trễ bắt
     đầu (animation-delay, gán ngẫu nhiên qua inline style mỗi nút) làm các nút KHÔNG đồng bộ nhau. */
  @keyframes extPulseOrange{
    0%, 100%{ background:#fff; }
    50%{ background:#ff9800; }
  }
  .ext-action-btn{
    border:1px solid #000; border-radius:8px; padding:6px 14px; font-weight:800; color:#5a3d00;
    cursor:pointer; animation: extPulseOrange 12.6s ease-in-out infinite; transition:transform .15s ease;
    display:inline-block;
  }
  .ext-action-btn:hover{ transform:scale(1.35); position:relative; z-index:5; }
  .ext-action-btn:disabled{ animation:none; background:#eee; color:#999; cursor:not-allowed; transform:none; opacity:.6; }
  /* Mặc định (màn hình rộng): hiện đủ tên nút lịch sử, ẩn nhãn rút gọn "Xem LS" — màn hình hẹp sẽ đảo
     ngược lại trong @media (max-width:820px) phía trên. */
  .btn-narrow-label{ display:none; }
  .btn-full-label{ display:inline; }
  /* Mặc định (màn hình rộng): hiện cặp nút gốc tách 2 cột như cũ, ẩn hẳn nút gộp "Chọn hành động". */
  .wide-action-pair{ display:inline-block; }
  .narrow-action-pair{ display:none; }
  /* Biến thể xanh lá cho nút "Xem" / "Đóng tiền lãi" ở modal "Tính tiền lãi và phê duyệt đóng lãi"
     — y hệt nút GIA HẠN (viền, bo góc, phóng to khi hover, độ trễ ngẫu nhiên) chỉ khác màu tuần
     hoàn: trắng ↔ xanh lá đậm thay vì trắng ↔ cam đậm. */
  @keyframes extPulseGreen{
    0%, 100%{ background:#fff; color:#1b5e20; }
    50%{ background:#1b7a3d; color:#fff; }
  }
  .ext-action-btn.ext-green{ animation-name: extPulseGreen; color:#1b5e20; }
  @keyframes resetFilterPulse{ 0%,100%{ background:#fff; } 50%{ background:#90caf9; } }
  .reset-filter-active{ animation: resetFilterPulse 4.2s ease-in-out infinite; }
  /* Dòng cảnh báo trùng lặp "Trích về Ấp" — đứng im 2 giây, rồi chớp 2 cái thật nhanh (mất đi hiện lại),
     rồi lại đứng im 2 giây, chớp 2 cái... lặp lại vô tận. Mỗi chu kỳ dài 2,4 giây. */
  @keyframes dupWarningBlink{
    0%, 83.3%{ opacity:1; }
    85%{ opacity:0; }
    87%{ opacity:1; }
    89%{ opacity:0; }
    91%{ opacity:1; }
    100%{ opacity:1; }
  }
  .em-dup-warning{ animation: dupWarningBlink 2.4s linear infinite; }
  @keyframes nameDance{ 0%,55%,100%{ transform:scale(1); } 8%{ transform:scale(1.1); } 16%{ transform:scale(1); } }
  @keyframes colNamePulse3x{
    0%, 14.29%, 28.57%, 42.86%, 57.14%, 71.43%, 85.71%, 100%{ transform:scale(1); }
    7.14%, 21.43%, 35.71%, 50%, 64.29%, 78.57%, 92.86%{ transform:scale(1.3); }
  }
  .col-name-pulse{ display:inline-block; animation: colNamePulse3x 2.1s ease-in-out; transform-origin:left center; }
  @keyframes heirVisPulse4x{
    0%, 25%, 50%, 75%, 100%{ transform:scale(1); }
    12.5%, 37.5%, 62.5%, 87.5%{ transform:scale(1.2); }
  }
  .heirvis-pulse{ display:inline-block; animation: heirVisPulse4x 1.2s ease-in-out; transform-origin:left center; }
  @keyframes projectPickerBorderFlash{
    0%, 100%{ border-color: var(--line); }
    50%{ border-color: #b71c1c; box-shadow:0 0 0 2px rgba(183,28,28,.35); }
  }
  .m-project-picker-flash{ animation: projectPickerBorderFlash 0.5s ease-in-out 6; }
  /* Viền chuyển màu đỏ dùng CHUNG cho MỌI trường lựa chọn (nguồn vay/địa bàn/người quản lý/địa chỉ
     trước sáp nhập/phân loại biên lai...) ngay sau khi đóng modal quản lý con và cuộn về đúng vị trí —
     KHÔNG khai báo màu viền ở 0%/100% nên tự động dùng ĐÚNG màu viền GỐC hiện có của từng ô (hoạt động
     đúng cho mọi kiểu viền khác nhau mà không cần biết trước). Lặp đúng 7 lần rồi đứng yên hẳn. */
  @keyframes fieldBorderFlash7x{ 50%{ border-color:#b71c1c; box-shadow:0 0 0 2px rgba(183,28,28,.35); } }
  .field-border-flash{ animation: fieldBorderFlash7x 0.4s ease-in-out 7; }
  /* Nhấp nháy màu nền cho Ô NHẬP LIỆU vừa được thêm mới (phương án vay mới, người vay mới) — KHÔNG khai
     báo màu ở 0%/100% nên trình duyệt tự dùng ĐÚNG màu nền GỐC hiện có của từng ô (trắng nếu đang cho
     nhập, xám nếu đang bị khoá chỉ xem) làm điểm bắt đầu/kết thúc — chỉ cần định nghĩa đúng màu VÀNG ở
     giữa (50%) là đủ, hoạt động đúng cho MỌI trường hợp màu nền khác nhau mà không cần biết trước. Lặp
     đúng 5 lần rồi đứng yên hẳn (không dùng infinite). */
  @keyframes newFieldBgFlash{ 50%{ background-color:#ef5350; } }
  .new-field-flash{ animation: newFieldBgFlash 0.35s ease-in-out 10; }
  /* Nhảy múa (phóng to 1,1 lần rồi về lại) đúng 5 lần rồi đứng yên hẳn — dùng cho tiêu đề phương án vay
     khi có người vay bên trong phương án đó vừa bị xoá đi. */
  @keyframes projectTitleDanceOnDelete{ 50%{ transform:scale(1.1); } }
  .project-title-dance{ display:inline-block; animation: projectTitleDanceOnDelete 0.3s ease-in-out 10; }
  @keyframes dragHintBlinkTwice{
    0%{ opacity:1; }
    9.375%{ opacity:0; }
    18.75%{ opacity:1; }
    28.125%{ opacity:0; }
    37.5%{ opacity:1; }
    100%{ opacity:1; }
  }
  .drag-hint-cycle{ animation: dragHintBlinkTwice 1.6s linear infinite; }
  @keyframes zoomBtnFlashRed{
    0%, 100%{ background:transparent; }
    50%{ background:#ef5350; }
  }
  .zoom-btn-flash{ animation: zoomBtnFlashRed 0.3s steps(1) 17; }
  @keyframes textPulse30x{
    0.0%, 3.333%, 6.667%, 10.0%, 13.333%, 16.667%, 20.0%, 23.333%, 26.667%, 30.0%, 33.333%, 36.667%, 40.0%, 43.333%, 46.667%, 50.0%, 53.333%, 56.667%, 60.0%, 63.333%, 66.667%, 70.0%, 73.333%, 76.667%, 80.0%, 83.333%, 86.667%, 90.0%, 93.333%, 96.667%, 100.0%{ transform:scale(1); }
    1.667%, 5.0%, 8.333%, 11.667%, 15.0%, 18.333%, 21.667%, 25.0%, 28.333%, 31.667%, 35.0%, 38.333%, 41.667%, 45.0%, 48.333%, 51.667%, 55.0%, 58.333%, 61.667%, 65.0%, 68.333%, 71.667%, 75.0%, 78.333%, 81.667%, 85.0%, 88.333%, 91.667%, 95.0%, 98.333%{ transform:scale(1.2); }
  }
  .text-pulse-5x{ display:inline-block; animation: textPulse30x 10.8s ease-in-out; transform-origin:center center; }
  @keyframes flashBlueBorder5x{
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%{ border-color:#0d47a1; opacity:1; }
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95%{ border-color:transparent; opacity:.4; }
  }
  .flash-blue-border{ animation: flashBlueBorder5x 2.5s linear; }
  .dancing-name{ display:inline-block; animation: nameDance 1.5s ease-in-out infinite; cursor:pointer; transition:transform .15s ease, color .15s ease; transform-origin:left center; }
  .dancing-name:hover{ animation-play-state:paused; transform:scale(1.3) !important; }
  .dancing-name.name-selected{ animation:none !important; transform:scale(1.3) !important; color:#0d47a1; font-weight:800; }
  .dancing-header{ display:inline-block; animation: nameDance 1.5s ease-in-out infinite; cursor:pointer; transition:transform .15s ease, color .15s ease; transform-origin:left center; }
  .dancing-header:hover{ animation-play-state:paused; transform:scale(1.3) !important; text-decoration:underline; }
  .dancing-project-name{ display:inline-block; animation: nameDance 1.5s ease-in-out infinite; cursor:pointer; transition:transform .15s ease; transform-origin:left center; }
  .dancing-project-name:hover{ animation-play-state:paused; transform:scale(1.3) !important; }
  /* Nút "Bấm vào đây để thanh toán..." — GIỮ hiệu ứng nhảy múa, nhưng TẮT riêng hiệu ứng phóng to
     khi rê chuột vào (khác với các nơi khác dùng chung class .dancing-project-name). */
  .upp-pay-text:hover{ transform:none !important; animation-play-state:running !important; }
  @keyframes sideSlideIn{ 0%{ transform:translateX(100%); opacity:0; } 100%{ transform:translateX(0); opacity:1; } }
  @keyframes extPulseBlue{ 0%,100%{ background:#fff; } 50%{ background:#0d3b78; color:#fff; } }
  @keyframes extPulseRedLight{ 0%,100%{ background:#fff; color:#b71c1c; } 50%{ background:#ffcdd2; color:#b71c1c; } }
  @keyframes extPulseIndigo{ 0%,100%{ background:#fff; color:#311b92; } 50%{ background:#311b92; color:#fff; } }
  .ext-action-btn.ext-indigo{ animation-name: extPulseIndigo; color:#311b92; }
  @keyframes extPulseBlue{ 0%,100%{ background:#fff; color:#1565c0; } 50%{ background:#1565c0; color:#fff; } }
  .ext-action-btn.ext-blue2{ animation-name: extPulseBlue; color:#1565c0; }
  .ext-action-btn.ext-red-light{ animation-name: extPulseRedLight; color:#b71c1c; }
  .ext-action-btn.ext-blue{ animation-name: extPulseBlue; color:#0d3b78; }
  @keyframes extPulsePurple{ 0%,100%{ background:#fff; color:#4a148c; } 50%{ background:#4a148c; color:#fff; } }
  .ext-action-btn.ext-purple{ animation-name: extPulsePurple; color:#4a148c; }
  /* Nút "Hoặc đóng lãi bằng cách nhập số tiền cụ thể" — đổi màu trắng ↔ xanh lá tuần hoàn, tốc độ
     y hệt các nút Xem/Đóng tiền lãi nhưng KHÔNG có độ trễ ngẫu nhiên. */
  .btn-pulse-green{ animation: extPulseGreen 12.6s ease-in-out infinite; }
  /* Nút "hộp chứa Quý" + nút chữ "i" (thông tin) trong modal Đóng lãi — góc vuông 90 độ, dính sát
     nhau, phóng to khi hover, nhấp nháy nhanh lúc mới mở bảng rồi tự dừng sau ~3 giây. */
  @keyframes qboxPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } }
  .qbox-wrap{ display:inline-flex; margin:3px; }
  .qbox-btn{ border:1px solid #000; border-radius:0; padding:6px 12px; font-weight:700; cursor:pointer; background:#fff; transition:transform .12s ease; }
  .qbox-btn.qbox-pulsing{ animation: qboxPulse 0.5s ease-in-out infinite; }
  .qbox-btn:hover{ transform:scale(1.3); position:relative; z-index:6; }
  .qbox-btn.qbox-selected{ background:#1b7a3d; color:#fff; }
  .qbox-info-btn{ border:1px solid #000; border-left:none; border-radius:0; width:26px; font-weight:800; font-style:italic; cursor:pointer; background:#fff; transition:transform .12s ease; }
  .qbox-info-btn:hover{ transform:scale(1.3); position:relative; z-index:6; }
  .qbox-selectall-btn{ border:1px solid #000; border-radius:6px; padding:6px 14px; font-weight:700; cursor:pointer; background:var(--paper-2); transition:transform .12s ease; margin:3px; }
  .qbox-selectall-btn:hover{ transform:scale(1.3); position:relative; z-index:6; }
  /* Nút reset (icon vòng tròn) đứng sát mép phải 1 ô nhập tiền — hover hiện chú thích nhỏ. */
  .rcpt-reset-wrap{ position:relative; display:flex; align-items:center; gap:6px; }
  .rcpt-reset-wrap input{ flex:1; }
  .rcpt-reset-btn{ border:1px solid var(--line); border-radius:50%; width:26px; height:26px; min-width:26px; background:var(--white); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; }
  .rcpt-reset-btn:hover{ background:var(--paper-2); }
  .rcpt-reset-tip{ position:absolute; right:0; top:-26px; background:#222; color:#fff; font-size:11px; padding:3px 8px; border-radius:6px; white-space:nowrap; display:none; z-index:20; }
  .rcpt-reset-btn:hover + .rcpt-reset-tip, .rcpt-reset-tip:hover{ display:block; }
  /* Tên Quý trong "Thông tin đóng lãi" — nhảy múa tuần hoàn (phóng to 1.1x rồi đứng im 4s), hover
     1.3x, bấm chọn phóng to 1.4x vĩnh viễn (không tuần hoàn nữa) cho tới khi bấm lại. */
  @keyframes iahistQuarterPulse{ 0%,20%,100%{ transform:scale(1); } 8%{ transform:scale(1.1); } }
  .iahist-qname{ display:inline-block; cursor:pointer; animation: iahistQuarterPulse 4.6s ease-in-out infinite; transition:transform .15s ease; font-weight:700; }
  .iahist-qname:hover{ transform:scale(1.4) !important; animation-play-state:paused; }
  .iahist-qname.iahist-qname-selected{ transform:scale(1.4) !important; animation:none !important; font-weight:800; }
  .iahist-qname.iahist-q-paid{ color:#1b5e20; }
  .iahist-qname.iahist-q-past{ color:#3f51b5; }
  .iahist-qname.iahist-q-future{ color:#4a148c; }
  /* Dòng số tiền quan trọng (Tổng tất cả số tiền thực nhận, Tổng tiền đã đóng lãi...) — chữ đậm
     xanh lá thật đậm, tự phóng to nhanh 1.1x rồi đứng im 1 giây, tuần hoàn mãi mãi. */
  @keyframes bigMoneyPulse{ 0%,28%,100%{ transform:scale(1); } 14%{ transform:scale(1.1); } }
  .overflow-money-pulse{ display:inline-block; animation: bigMoneyPulse 1.4s ease-in-out infinite; color:#b71c1c !important; font-weight:800 !important; }
  /* Ba số tổng hợp đầu Sổ Thu Chi Lãi Quỹ dùng chung hiệu ứng nhảy múa số tiền đã có sẵn:
     phóng to 1.1x, thu về nhanh, rồi đứng im trước khi lặp lại. */
  .accounting-money-pulse{ display:inline-block; animation:bigMoneyPulse 1.4s ease-in-out infinite; transform-origin:center center; }
  /* Ba khung tổng hợp có cùng kiểu phóng to khi rê chuột như các nút tương tác khác trong app.
     Giữ z-index để khung đang xem nổi lên trên hai khung bên cạnh mà không đổi bố cục. */
  .accounting-stat-card{ cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
  .accounting-stat-card:hover, .accounting-stat-card:focus-visible{
    transform:scale(1.06); position:relative; z-index:5; box-shadow:0 12px 24px rgba(37,50,31,.22);
    outline:2px solid rgba(255,255,255,.8); outline-offset:2px;
  }
  .accounting-stat-card:focus-visible{ outline-color:#fff; }
  @media (max-width:820px){
    .accounting-stat-card:hover, .accounting-stat-card:focus-visible{ transform:scale(1.035); }
  }
  .accounting-info-modal .modal-head h3{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
  .accounting-info-modal .modal-body{ line-height:1.7; }
  .acct-info-amount{
    display:block; margin:0 auto 12px; text-align:center; font-family:var(--app-font-mono);
    font-size:clamp(28px, 5vw, 46px); font-weight:800; line-height:1.15;
  }
  .acct-info-lead{
    margin:0 0 12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
    background:var(--paper-2); font-size:14px;
  }
  .acct-info-period{
    margin:0 0 16px; padding:9px 12px; border-left:4px solid var(--rice-dark);
    background:#faf8ef; color:var(--rice-dark); font-size:12.5px;
  }
  .acct-info-copy p{ margin:0 0 13px; }
  .acct-info-box{
    margin:14px 0; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
    background:rgba(232,185,59,.12);
  }
  .acct-info-table{ margin:8px 0 16px; max-height:280px; }
  .acct-info-table td:last-child, .acct-info-table th:last-child{ text-align:right; }
  .acct-info-equation{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px;
    margin:14px 0 16px; padding:14px; border:1px solid var(--line); border-radius:10px;
     background:var(--paper-2); font-family:var(--app-font-mono); font-weight:700;
  }
  .acct-info-equation strong{ color:var(--green); font-size:1.15em; }
  @media (max-width:560px){
    .accounting-info-modal .modal-head{ padding:14px 16px; }
    .accounting-info-modal .modal-body{ padding:16px; }
    .acct-info-lead{ font-size:13px; }
    .acct-info-equation{ gap:5px 7px; font-size:12px; }
  }
  @keyframes archiveTabPulse{ 0%,17%,100%{ transform:scale(1); } 8%{ transform:scale(1.1); } }
  @keyframes sortBtnPopIn{ 0%,20%,40%,60%,100%{ transform:scale(1); } 10%,30%,50%{ transform:scale(3); } }
  .sort-btn-popin{ display:inline-block; animation: sortBtnPopIn 1.2s ease-in-out 1; }
  .archive-tab-text{ display:inline-block; animation: archiveTabPulse 2.4s ease-in-out infinite; }
  .archive-tab-btn{ border:1px solid var(--line); border-radius:0; padding:10px 18px; background:#fff; cursor:pointer; font-weight:700; font-size:13px; }
  .archive-tab-btn.active{ background:#0d3b78; color:#fff; border-color:#0d3b78; }
  .archive-tab-btn + .archive-tab-btn{ border-left:none; }
  .big-money-row{ color:#0b4a17 !important; font-weight:800 !important; }
  /* Nhấp nháy 2 lần (phóng to - thu nhỏ - đứng im, lặp đúng 2 lượt) rồi đứng im hẳn 3 giây, sau đó lặp
     lại từ đầu mãi mãi — dùng riêng cho dòng "bảo chứng" và số tiền X đ ở biên lai đã thanh toán. */
  @keyframes bigMoneyPulseTwice{ 0%,16%,32%,100%{ transform:scale(1); } 8%,24%{ transform:scale(1.1); } }
  /* Popup chào mừng (hiện Ở ĐÁY màn hình) — 3 giai đoạn trên tổng 4.9 giây: nảy vào bắt mắt người dùng
     ngay lúc xuất hiện (0%-10.2% = 0.5s) -> đứng im tại chỗ 3.5 giây (10.2%-81.6%) -> trôi xuống dưới +
     mờ dần biến mất hẳn trong 0.9s cuối (81.6%-100%). */
  @keyframes wardWelcomeBottomSequence{
    0%{ transform:translateY(60px) scale(.7); opacity:0; }
    6.8%{ transform:translateY(-10px) scale(1.08); opacity:1; }
    9.1%{ transform:translateY(4px) scale(.97); }
    11.4%,79.5%{ transform:translateY(0) scale(1); opacity:1; }
    100%{ transform:translateY(220px) scale(1); opacity:0; }
  }
  .modal-bg.welcome-popup-bottom{ align-items:flex-end !important; padding-bottom:24px !important; }
  .big-money-row b{ display:inline-block; animation: bigMoneyPulseTwice 4.4s ease-in-out infinite; color:#0b4a17 !important; font-weight:800 !important; }
  /* Nút "Trả lại tiền đã đóng" — đổi màu chậm trắng <-> đỏ nhạt tuần hoàn. */
  @keyframes refundBtnPulse{ 0%,100%{ background:#fff; } 50%{ background:#ffcdd2; } }
  /* Màu nền tiêu đề biên lai — xanh dương đậm cho biên lai THU, đỏ nhạt cho biên lai TRẢ. */
  .receipt-head-payment{ background:#0d3b78 !important; }
  .receipt-head-payment h3{ color:#fff !important; }
  .receipt-head-refund{ background:#ffcdd2 !important; }
  .receipt-head-refund h3{ color:#7a1010 !important; }
  .refund-btn{ border:1px solid #c62828; border-radius:8px; padding:6px 14px; font-weight:700; color:#b71c1c; cursor:pointer; animation: refundBtnPulse 12.6s ease-in-out infinite; }
  /* Tooltip tuỳ chỉnh — hiện NGAY BÊN CẠNH icon (bên trái, vì các nút này luôn nằm sát mép phải màn
     hình) khi rê chuột vào — dùng chung cho cả 3 nút nổi (Chat AI / Ghi chú nhanh / Chat với Mọi người)
     qua thuộc tính data-tooltip. Chỉ áp dụng khi có thiết bị chuột thật (hover) — không hiện trên cảm
     ứng (tránh vướng víu khi chạm trên điện thoại/máy tính bảng). */
  [data-tooltip]{ position:relative !important; }
  [data-tooltip]:hover::after{
    content: attr(data-tooltip);
    position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%);
    background:#212121; color:#fff; padding:6px 12px; border-radius:8px; font-size:13px;
    white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.35); pointer-events:none; z-index:9999;
  }
  [data-tooltip]:hover::before{
    content:''; position:absolute; right:calc(100% + 4px); top:50%; transform:translateY(-50%);
    border:6px solid transparent; border-left-color:#212121; pointer-events:none; z-index:9999;
  }
  .fab-chat{
    position:fixed !important; right:0 !important; left:auto !important; bottom:22px; top:auto !important; width:60px; height:60px; border-radius:50%;
    background:linear-gradient(145deg, var(--gold), var(--rice-dark)); color:#fff; border:none;
    box-shadow:0 6px 18px rgba(47,74,60,.35); cursor:pointer; z-index:400; font-size:26px;
    display:flex; align-items:center; justify-content:center;
    animation: fabBob 4.5s ease-in-out infinite;
    opacity:.55; transition: opacity .2s ease;
  }
  .fab-chat:hover{ filter:brightness(1.08); opacity:1; }
  @media (max-width:640px){ .fab-chat{ right:0 !important; bottom:14px; width:54px; height:54px; font-size:22px; } }

  /* "Ghi chú nhanh" — icon bồng bềnh nằm ngay trên đầu icon Chat AI, y hệt kiểu dáng/hiệu ứng */
  .fab-notes-wrap{ position:fixed !important; right:0 !important; left:auto !important; bottom:96px; top:auto !important; z-index:400; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .fab-notes-label{ background:var(--rice-dark); color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:10px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18); }
  .fab-notes-btn{ width:60px; height:60px; border-radius:50%; background:linear-gradient(145deg, var(--gold), var(--rice-dark)); color:#fff; border:none;
    box-shadow:0 6px 18px rgba(47,74,60,.35); cursor:pointer; font-size:26px; display:flex; align-items:center; justify-content:center;
    animation: fabBob 4.5s ease-in-out infinite; opacity:.55; transition: opacity .2s ease; }
  .fab-notes-btn:hover{ filter:brightness(1.08); opacity:1; }
  .fab-notes-btn.fab-intro{ animation: fabIntro 1s ease-in-out 5 !important; }
  @media (max-width:640px){ .fab-notes-wrap{ right:0 !important; bottom:82px; } .fab-notes-btn{ width:54px; height:54px; font-size:22px; } }

  /* "Chat với Mọi người" — nút thứ 3, ngay dưới "Ghi chú nhanh", cùng kích thước/kiểu dáng/hiệu ứng,
     cùng khoảng cách 74px như giữa 2 nút phía trên. */
  .fab-people-btn{
    position:fixed !important; right:0 !important; left:auto !important; bottom:170px; top:auto !important; width:60px; height:60px; border-radius:50%;
    background:linear-gradient(145deg, #64b5f6, #1565c0); color:#fff; border:none;
    box-shadow:0 6px 18px rgba(47,74,60,.35); cursor:pointer; z-index:400; font-size:26px;
    display:flex; align-items:center; justify-content:center;
    animation: fabBob 4.5s ease-in-out infinite;
    opacity:.55; transition: opacity .2s ease;
  }
  .fab-people-btn:hover{ filter:brightness(1.08); opacity:1; }
  .fab-people-btn.fab-intro{ animation: fabIntro 1s ease-in-out 5 !important; }
  @media (max-width:640px){ .fab-people-btn{ right:0 !important; bottom:150px; width:54px; height:54px; font-size:22px; } }

  /* Class RIÊNG chỉ cung cấp transition mượt cho vị trí — CHỈ được JS chủ động gắn vào đúng lúc popup
     chào mừng hiện/ẩn (xem hàm renderWardWelcomePopup), rồi tự gỡ ra ngay sau khi chuyển động xong. Mặc
     định KHÔNG có transition này trên 3 nút — để giữ nguyên độ mượt tức thì khi kéo thả (lỗi thật đã
     xảy ra trước đây: gắn transition thẳng vào CSS gốc khiến MỌI thay đổi vị trí, kể cả lúc đang kéo
     thả bằng tay, cũng bị "mượt hoá" theo transition 0.4s, gây cảm giác trễ khó chịu khi kéo). */
  /* Class tắt hẳn animation nhảy (fabBob) — dùng khi popup chào mừng đang chờ hiện/đang hiện, để 3 nút
     đứng yên bình thường, không nhảy động gì cả — chỉ khi popup biến mất hẳn thì mới bắt đầu nhảy để
     thu hút sự chú ý (xem renderWardWelcomePopup). */
  .fab-pre-popup{ animation:none !important; }

  .fab-position-transition{ transition: top .4s ease, bottom .4s ease !important; }

  /* Khi popup chào mừng đang hiện (ở đáy màn hình) — tạm thời đẩy 3 nút nổi lên giữa/trên màn hình một
     chút để tránh bị popup che mất. Ngay khi popup biến mất (class này bị gỡ), 3 nút LẬP TỨC trở về
     đúng vị trí mặc định ban đầu (dưới cùng, mép phải) nhờ transition sẵn có trên "bottom"/"top". */
  body.welcome-popup-active .fab-chat{ bottom:auto !important; top:30vh !important; }
  body.welcome-popup-active .fab-notes-wrap{ bottom:auto !important; top:calc(30vh - 74px) !important; }
  body.welcome-popup-active .fab-people-btn{ bottom:auto !important; top:calc(30vh - 148px) !important; }

  /* 2 nút cuộn lên đầu/xuống cuối modal — tự động chèn cho MỌI modal trong toàn app (xem đoạn script
     phía dưới), luôn thẳng hàng dọc, sát mép phải màn hình, đè lên modal đang hiện ra. */
  .modal-scroll-btn{
    position:fixed; right:6px; width:38px; height:38px; border-radius:50%; border:none;
    background:linear-gradient(145deg, #616161, #212121); color:#fff; font-size:16px; font-weight:800;
    cursor:pointer; z-index:500; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.35); opacity:.55; transition: opacity .2s ease;
  }
  .modal-scroll-btn:hover{ opacity:1; }
  /* Khoá chọn văn bản + menu ngữ cảnh (sao chép/dán) — trình duyệt di động hiểu icon mũi tên bên trong
     nút như 1 ký tự văn bản thông thường, bấm giữ lâu sẽ tự hiện menu "Sao chép" nếu không khoá lại. */
  .modal-scroll-btn, .hscroll-btn{
    -webkit-user-select:none; -moz-user-select:none; user-select:none;
    -webkit-touch-callout:none; /* Safari/iOS: tắt menu bật lên khi chạm giữ (copy/lookup...) */
  }
  @media (max-width:640px){ .modal-scroll-btn{ width:32px; height:32px; font-size:14px; right:4px; } }

  /* 2 nút cuộn qua trái/phải — tự động chèn cho MỌI khung có thanh cuộn ngang trong toàn app (menu
     module, bảng trong panel/modal...), nằm giữa khu vực thanh cuộn ngang, đè lên thanh cuộn để dễ bấm.
     Cùng kích thước/độ mờ/khoảng cách/logic như 2 nút cuộn dọc ở trên. */
  .hscroll-btn{
    position:fixed; bottom:6px; width:38px; height:38px; border-radius:50%; border:none;
    background:linear-gradient(145deg, #616161, #212121); color:#fff; font-size:16px; font-weight:800;
    cursor:pointer; z-index:60; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.35); opacity:.55; transition: opacity .2s ease;
  }
  .hscroll-btn:hover{ opacity:1; }
  @media (max-width:640px){ .hscroll-btn{ width:32px; height:32px; font-size:14px; } }

  /* Khung nhắc việc trong sidebar Ghi chú nhanh — thay cho cây thư mục đã gỡ */
  .qn-side-note{margin:10px; padding:11px 12px; border-radius:10px; background:rgba(255,255,255,.08); display:flex; flex-direction:column; gap:5px;}
  .qn-side-note b{color:#fff; font-size:13px;}
  .qn-side-note span{color:rgba(255,255,255,.72); font-size:11.5px; line-height:1.55;}
  /* Yêu cầu 6: nhún nhảy/rung rinh sống động trong 5 giây đầu tiên khi vào giao diện chính, để
     thu hút sự chú ý — sau đó tự động chuyển về hiệu ứng "lềnh bềnh" tuần hoàn như bình thường. */
  @keyframes fabIntro{
    0%,100%{ transform:translateY(0) rotate(0deg) scale(1); }
    10%{ transform:translateY(-14px) rotate(-12deg) scale(1.08); }
    20%{ transform:translateY(0) rotate(10deg) scale(0.96); }
    30%{ transform:translateY(-11px) rotate(-9deg) scale(1.06); }
    40%{ transform:translateY(0) rotate(7deg) scale(1); }
    50%{ transform:translateY(-13px) rotate(-7deg) scale(1.07); }
    60%{ transform:translateY(0) rotate(5deg) scale(1); }
    70%{ transform:translateY(-9px) rotate(-5deg); }
    80%{ transform:translateY(0) rotate(3deg); }
    90%{ transform:translateY(-5px) rotate(-2deg); }
  }
  .fab-chat.fab-intro{ animation: fabIntro 1s ease-in-out 5 !important; }

  /* Yêu cầu 5: tooltip nhỏ hiện bên cạnh nút gửi khi rê chuột qua */
  .ai-send-wrap{ position:relative; display:flex; align-items:center; flex-shrink:0; }
  .ai-send-tooltip{ position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%); background:var(--rice-dark); color:#fff; font-size:11.5px; padding:6px 11px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; box-shadow:var(--shadow); }
  .ai-send-wrap:hover .ai-send-tooltip{ opacity:1; }

  .ai-overlay{ position:fixed; inset:0; z-index:500; background:var(--paper); display:flex; }
  /* Khung "Lịch sử đoạn chat" bên trái — đóng/mở được, THEO ĐÚNG mẫu sidebar chính của toàn app (cùng
     kiểu chuyển động transform + margin-left, cùng thời lượng .44s) — CHỈ áp dụng trong .ai-overlay
     (module Chat AI toàn màn hình), KHÔNG áp dụng cho .pg-embed (module "Tạo bài Tuyên truyền" cũng
     dùng chung class .ai-sidebar/.ai-main nhưng là khung nhúng trong trang, không phải overlay). */
  .ai-overlay .ai-sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:501;
    transform:translateX(0); transition:transform .44s ease-out;
  }
  .ai-overlay .ai-sidebar.collapsed{ transform:translateX(-100%); }
  .ai-overlay .ai-main{ margin-left:270px; transition:margin-left .44s ease-out; }
  .ai-overlay .ai-main.ai-sidebar-collapsed{ margin-left:0; }
  .ai-sidebar-toggle-btn{
    position:fixed; top:50%; left:270px; z-index:502; width:42px; height:56px;
    transform:translate(0,-50%); transition:left .44s ease-out, opacity .2s ease;
    border:none; border-radius:0 28px 28px 0; background:var(--rice-dark); color:var(--gold);
    font-size:17px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    opacity:1; /* đang mở khung bên trái -> rõ 100% */
  }
  .ai-sidebar-toggle-btn.collapsed{ left:0; opacity:.55; /* đang đóng khung bên trái -> rõ 55% */ }
  .ai-sidebar-toggle-btn:hover{ opacity:1; filter:brightness(1.15); }
  /* Nút X đỏ ghim góc trên-phải màn hình — luôn cố định tại đó (position:fixed) dù có cuộn màn hình đi
     đâu, bấm vào để đóng hẳn module Chat AI (y hệt nút "✕ THOÁT" trong khung lịch sử chat). Hình tròn
     nhỏ nhắn, độ rõ 55% (rõ hẳn 100% khi rê chuột/chạm vào để dễ nhận biết + dễ bấm). */
  .ai-close-fab{
    position:fixed; top:14px; right:14px; z-index:503; width:30px; height:30px; border-radius:50%;
    border:none; background:#d32f2f; color:#fff; font-size:15px; font-weight:800; cursor:pointer;
    display:flex; align-items:center; justify-content:center; opacity:.55; transition:opacity .2s ease;
    box-shadow:0 3px 10px rgba(0,0,0,.3);
  }
  .ai-close-fab:hover{ opacity:1; filter:brightness(1.1); }
  /* Màn hình hẹp: khung lịch sử chat chiếm TOÀN BỘ chiều rộng khi mở (như 1 lớp phủ riêng), và có thêm
     lớp phủ mờ phía sau (ai-sidebar-scrim) để bấm vào bất kỳ đâu bên phải cũng đóng lại được. */
  @media (max-width:820px){
    .ai-overlay .ai-sidebar{ width:82vw; max-width:320px; }
    .ai-sidebar-toggle-btn{ left:82vw; max-width:calc(320px + 42px); }
    @supports (width: min(82vw, 320px)){ .ai-sidebar-toggle-btn{ left:min(82vw, 320px); } }
    .ai-sidebar-toggle-btn.collapsed{ left:0; }
    .ai-overlay .ai-main{ margin-left:0; }
    .ai-sidebar-scrim{ display:none; position:fixed; inset:0; z-index:499; background:rgba(0,0,0,.35); }
    .ai-sidebar-scrim.show{ display:block; }
  }
  @media (min-width:821px){ .ai-sidebar-scrim{ display:none !important; } }
  /* Khung nhúng cho module "Tạo bài Tuyên truyền" — tái sử dụng toàn bộ style Chat AI nhưng nằm
     NGAY TRONG nội dung tab (không phải overlay toàn màn hình cố định). */
  .pg-embed{ display:flex; height:76vh; min-height:540px; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
  .pg-roles{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 0 4px; }
  /* Nút "Gợi ý tạo bài" — khung bọc để định vị menu thả xuống chính xác so với nút. */
  .pg-suggest-wrap{ position:relative; display:inline-block; }
  /* Menu thả xuống chứa toàn bộ lựa chọn — hiện NGAY PHÍA TRÊN nút, đè lên MỌI THỨ trong module (z-index
     cao hơn hẳn nội dung chat/khung nhập liệu bên dưới). */
  .pg-suggest-menu{
    position:absolute; bottom:100%; left:0; z-index:600;
    display:flex; width:300px; max-width:88vw; height:280px; max-height:70vh;
    background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.25);
    overflow:hidden;
  }
  /* Khung danh sách lựa chọn — cuộn được (lăn chuột/vuốt/kéo) nhưng ẨN thanh cuộn mặc định đi (mục đích
     là để cuộn thông qua 2 nút mũi tên riêng hoặc thao tác trực tiếp, không cần thanh cuộn hiển thị). */
  .pg-suggest-list{
    flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .pg-suggest-list::-webkit-scrollbar{ display:none; }
  .pg-suggest-list .pg-role-btn{ width:100%; text-align:left; flex-shrink:0; }
  /* 2 nút cuộn lên/xuống — nằm sát mép phải khung menu, cùng kiểu dáng với 2 nút cuộn dọc của modal. */
  .pg-suggest-scrollbtns{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:8px 6px; border-left:1px solid var(--line); background:var(--paper-2); }
  .pg-suggest-scroll-btn{
    width:30px; height:30px; border-radius:50%; border:none;
    background:linear-gradient(145deg, #616161, #212121); color:#fff; font-size:13px; font-weight:800;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 8px rgba(0,0,0,.3); opacity:.75; transition:opacity .15s ease;
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  }
  .pg-suggest-scroll-btn:hover{ opacity:1; }
  .pg-role-btn{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:700; color:var(--rice-dark); cursor:pointer; transition:all .15s; }
  .pg-role-btn:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
  /* Lựa chọn ĐẦU TIÊN của MỖI khối lặp — nền màu xanh nổi bật RIÊNG BIỆT (không trùng màu hover) để
     người dùng dễ nhận biết đã cuộn qua bao nhiêu vòng lặp của danh sách. */
  .pg-role-btn.pg-role-btn-first{ background:#e3f2fd; border-color:#64b5f6; color:#0d47a1; }
  .pg-role-btn.pg-role-btn-first:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
  .pg-role-btn.pg-confirm-btn{ background:var(--gold); color:#fff; border-color:var(--gold); font-weight:800; }
  .pg-role-btn.pg-confirm-btn:hover{ filter:brightness(1.08); }
  @media (max-width:900px){ .pg-embed{ height:auto; min-height:0; flex-direction:column; } .pg-embed .ai-sidebar{ width:100%; max-height:280px; } }
  .ai-sidebar{ width:270px; flex-shrink:0; background:var(--rice-dark); color:#fff; display:flex; flex-direction:column; padding:16px 12px; }
  /* Tiêu đề module ở đầu khung thao tác bên trái (Ghi chú nhanh / Tạo bài Tuyên truyền /
     Chàng Nông dân Thông minh). CHỈ hiện ở màn hình hẹp: màn hình rộng đã thấy rõ mình đang ở
     module nào, còn màn hình hẹp thì khung này bung ra che kín nên cần nhắc lại tên module. */
  .ai-side-title{ display:none; }
  /* Quy tắc hiện PHẢI đứng SAU quy tắc ẩn ở trên: hai bên cùng độ ưu tiên nên chỉ thứ tự
     trong tệp mới quyết định bên nào thắng. Đặt nhầm lên trước là chữ không bao giờ hiện. */
  @media (max-width:820px){
    .ai-side-title{
      display:block; text-align:center; margin:2px 0 12px; padding-bottom:10px;
      border-bottom:1px solid rgba(255,255,255,.16);
      color:var(--gold); font-size:17px; font-weight:800; line-height:1.3; letter-spacing:.2px;
    }
  }
  .ai-exit-btn{ background:var(--gold); color:#3A2C05; border:none; border-radius:12px; padding:12px 14px; font-weight:800; font-size:14px; cursor:pointer; margin-bottom:14px; }
  .ai-exit-btn:hover{ filter:brightness(1.06); }
  .ai-newchat-btn{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:10px; padding:10px 12px; font-size:13.5px; cursor:pointer; margin-bottom:12px; text-align:left; }
  .ai-newchat-btn:hover{ background:rgba(255,255,255,.2); }
  .ai-hist-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.7; margin:6px 0 6px; }
  .ai-hist-list{ overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:4px; }
  .ai-hist-item{ display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13px; }
  .ai-hist-item:hover{ background:rgba(255,255,255,.1); }
  .ai-hist-item.active{ background:rgba(255,255,255,.2); font-weight:700; }
  .ai-hist-item .ai-hist-title{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ai-hist-item .ai-hist-del{ opacity:.6; background:none; border:none; color:#fff; cursor:pointer; font-size:13px; }
  .ai-hist-item .ai-hist-del:hover{ opacity:1; }
  .ai-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .ai-header{ padding:16px 24px; border-bottom:1px solid var(--line); font-weight:800; font-size:16px; color:var(--rice-dark); background:var(--white); }
  .ai-messages{ flex:1; overflow-y:auto; padding:20px 10%; display:flex; flex-direction:column; gap:14px; }
  @media (max-width:900px){ .ai-messages{ padding:16px 4%; } .ai-sidebar{ width:210px; } }
  .ai-bubble{
    max-width:78%; padding:12px 16px; border-radius:14px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size:16px; line-height:1.6; white-space:pre-wrap;
  }
  .ai-bubble.user{ align-self:flex-end; background:var(--rice-dark); color:#fff; border-bottom-right-radius:4px; }
  /* Tin nhắn của AI KHÔNG còn đóng khung bong bóng nữa — hiển thị full-width tự nhiên (bỏ nền, viền, bo
     góc, giới hạn độ rộng 78% của khung .ai-bubble gốc) — chỉ áp dụng riêng cho AI, KHÔNG áp dụng cho
     tin nhắn người dùng (vẫn giữ nguyên bong bóng như cũ). */
  .ai-bubble.assistant{ align-self:stretch; max-width:100%; background:none; border:none; border-radius:0; padding:4px 0; }
  .ai-bubble.thinking{ opacity:.7; font-style:italic; }
  /* Hiệu ứng "sóng chữ" nhấp nhô liên tục — dùng cho "Chàng đang suy nghĩ..." và "AI đang tiêu hoá..." */
  @keyframes waveBounce{ 0%, 60%, 100%{ transform:translateY(0); } 30%{ transform:translateY(-5px); } }
  .wave-text span{ display:inline-block; animation: waveBounce 1.1s ease-in-out infinite; }
  .wave-text-sparse span{ display:inline-block; animation: waveBounce 1.1s ease-in-out infinite; }
  .wave-text-slow span{ display:inline-block; animation: waveBounce 2.2s ease-in-out infinite; }
  /* Banner nổi bật báo AI đã tiêu hoá xong */
  .kn-done-banner{ background:linear-gradient(90deg, #2f6b3a, #4a9c5c); color:#fff; padding:12px 16px; border-radius:12px; font-weight:700; font-size:13.5px; margin:8px 0; box-shadow:0 4px 14px rgba(47,107,58,.35); animation: knDoneAppear .35s ease-out; }
  @keyframes knDoneAppear{ 0%{ opacity:0; transform:translateY(8px); } 100%{ opacity:1; transform:translateY(0); } }
  .ai-bubble p, .ai-bubble li, .ai-bubble br{ font-size:inherit; line-height:inherit; }
  .ai-bubble .ai-md-list{ margin:4px 0; padding-left:22px; font-size:inherit; line-height:inherit; }
  .ai-bubble .ai-md-list li{ margin:3px 0; }
  /* Khối code sinh ra bởi renderMarkdownLite — có nút Sao chép riêng, font monospace, dễ đọc */
  .md-code-block{ background:#1e1e1e; border-radius:10px; margin:8px 0; overflow:hidden; font-size:12.5px; }
  .md-code-head{ display:flex; align-items:center; justify-content:space-between; background:#2d2d2d; color:#ccc; padding:5px 10px; font-size:11px; }
  .md-code-head button{ background:rgba(255,255,255,.12); color:#fff; border:none; border-radius:6px; padding:3px 9px; font-size:11px; cursor:pointer; }
  .md-code-head button:hover{ background:rgba(255,255,255,.22); }
  .md-code-block pre{ margin:0; padding:12px 14px; overflow-x:auto; }
  .md-code-block code{ font-family:'JetBrains Mono', 'Courier New', monospace; color:#e6e6e6; white-space:pre; }
  /* Khối bảng sinh ra bởi renderMarkdownLite — có nút Sao chép bảng */
  .md-table-block{ margin:8px 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .md-table-head{ display:flex; justify-content:flex-end; background:var(--paper-2); padding:5px 8px; }
  .md-table-head button{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:3px 9px; font-size:11px; cursor:pointer; }
  .md-table-head button:hover{ background:var(--paper-2); }
  table.md-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  table.md-table th, table.md-table td{ border:1px solid var(--line); padding:6px 10px; text-align:left; }
  table.md-table th{ background:var(--paper-2); font-weight:700; }
  /* Thẻ file thật (PowerPoint/Word/Excel/PDF) do AI xuất ra, sinh bởi renderMarkdownLite */
  .md-file-card{ display:flex; align-items:center; gap:12px; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:8px 0; box-shadow:var(--shadow); }
  .md-file-icon{ font-size:28px; flex-shrink:0; }
  .md-file-info{ flex:1; min-width:0; }
  .md-file-title{ font-weight:700; font-size:13px; color:var(--rice-dark); }
  .md-file-sub{ font-size:11px; color:#9A9580; margin-top:2px; }
  .md-file-download{ background:var(--gold); color:#3A2C05; border:none; border-radius:20px; padding:8px 16px; font-weight:700; font-size:12.5px; cursor:pointer; flex-shrink:0; white-space:nowrap; }
  .md-file-download:hover{ filter:brightness(1.06); }
  .md-file-download:disabled{ opacity:.6; cursor:wait; }
  @media (max-width:768px){ .ai-bubble{ font-size:15px; padding:10px 14px; } }

  /* Bọc bong bóng + thanh icon hành động (sửa/copy/thêm vào ghi chú) */
  .ai-bubble-wrap{ display:flex; flex-direction:column; max-width:78%; }
  .ai-bubble-wrap.user{ align-self:flex-end; align-items:flex-end; }
  .ai-bubble-wrap.assistant{ align-self:stretch; align-items:stretch; max-width:100%; }
  .ai-bubble-wrap .ai-bubble{ max-width:100%; }
  .ai-bubble-actions{ display:flex; gap:4px; margin-top:4px; opacity:0; transition:opacity .15s ease; }
  .ai-bubble-wrap:hover .ai-bubble-actions, .ai-bubble-actions.force-show{ opacity:1; }
  .ai-bubble-act{ background:var(--paper-2); border:1px solid var(--line); border-radius:7px; width:25px; height:25px; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--rice-dark); padding:0; }
  .ai-bubble-act:hover{ background:var(--paper); }
  .ai-bubble-addnote-wrap{ position:relative; }
  .ai-bubble-addnote-menu{ position:absolute; bottom:calc(100% + 6px); background:var(--white); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); min-width:220px; z-index:35; overflow:hidden; }
  .ai-bubble-wrap.user .ai-bubble-addnote-menu{ right:0; }
  .ai-bubble-wrap.assistant .ai-bubble-addnote-menu{ left:0; }
  .ai-bubble-addnote-menu .ai-add-opt{ text-align:left; }
  .ai-edit-box{ display:flex; flex-direction:column; gap:6px; width:100%; }
  .ai-edit-box textarea{ width:100%; min-width:260px; font-family:inherit; font-size:14px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); resize:vertical; }
  .ai-edit-box-actions{ display:flex; gap:8px; justify-content:flex-end; }

  /* Toast thông báo nhanh */
  .hnd-toast{ position:fixed; left:50%; bottom:30px; transform:translate(-50%, 16px); background:var(--rice-dark); color:#fff; padding:10px 22px; border-radius:24px; font-size:13.5px; font-weight:700; box-shadow:var(--shadow); z-index:1000; opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; max-width:80vw; text-align:center; }
  .hnd-toast.show{ opacity:1; transform:translate(-50%, 0); }
  /* Thông báo LỚN (gia hạn thành công / phê duyệt đóng lãi thành công) — nhảy sổ ra giữa màn hình,
     "nhảy múa" (phóng to/xoay nhẹ) trong 1 giây, đứng im 4 giây, rồi mờ dần và biến mất. */
  @keyframes bigToastPopDance{
    0%{ transform:translate(-50%,-50%) scale(0) rotate(0deg); opacity:0; }
    15%{ transform:translate(-50%,-50%) scale(1.18) rotate(-8deg); opacity:1; }
    30%{ transform:translate(-50%,-50%) scale(0.94) rotate(6deg); }
    45%{ transform:translate(-50%,-50%) scale(1.08) rotate(-4deg); }
    60%{ transform:translate(-50%,-50%) scale(0.98) rotate(3deg); }
    75%{ transform:translate(-50%,-50%) scale(1.03) rotate(-2deg); }
    100%{ transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:1; }
  }
  @keyframes bigToastFadeOut{
    0%{ transform:translate(-50%,-50%); opacity:1; }
    100%{ transform:translate(-50%, calc(-50% + 60vh)); opacity:0; }
  }
  .big-toast{
    position:fixed; top:44%; left:50%; z-index:99999; background:#1b7a3d; color:#fff; font-weight:800;
    font-size:16px; padding:20px 32px; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.4);
    text-align:center; max-width:90vw; animation: bigToastPopDance 1s ease-out forwards; pointer-events:none;
  }
  .big-toast.big-toast-fading{ animation: bigToastFadeOut 1.2s ease-in forwards; }


  /* Hiệu ứng chữ "CHÚC ĐỒNG CHÍ..." nổi lềnh bềnh nhẹ nhàng như trên mặt nước, ở các popup chào mừng */
  @keyframes welcomeFloat{
    0%,100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-8px) rotate(-0.6deg); }
    50%{ transform: translateY(-2px) rotate(0deg); }
    75%{ transform: translateY(-10px) rotate(0.6deg); }
  }
  .welcome-float-title{ display:inline-block; animation: welcomeFloat 3.2s ease-in-out infinite; }
  .ai-inputbar{ display:flex; gap:10px; padding:16px 10%; border-top:1px solid var(--line); background:var(--white); align-items:flex-end; }
  @media (max-width:900px){ .ai-inputbar{ padding:12px 4%; } }
  .ai-inputbar textarea{ flex:1; resize:none; border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:16px; font-family:inherit; max-height:65vh; overflow-y:auto; line-height:1.4; }
  .ai-inputbar button{ background:var(--gold); color:#3A2C05; border:none; border-radius:50%; width:46px; height:46px; font-size:18px; cursor:pointer; flex-shrink:0; }
  .ai-inputbar button:disabled{ opacity:.5; cursor:not-allowed; }
  .ai-inputbar button.ai-stop-btn{ background:#b3261e; color:#fff; animation: fabBob 1.4s ease-in-out infinite; }
  .admin-view-banner{ background:#3A2C05; color:#FFE7A6; padding:8px 16px; font-size:13px; text-align:center; font-weight:700; }

  /* Tiêu đề "Sổ tay Công tác Hội Nông dân cấp xã/phường" ở trên cùng mọi giao diện chính —
     lắc nhẹ qua phải rồi qua trái LIÊN TỤC, không còn đoạn đứng im (giữ nguyên tốc độ lắc cũ:
     center->phải mất 1.26s, phải->trái mất 2.52s, trái->center mất 1.26s, cộng lại 1 chu kỳ ~5.04s). */
  .app-title-banner{ width:100%; background:linear-gradient(90deg, var(--rice-dark), var(--gold)); color:#fff; text-align:center; padding:8px 10px; font-weight:800; font-size:13.5px; letter-spacing:.4px; overflow:hidden; white-space:nowrap; }
  .app-title-banner span{ display:inline-block; animation: bannerSway 5.04s ease-in-out infinite; }
  @keyframes bannerSway{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(14px); }
    75%{ transform:translateX(-14px); }
    100%{ transform:translateX(0); }
  }
  @media (max-width:640px){ .app-title-banner{ font-size:11.5px; padding:7px 8px; } }

  /* Model đang hoạt động (dropdown chọn Cấu hình AI) */
  .ai-model-bar{ padding:8px 10% 0; background:var(--white); }
  @media (max-width:900px){ .ai-model-bar{ padding:8px 4% 0; } }
  .ai-model-select{ position:relative; display:inline-flex; align-items:center; gap:6px; background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:700; color:var(--rice-dark); cursor:pointer; user-select:none; }
  .ai-model-select:hover{ background:var(--paper); }
  .ai-model-caret{ font-size:10px; opacity:.6; }
  .ai-model-dropdown{ position:absolute; top:calc(100% + 6px); left:0; background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); min-width:240px; max-width:320px; z-index:20; overflow:hidden; }
  .ai-model-opt{ padding:10px 14px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--line); }
  .ai-model-opt:last-child{ border-bottom:none; }
  .ai-model-opt:hover{ background:var(--paper-2); }
  .ai-model-opt.active{ background:rgba(199,154,43,.15); font-weight:700; }
  .ai-model-opt .sub{ display:block; font-size:11px; margin-top:2px; }

  /* Nút "THÊM THÀNH PHẦN" (tài liệu/ảnh/tìm web) */
  .ai-add-btn{ position:relative; background:var(--paper-2) !important; color:var(--rice-dark) !important; border:1px solid var(--line) !important; border-radius:20px !important; width:auto !important; height:46px; padding:0 16px; font-size:12.5px !important; font-weight:800; display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; transition: width .2s ease, padding .2s ease, border-radius .2s ease; }
  .ai-add-btn:hover{ background:var(--paper) !important; }
  /* Thu gọn nút "Thêm thành phần" thành hình tròn chỉ còn icon "+" — kích hoạt bằng JS khi khung chat đã
     giãn cao tới khoảng 3-4 dòng văn bản (chỉ áp dụng ở màn hình RỘNG; màn hình hẹp đã luôn thu gọn sẵn
     qua media query riêng, không liên quan tới class này) — CÙNG kiểu dáng/hiệu ứng với bản thu gọn ở
     màn hình hẹp, để khung chat được kéo dài thêm sang bên trái, có thêm không gian hiển thị văn bản. */
  .ai-add-btn.ai-add-btn-collapsed{ width:46px !important; padding:0 !important; justify-content:center; border-radius:50% !important; }
  .ai-add-btn.ai-add-btn-collapsed .ai-add-label{ display:none; }
  .ai-add-menu{ position:absolute; bottom:calc(100% + 8px); left:0; background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); min-width:200px; z-index:20; overflow:hidden; }
  .ai-add-opt{ padding:11px 16px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--line); text-align:left; color:var(--ink); font-weight:600; }
  .ai-add-opt-disabled{ color:#999 !important; cursor:not-allowed !important; opacity:.55; }
  .ai-add-opt:last-child{ border-bottom:none; }
  .ai-add-opt:hover{ background:var(--paper-2); }

  /* Micro */
  .ai-mic-btn{ background:var(--paper-2) !important; color:var(--rice-dark) !important; border:1px solid var(--line) !important; }
  .ai-mic-btn:hover{ background:var(--paper) !important; }
  .ai-mic-btn.listening{ background:var(--red) !important; color:#fff !important; border-color:var(--red) !important; animation:aiMicPulse 1.2s ease-in-out infinite; }
  @keyframes aiMicPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(193,68,60,.5); } 50%{ box-shadow:0 0 0 8px rgba(193,68,60,0); } }

  /* Chip tệp đính kèm đang chờ gửi + trong bong bóng lịch sử */
  .ai-attach-row{ display:flex; flex-wrap:wrap; gap:8px; padding:0 10% 8px; }
  @media (max-width:900px){ .ai-attach-row{ padding:0 4% 8px; } }
  .ai-attach-chip{ display:inline-flex; align-items:center; gap:8px; background:#fff3cd; border:2px solid #ffc107; border-radius:20px; padding:9px 16px; font-size:15px; font-weight:800; color:#7a5b00; }
  .ai-attach-chip button{ background:none; border:none; cursor:pointer; font-size:15px; font-weight:800; color:var(--red); padding:0; }
  .ai-bubble-attach{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

  /* Modal chọn thư mục lưu ghi chú (Ghi chú nhanh -> Trung tâm dữ liệu) */
  .qn-target-tree{max-height:46vh; overflow:auto; border:1px solid var(--line); border-radius:10px; background:var(--paper-2); padding:5px;}
  .qn-target-row{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--ink);}
  .qn-target-row:hover{background:rgba(0,0,0,.05);}
  .qn-target-row.selected{background:var(--rice-dark); color:#fff; font-weight:700;}
  .qn-target-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .qn-target-error{padding:9px 11px; margin-bottom:9px; border-radius:9px; font-size:12.5px; background:rgba(180,44,44,.1); color:#8b1e1e;}

  /* ---- Menu thả xuống "Công cụ văn phòng" trong khung menu trái ---- */
  .nav-item-group .nav-caret{margin-left:auto; opacity:.75; font-size:11px;}
  .nav-item-group.expanded{background:rgba(255,255,255,.10);}
  /* Mục con trong menu thả xuống của các nhóm (Công cụ văn phòng, Công cụ nâng cao):
     nền xanh lá sáng hơn hẳn nền khung menu để tên module nổi bật, chữ trắng cho dễ đọc. */
  .nav-subitem{
    padding-left:30px !important; font-size:13px; font-weight:600;
    background:linear-gradient(180deg,#4a8a5c 0%, #37704a 100%);
    color:#fff !important; border-left:4px solid var(--gold);
    border-radius:8px; margin:0 0 4px 10px; width:calc(100% - 10px);
  }
  .nav-subitem:hover{ background:linear-gradient(180deg,#57a06b 0%, #3f7f54 100%); color:#fff !important; }
  .nav-subitem.active{ background:linear-gradient(180deg,#f0d17a 0%, var(--gold) 100%); color:#3A2C05 !important; border-left-color:var(--rice-dark); }

  /* ---- Overlay toàn màn hình của 3 công cụ văn phòng ---- */
  .office-overlay{overflow:auto; background:var(--paper);}
  .office-doc{max-width:1000px; margin:0 auto; padding:24px 20px 56px;}
  .office-doc-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px;}
  .office-doc-head h2{margin:4px 0 0; font-size:clamp(24px,4vw,34px); color:var(--ink);}
  .office-badge{display:inline-block; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:700;
    background:rgba(199,154,43,.16); color:#7a5b00; border:1px solid rgba(199,154,43,.4); margin-bottom:14px;}
  .office-lead{font-size:16.5px; line-height:1.7; color:var(--ink); margin:0 0 24px; max-width:78ch;}
  .office-grid,.upcoming-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:14px;}
  .office-feature,.upcoming-feature{display:flex; gap:12px; padding:16px; border:1px solid var(--line);
    border-radius:13px; background:var(--paper-2);}
  .office-feature-ico,.upcoming-feature-ico{font-size:24px; line-height:1; flex-shrink:0;}
  .office-feature h4,.upcoming-feature h4{margin:0 0 6px; font-size:14.5px; color:var(--ink);}
  .office-feature p,.upcoming-feature p{margin:0; font-size:13.5px; line-height:1.65; color:#5f5a4e;}
  .office-foot-note,.upcoming-note{margin-top:22px; padding:16px 18px; border-radius:13px;
    background:rgba(47,74,60,.07); border-left:4px solid var(--rice-dark); display:flex; flex-direction:column; gap:6px;}
  .office-foot-note b,.upcoming-note b{color:var(--ink); font-size:14.5px;}
  .office-foot-note span,.upcoming-note span{font-size:13.5px; line-height:1.7; color:#5f5a4e;}
  .office-doc-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px;}

  /* ---- Trang giới thiệu của 7 module đang nâng cấp ---- */
  .upcoming-page{padding:6px 0 30px;}
  .upcoming-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px 24px; box-shadow:var(--shadow);}
  .upcoming-head{display:flex; align-items:center; gap:15px; margin-bottom:15px;}
  .upcoming-ico{font-size:44px; line-height:1;}
  .upcoming-head h3{margin:3px 0 0; font-size:clamp(21px,3.4vw,28px); color:var(--ink);}
  .upcoming-badge{display:inline-block; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:700;
    background:rgba(199,154,43,.16); color:#7a5b00; border:1px solid rgba(199,154,43,.4); margin-bottom:14px;}
  .upcoming-lead{font-size:15.5px; line-height:1.72; color:var(--ink); margin:0 0 22px; max-width:80ch;}

  @media (max-width:640px){
    .office-doc{padding:16px 13px 44px;}
    .upcoming-card{padding:18px 15px;}
    .office-grid,.upcoming-grid{grid-template-columns:1fr;}
  }

  /* ---- Nhãn module nhảy múa khi vừa bấm vào (dùng lại keyframes nameDance sẵn có,
         nhưng chạy hữu hạn 3 nhịp rồi đứng im hẳn thay vì lặp vô hạn) ---- */
  .nav-label-dance{ display:inline-block; animation: nameDance 1.1s ease-in-out 3; transform-origin:left center; }

  /* ---- Chân khung menu trái: hai liên kết pháp lý và dòng bản quyền ---- */
  .sidebar-legal{margin-top:14px; padding:14px 14px 18px; border-top:1px solid rgba(255,255,255,.14);
    display:flex; flex-direction:column; gap:7px;}
  .sidebar-legal-link{background:none; border:0; padding:3px 0; text-align:left; cursor:pointer;
    color:rgba(255,255,255,.66); font-size:11.5px; font-family:inherit; line-height:1.45;
    transition:color .15s ease;}
  .sidebar-legal-link:hover{color:#fff; text-decoration:underline;}
  .sidebar-copyright{margin-top:9px; padding-top:10px; border-top:1px solid rgba(255,255,255,.09);
    display:flex; flex-direction:column; gap:2px; color:rgba(255,255,255,.42); font-size:10.5px; line-height:1.5;}
  .sidebar-copyright-brand{color:rgba(255,255,255,.82); font-weight:800; font-size:12.5px; letter-spacing:.4px;}

  /* ---- Dòng cảnh báo đỏ ở đầu module Tổng quan (tạm thời, gỡ khi app hoàn thiện) ---- */
  .dashboard-wip-notice{margin:0 0 16px; padding:14px 17px; border-radius:12px;
    background:rgba(180,44,44,.09); border:1px solid rgba(180,44,44,.34); border-left:5px solid #b42c2c;
    color:#a01c1c; font-size:15.5px; font-weight:700; line-height:1.6;}

  /* ---- Module Hướng dẫn sử dụng: khối báo đang nâng cấp và định hướng sắp tới ---- */
  .guide-notice{display:flex; gap:13px; align-items:flex-start; padding:15px 17px; border-radius:12px;
    background:rgba(199,154,43,.12); border:1px solid rgba(199,154,43,.42); margin-bottom:18px;}
  .guide-notice-ico{font-size:26px; line-height:1;}
  .guide-notice b{display:block; color:var(--ink); font-size:15.5px; margin-bottom:4px;}
  .guide-notice p{margin:0; font-size:13.5px; line-height:1.65; color:#5f5a4e;}
  .guide-plan h4{margin:0 0 11px; font-size:16px; color:var(--ink);}
  .guide-plan p{margin:0 0 11px; font-size:14px; line-height:1.72; color:#5f5a4e;}
  .guide-plan ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px;}
  .guide-plan li{font-size:14px; line-height:1.7; color:#5f5a4e;}
  .guide-plan b{color:var(--ink);}

  @media (max-width:640px){
    .dashboard-wip-notice{font-size:14px; padding:12px 13px;}
  }

  /* ---- Thanh "Tìm hiểu thêm về module này" (ngay dưới tiêu đề module) ---- */
  .module-learn-bar{ padding:10px 26px 0; }
  @media (max-width:820px){ .module-learn-bar{ padding:10px 16px 0; } }
  .module-learn{ position:relative; display:inline-block; }
  .module-learn-btn{
    background:linear-gradient(180deg,#ffffff 0%, var(--paper-2) 100%);
    border:1px solid var(--gold); color:var(--rice-dark);
    border-radius:999px; padding:7px 16px; font-size:13px; font-weight:700; cursor:pointer;
    display:inline-flex; align-items:center; gap:7px; box-shadow:0 1px 3px rgba(0,0,0,.08);
  }
  .module-learn-btn:hover{ filter:brightness(1.04); border-color:var(--rice-dark); }
  .module-learn-menu{
    /* top:100% -> menu DÍNH SÁT mép dưới của nút, không có khe hở. Có khe thì khi rê chuột
       từ nút xuống menu, con trỏ đi qua vùng trống và menu tự đóng giữa chừng. */
    display:none; position:absolute; top:100%; left:0; z-index:60;
    min-width:300px; max-width:min(92vw, 460px);
    background:var(--white); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 10px 28px rgba(0,0,0,.20); padding:14px 10px 10px;
  }
  .module-learn.open .module-learn-menu{ display:block; }
  .module-learn-close{
    position:absolute; top:-10px; right:-10px; z-index:2; width:26px; height:26px; border:none;
    border-radius:50%; background:#b71c1c; color:#fff; font-weight:800; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.3);
  }
  .module-learn-opt{
    display:block; width:100%; text-align:left; background:var(--paper-2);
    border:1px solid var(--line); border-radius:9px; padding:10px 12px; margin-bottom:7px;
    font-size:13px; font-weight:600; color:var(--ink); line-height:1.45; cursor:pointer;
  }
  .module-learn-opt:last-child{ margin-bottom:0; }
  .module-learn-opt:hover{ background:var(--white); border-color:var(--gold); }

  /* ---- Dòng thương hiệu trên cùng màn hình đăng nhập, ngay phía trên biểu tượng bông lúa ---- */
  .auth-brand{margin:0 0 14px; text-align:center; font-size:14px; font-weight:800; letter-spacing:1.1px;
    color:var(--rice-dark); text-transform:lowercase; opacity:.92;}
  .auth-brand::after{content:''; display:block; width:46px; height:2px; margin:9px auto 0; border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--gold, #c79a2b), transparent);}