:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033;background:#f4f7fb;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-height:100vh}.topbar{height:auto;min-height:68px;padding:14px max(calc((100vw - 1080px)/2),24px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border-bottom:1px solid #e5eaf2}.brand{font-size:18px;font-weight:750;color:#153d76;text-decoration:none;letter-spacing:-.3px}.topbar nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.topbar nav a,.nav-button{color:#40516d;text-decoration:none;font-size:14px;font-weight:600}.topbar nav a:hover,.nav-button:hover{color:#1764c0}.nav-user{font-size:13px;color:#73809a}.inline{display:inline}.nav-button{border:0;background:none;cursor:pointer;padding:0;font:inherit}.container{width:min(1080px,calc(100% - 36px));margin:42px auto 72px}h1{font-size:30px;letter-spacing:-.7px;margin:0 0 24px;color:#172b4d}h2{font-size:19px;margin:0 0 16px}.card{background:#fff;border:1px solid #e3e9f2;border-radius:14px;padding:22px;margin:0 0 20px;box-shadow:0 4px 18px rgba(30,55,90,.035)}.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.muted{color:#73809a;font-size:14px;line-height:1.55}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}.field label{font-size:13px;font-weight:700;color:#40516d}.field input,.field select{font:inherit;border:1px solid #cbd5e3;border-radius:8px;padding:11px 12px;background:#fff;color:#172033;max-width:100%}.field input:focus,.field select:focus{outline:3px solid #d9e9ff;border-color:#5b9bea}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:#1764c0;color:#fff;padding:11px 16px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}.button:hover{background:#0f4f9c}.button.danger{background:#b83232}.button.secondary{background:#eaf1fb;color:#1c4c86}.button.small{padding:7px 10px;font-size:13px}.notice{border-radius:9px;padding:12px 15px;margin:0 0 18px;font-size:14px}.success{background:#e6f6ee;color:#17643c;border:1px solid #bce7ce}.error{background:#fff0f0;color:#8a2525;border:1px solid #f0caca}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid #edf0f5;vertical-align:middle}th{font-size:12px;text-transform:uppercase;letter-spacing:.045em;color:#73809a;background:#fafbfd}td.file-name{font-weight:650;overflow-wrap:anywhere}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.file-input{border:1px dashed #aabbd0;padding:20px;border-radius:10px;background:#fbfdff}.progress{height:9px;background:#e9eef5;border-radius:9px;overflow:hidden;margin:15px 0 6px}.progress>div{height:100%;width:0;background:#2876d1;transition:width .1s}.upload-status{min-height:20px;font-size:13px;color:#52627a}.checkbox-row{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 18px}.checkbox-row label{font-size:14px;color:#40516d}.checkbox-row input{margin-right:6px}.login-card{max-width:460px;margin:45px auto}.pill{display:inline-block;padding:4px 8px;border-radius:99px;font-size:12px;background:#edf2f8;color:#43556e}.pill.active{background:#e3f5eb;color:#17643c}.footer{text-align:center;color:#8b96a8;font-size:12px;padding:0 18px 28px}.bar-note{font-size:13px;color:#687790}.empty{text-align:center;padding:30px;color:#73809a}@media(max-width:700px){.topbar{align-items:flex-start;flex-direction:column;padding:16px 20px}.topbar nav{gap:14px}.container{margin-top:28px}h1{font-size:25px}.form-grid{grid-template-columns:1fr}.card{padding:17px}td,th{padding:11px 9px}.nav-user{display:none}}

