/* Dora Tools UI kit — lop tuong thich Bootstrap 4 cho trang cu dung helpers/type_page.php (08/11/2026, dot 3).
   Chi gom cac lop Bootstrap ma tool_html cua cac trang goi dang dung that (dem tren live), ve theo token kit.css.
   Trang moi KHONG dung file nay: viet bang lop t-*. */

/* Thẻ cũ của type_page */
.tp-card{background:var(--t-card);border:1px solid var(--t-line);border-radius:var(--t-r);padding:16px;margin:12px 0;box-shadow:var(--t-shadow)}
.tp-out{text-align:center}
.tp-out canvas,.tp-out img{max-width:100%;image-rendering:pixelated;border:1px solid var(--t-line);border-radius:8px;background:#fff}
.tp-empty{color:var(--t-mute);padding:40px 10px;border:2px dashed var(--t-line-d);border-radius:12px;text-align:center}
.tp-sec{margin:24px 0}
.tp-sec h2{font-size:21px;margin:0 0 10px}
.tp-steps{counter-reset:s;list-style:none;padding:0}
.tp-steps li{counter-increment:s;position:relative;padding-left:40px;margin-bottom:10px}
.tp-steps li:before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--t-main);color:#fff;text-align:center;line-height:28px;font-weight:700}
.tp-tool label{display:inline-block;margin-bottom:4px}

/* Lưới */
.tp-tool .container{max-width:100%;padding:0}
.tp-tool .row,.tp-tool .form-row{display:flex;flex-wrap:wrap;margin:0 -8px}
.tp-tool .form-row{margin:0 -5px}
.tp-tool .row > [class*="col"],.tp-tool .form-row > [class*="col"]{padding:0 8px;min-width:0;width:100%}
.tp-tool .form-row > [class*="col"]{padding:0 5px}
.tp-tool .col{flex:1 0 0}
.tp-tool .col-3{flex:0 0 25%;max-width:25%}
.tp-tool .col-6{flex:0 0 50%;max-width:50%}
@media(min-width:768px){
  .tp-tool .col-md-5{flex:0 0 41.667%;max-width:41.667%}
  .tp-tool .col-md-6{flex:0 0 50%;max-width:50%}
  .tp-tool .col-md-7{flex:0 0 58.333%;max-width:58.333%}
  .tp-tool .mt-md-0{margin-top:0 !important}
}

/* Ô nhập */
.tp-tool .form-group{margin-bottom:12px}
.tp-tool .form-control,.tp-tool .custom-select{display:block;width:100%;padding:10px;border:1px solid var(--t-line-d);border-radius:var(--t-r-s);font:16px/1.4 var(--t-font);background:#fff;color:var(--t-ink);min-height:44px}
.tp-tool textarea.form-control{min-height:110px;resize:vertical}
.tp-tool .form-control:focus,.tp-tool .custom-select:focus{border-color:var(--t-main);outline:0;box-shadow:0 0 0 3px rgba(0,102,255,.15)}
.tp-tool .form-control-lg{font-size:18px;min-height:50px;padding:12px}
.tp-tool .form-control-sm,.tp-tool .custom-select-sm{font-size:14px;min-height:36px;padding:6px 8px}
.tp-tool .custom-control{display:flex;align-items:flex-start;gap:8px;margin:4px 0}
.tp-tool .custom-control-input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--t-main)}
.tp-tool .custom-control-label{margin:0;font-size:15px;color:var(--t-ink);cursor:pointer}