.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:18px}.folder-card{min-height:132px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:18px;border:1px solid #dce5f1;border-radius:12px;background:linear-gradient(145deg,#fff,#f7faff);color:#233a5c;text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.folder-card:hover{transform:translateY(-2px);border-color:#8db8e8;box-shadow:0 7px 20px rgba(30,75,130,.09)}.folder-card strong{font-size:16px;overflow-wrap:anywhere}.folder-card>span:last-child{font-size:13px;color:#73809a}.folder-icon{font-size:22px;color:#2876d1;line-height:1}

.folder-list-table .folder-cell{min-width:145px;vertical-align:middle;text-align:center;background:#fbfcfe;border-right:1px solid #edf0f5}.folder-cell a{display:block;color:#244c7d;font-size:16px;font-weight:750;text-decoration:none;overflow-wrap:anywhere}.folder-cell a:hover{text-decoration:underline}.folder-cell span{display:block;margin-top:7px;color:#8290a5;font-size:12px;font-weight:500}.folder-list-table .folder-actions{min-width:170px;vertical-align:middle}.folder-list-table .folder-actions .actions{flex-direction:column;align-items:stretch}.folder-list-table .folder-actions .button{white-space:nowrap}.folder-list-table .empty-folder{text-align:center;color:#8290a5;background:#fcfdff}
@media(max-width:700px){.folder-list-table .folder-cell{min-width:115px}.folder-list-table .folder-actions{min-width:155px}}

/* Bảng thư mục: giữ tiêu đề và nút thao tác trên một hàng; cuộn ngang khi màn hình hẹp. */
.folder-list-table{min-width:1120px;table-layout:auto}.folder-list-table thead th{white-space:nowrap;word-break:keep-all}.folder-list-table td{vertical-align:middle}.folder-list-table td:nth-child(2){min-width:220px}.folder-list-table td:nth-child(3),.folder-list-table td:nth-child(4),.folder-list-table td:nth-child(5){white-space:nowrap}.folder-list-table td:nth-child(6){min-width:120px}.folder-list-table td:nth-child(6) .actions{flex-wrap:nowrap;white-space:nowrap}.folder-list-table td:nth-child(6) .button{flex:0 0 auto;white-space:nowrap}.folder-list-table .folder-actions .actions{flex-wrap:nowrap}


/* Bảng thư mục gọn theo chiều rộng màn hình, không tạo thanh cuộn ngang. */
.table-wrap{max-width:100%;overflow-x:hidden}
.folder-list-table{width:100%;min-width:0;table-layout:fixed;font-size:13px}
.folder-list-table th,.folder-list-table td{min-width:0;padding:10px 7px;overflow-wrap:anywhere;word-break:normal}
.folder-list-table thead th{white-space:normal;line-height:1.25;font-size:11px;letter-spacing:.025em}
.folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:12%}
.folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:23%}
.folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:9%}
.folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:10%}
.folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:17%}
.folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:15%}
.folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:14%}
.folder-list-table .folder-cell{min-width:0;padding:8px 5px}
.folder-list-table .folder-cell a{font-size:14px;line-height:1.3}
.folder-list-table .folder-cell span{font-size:11px}
.folder-list-table td:nth-child(3),.folder-list-table td:nth-child(4),.folder-list-table td:nth-child(5){white-space:normal;font-size:12px;line-height:1.35}
.folder-list-table td:nth-child(6) .actions,.folder-list-table .folder-actions .actions{display:flex;flex-direction:column;align-items:stretch;gap:5px;flex-wrap:wrap;white-space:normal}
.folder-list-table td:nth-child(6) .actions form{width:100%;margin:0}
.folder-list-table td:nth-child(6) .button,.folder-list-table .folder-actions .button{width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:center;padding:6px 5px;font-size:11px;line-height:1.25}
@media(max-width:900px){
  .container{width:min(100% - 24px,1080px)}
  .card{padding:16px}
  .folder-list-table{font-size:12px}
  .folder-list-table th,.folder-list-table td{padding:8px 5px}
  .folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:12%}
  .folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:22%}
  .folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:9%}
  .folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:10%}
  .folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:17%}
  .folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:15%}
  .folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:15%}
}
@media(max-width:560px){
  .container{width:calc(100% - 16px);margin-top:20px}
  .card{padding:12px}
  .folder-list-table{font-size:10px}
  .folder-list-table th,.folder-list-table td{padding:6px 3px}
  .folder-list-table thead th{font-size:9px;letter-spacing:0}
  .folder-list-table .folder-cell a{font-size:11px}
  .folder-list-table .folder-cell span,.folder-list-table td:nth-child(3),.folder-list-table td:nth-child(4),.folder-list-table td:nth-child(5){font-size:10px}
  .folder-list-table td:nth-child(6) .button,.folder-list-table .folder-actions .button{font-size:9px;padding:5px 2px}
}