/* Nút */
.tp-tool .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;color:var(--t-ink);border:1px solid var(--t-line-d);border-radius:999px;padding:9px 18px;font:600 15px/1.2 var(--t-font);text-decoration:none;cursor:pointer;min-height:42px;transition:background .15s}
.tp-tool .btn:disabled,.tp-tool .btn.disabled{opacity:.55;cursor:not-allowed}
.tp-tool .btn-primary{background:var(--t-main);border-color:var(--t-main);color:#fff}
.tp-tool .btn-primary:hover{background:var(--t-main-d);border-color:var(--t-main-d);color:#fff}
.tp-tool .btn-success{background:var(--t-ok);border-color:var(--t-ok);color:#fff}
.tp-tool .btn-success:hover{filter:brightness(.92);color:#fff}
.tp-tool .btn-outline-primary{color:var(--t-main);border-color:var(--t-main)}
.tp-tool .btn-outline-primary:hover,.tp-tool .btn-outline-primary.active{background:var(--t-main-l);color:var(--t-main)}
.tp-tool .btn-outline-secondary{color:var(--t-mute)}
.tp-tool .btn-outline-secondary:hover{border-color:var(--t-main);color:var(--t-ink)}
.tp-tool .btn-warning{background:#ffc107;border-color:#ffc107;color:#1d2433}
.tp-tool .btn-warning:hover{filter:brightness(.94)}
.tp-tool .btn-outline-danger{color:var(--t-bad);border-color:var(--t-bad)}
.tp-tool .btn-outline-danger:hover{background:var(--t-bad-l)}
.tp-tool .btn-link{background:none;border-color:transparent;color:var(--t-main);padding-left:4px;padding-right:4px}
.tp-tool .btn-link:hover{text-decoration:underline}
.tp-tool .btn-sm{font-size:14px;padding:5px 12px;min-height:34px}
.tp-tool .btn-lg{font-size:17px;padding:12px 24px;min-height:50px}
.tp-tool .btn-block{display:flex;width:100%}
.tp-tool .btn-block + .btn-block{margin-top:8px}

/* Bảng */
.tp-tool .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tp-tool .table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:12px}
.tp-tool .table th,.tp-tool .table td{border-bottom:1px solid var(--t-line);padding:8px 6px;text-align:left;vertical-align:top}
.tp-tool .table-sm th,.tp-tool .table-sm td{padding:5px 6px}
.tp-tool .table-bordered th,.tp-tool .table-bordered td{border:1px solid var(--t-line)}

/* Tiện ích */
.tp-tool .small,.tp-tool small{font-size:13.5px}
.tp-tool .font-weight-bold{font-weight:700}
.tp-tool .font-weight-normal{font-weight:400}
.tp-tool .text-muted{color:var(--t-mute) !important}
.tp-tool .text-danger{color:var(--t-bad) !important}
.tp-tool .text-left{text-align:left !important}
.tp-tool .text-center{text-align:center !important}
.tp-tool .bg-white{background:#fff !important}
.tp-tool .rounded{border-radius:var(--t-r-s) !important}
.tp-tool .border{border:1px solid var(--t-line) !important}
.tp-tool .d-flex{display:flex !important}
.tp-tool .flex-wrap{flex-wrap:wrap !important}
.tp-tool .flex-fill{flex:1 1 auto !important}
.tp-tool .align-items-center{align-items:center !important}
.tp-tool .ml-auto{margin-left:auto !important}
.tp-tool .mr-auto{margin-right:auto !important}
.tp-tool .mr-1{margin-right:4px !important}
.tp-tool .mr-2{margin-right:8px !important}
.tp-tool .mt-1{margin-top:4px !important}
.tp-tool .mt-2{margin-top:8px !important}
.tp-tool .mt-3{margin-top:16px !important}
.tp-tool .mb-0{margin-bottom:0 !important}
.tp-tool .mb-1{margin-bottom:4px !important}
.tp-tool .mb-2{margin-bottom:8px !important}
.tp-tool .mb-3{margin-bottom:16px !important}
.tp-tool .p-3{padding:16px !important}
.tp-tool .px-1{padding-left:4px !important;padding-right:4px !important}
.tp-tool .py-2{padding-top:8px !important;padding-bottom:8px !important}
.tp-tool .pl-3{padding-left:16px !important}
.tp-tool .pb-4{padding-bottom:24px !important}