/* Ghi đè các min-width cũ của bảng gộp thư mục. */
.folder-list-table td:nth-child(2){min-width:0}
.folder-list-table .folder-actions{min-width:0}

.folder-list-table .folder-cell{min-width:0}


/* Căn giữa tiêu đề và xếp các thao tác ngang trên màn hình đủ rộng. */
.folder-list-table thead th{text-align:center;vertical-align:middle}
.folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:9%}
.folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:19%}
.folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:8%}
.folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:8%}
.folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:10%}
.folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:28%}
.folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:18%}
.folder-list-table td:nth-child(6) .actions{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.folder-list-table td:nth-child(6) .actions form{display:flex;flex:0 1 auto;width:auto;margin:0}
.folder-list-table td:nth-child(6) .button,.folder-list-table .folder-actions .button,.folder-list-table tbody td:last-child:not(.folder-actions) .button{display:inline-flex;flex:0 1 auto;width:auto;min-width:0;max-width:100%;padding:5px 6px;font-size:10px;line-height:1.15;white-space:nowrap;overflow-wrap:normal}
.folder-list-table .folder-actions .actions,.folder-list-table tbody td:last-child:not(.folder-actions) .actions{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;white-space:normal}
@media(max-width:760px){
  .folder-list-table td:nth-child(6) .actions{flex-wrap:wrap;white-space:normal}
  .folder-list-table td:nth-child(6) .button,.folder-list-table .folder-actions .button,.folder-list-table tbody td:last-child:not(.folder-actions) .button{font-size:9px;padding:4px 4px}
}


/* Chỉnh độ đọc của bảng: tiêu đề gọn, tên thư mục một dòng, cột có vạch phân cách. */
.folder-list-table thead th{font-size:9px;letter-spacing:.01em;padding:7px 4px}
.folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:14%}
.folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:17%}
.folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:9%}
.folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:9%}
.folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:10%}
.folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:25%}
.folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:16%}
.folder-list-table .folder-cell a{font-size:11px;line-height:1.2;white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
.folder-list-table th:not(:last-child),.folder-list-table td:not(:last-child){border-right:1px solid #dfe5ee}
@media(max-width:560px){
  .folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:25%}
  .folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:14%}
  .folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:8%}
  .folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:8%}
  .folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:10%}
  .folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:20%}
  .folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:15%}
  .folder-list-table .folder-cell a{font-size:10px}
}


/* Tinh chỉnh cột tiêu đề tệp và hai cột thao tác; giữ viền qua các ô rowspan. */
.folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:14%}
.folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:21%}
.folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:9%}
.folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:9%}
.folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:10%}
.folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:22%}
.folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:15%}
.folder-list-table td.file-name{font-size:11px;line-height:1.25}
.folder-list-table th:nth-child(6),.folder-list-table td.file-actions{border-right:1px solid #dfe5ee}
.folder-list-table td.folder-actions,.folder-list-table tbody td:last-child:not(.folder-actions){border-left:1px solid #dfe5ee}
.folder-list-table td.file-actions .actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.folder-list-table td.file-actions form{display:flex;flex:0 1 auto;width:auto;margin:0}
.folder-list-table td.file-actions .button{display:inline-flex;flex:0 1 auto;width:auto;min-width:0;max-width:100%;padding:5px 5px;font-size:9px;line-height:1.15;white-space:nowrap;overflow-wrap:normal}
@media(max-width:760px){
  .folder-list-table td.file-actions .actions{flex-wrap:wrap;white-space:normal}
}
@media(max-width:560px){
  .folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:25%}
  .folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:17%}
  .folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:8%}
  .folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:8%}
  .folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:10%}
  .folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:19%}
  .folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:13%}
  .folder-list-table td.file-name{font-size:10px}
}


/* Thu hẹp các cột Tên tệp và thao tác theo yêu cầu. */
.folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:10%}
.folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:24%}
.folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:10%}
.folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:10%}
.folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:12%}
.folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:20%}
.folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:14%}
@media(max-width:560px){
  .folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:26%}
  .folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:17%}
  .folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:9%}
  .folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:9%}
  .folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:10%}
  .folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:17%}
  .folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:12%}
}


/* Nút thao tác tệp có kích thước nhất quán trên mọi hàng, kể cả hàng có rowspan. */
.folder-list-table td.file-actions .actions{display:grid;grid-template-columns:52px 52px 28px;justify-content:center;align-items:center;gap:4px;white-space:normal}
.folder-list-table td.file-actions .actions>a,.folder-list-table td.file-actions .actions>form{width:100%;min-width:0;margin:0}
.folder-list-table td.file-actions .button{box-sizing:border-box;width:100%;min-width:0;max-width:none;height:22px;padding:3px 2px;font-size:9px;line-height:1;white-space:nowrap}
.folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:10%}
.folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:29%}
.folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:10%}
.folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:10%}
.folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:14%}
.folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:16%}
.folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:11%}
@media(max-width:820px){
  .folder-list-table td.file-actions .actions{grid-template-columns:minmax(0,1fr);gap:3px}
  .folder-list-table td.file-actions .button{height:auto;min-height:22px;white-space:normal}
}
@media(max-width:560px){
  .folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:26%}
  .folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:19%}
  .folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:9%}
  .folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:9%}
  .folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:10%}
  .folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:16%}
  .folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:11%}
}


/* Giao diện điện thoại: giữ nguyên tỷ lệ máy tính, cho bảng cuộn ngang thay vì ép chữ và nút. */
@media(max-width:760px){
  .table-wrap:has(.folder-list-table){max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#9eabbc #e8edf4;padding-bottom:2px}
  .table-wrap:has(.folder-list-table)::-webkit-scrollbar{height:8px}
  .table-wrap:has(.folder-list-table)::-webkit-scrollbar-track{background:#e8edf4;border-radius:8px}
  .table-wrap:has(.folder-list-table)::-webkit-scrollbar-thumb{background:#9eabbc;border-radius:8px}
  .table-wrap:has(.folder-list-table)::after{content:"Vuốt ngang để xem đầy đủ các cột";display:block;margin-top:7px;color:#73809a;font-size:11px;text-align:center}
  .folder-list-table{width:1000px;min-width:1000px;table-layout:fixed;font-size:12px}
  .folder-list-table th,.folder-list-table td{padding:9px 8px;overflow-wrap:normal}
  .folder-list-table thead th{font-size:10px;line-height:1.25;white-space:normal}
  .folder-list-table th:nth-child(1),.folder-list-table td:nth-child(1){width:12%}
  .folder-list-table th:nth-child(2),.folder-list-table td:nth-child(2){width:25%}
  .folder-list-table th:nth-child(3),.folder-list-table td:nth-child(3){width:10%}
  .folder-list-table th:nth-child(4),.folder-list-table td:nth-child(4){width:10%}
  .folder-list-table th:nth-child(5),.folder-list-table td:nth-child(5){width:14%}
  .folder-list-table th:nth-child(6),.folder-list-table td:nth-child(6){width:16%}
  .folder-list-table th:nth-child(7),.folder-list-table td:nth-child(7){width:13%}
  .folder-list-table .folder-cell a{font-size:12px;white-space:normal;overflow-wrap:anywhere}
  .folder-list-table td.file-name{font-size:12px;overflow-wrap:anywhere}
  .folder-list-table td.file-actions .actions{grid-template-columns:52px 52px 28px;gap:4px;white-space:normal}
  .folder-list-table td.file-actions .button{height:22px;white-space:nowrap}
}