/* v1.9.23 - MOBILE ONLY
   Tách riêng CSS mobile để dễ chỉnh sau này.
   Mục tiêu: input/select/button cao 30px; các thẻ thống kê cao đều 45px;
   không chỉnh JS, không chỉnh luồng xử lý dữ liệu. */

@media (max-width:1180px){
    :root{
        --vtw-mobile-control-height:30px;
        --vtw-mobile-stat-height:45px;
        --vtw-mobile-radius:9px;
        --vtw-mobile-gap:6px;
    }

    html,body{
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
        font-size:14px!important;
    }

    body.is-guest .mobile-topbar,
    body.is-guest .mobile-menu-backdrop,
    body.is-guest .sidebar,
    body.is-guest .nav,
    body.is-guest .user-card,
    body.is-guest .nav-logout-bottom{
        display:none!important;
        visibility:hidden!important;
    }

    .main{
        width:100%!important;
        max-width:100%!important;
        padding:8px!important;
        overflow-x:hidden!important;
    }

    .card{
        border-radius:13px!important;
        padding:10px!important;
    }

    label{
        gap:4px!important;
        font-size:12px!important;
        line-height:1.15!important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    .form-control{
        height:var(--vtw-mobile-control-height)!important;
        min-height:var(--vtw-mobile-control-height)!important;
        max-height:var(--vtw-mobile-control-height)!important;
        padding:0 8px!important;
        border-radius:var(--vtw-mobile-radius)!important;
        font-size:13px!important;
        line-height:var(--vtw-mobile-control-height)!important;
        box-sizing:border-box!important;
    }

    textarea{
        min-height:58px!important;
        padding:6px 8px!important;
        border-radius:var(--vtw-mobile-radius)!important;
        font-size:13px!important;
        line-height:1.35!important;
    }

    button,
    .btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]{
        height:var(--vtw-mobile-control-height)!important;
        min-height:var(--vtw-mobile-control-height)!important;
        max-height:var(--vtw-mobile-control-height)!important;
        padding:0 9px!important;
        border-radius:var(--vtw-mobile-radius)!important;
        font-size:13px!important;
        line-height:1!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:4px!important;
        white-space:nowrap!important;
        box-sizing:border-box!important;
        vertical-align:middle!important;
    }

    .btn.small{
        height:var(--vtw-mobile-control-height)!important;
        min-height:var(--vtw-mobile-control-height)!important;
        padding:0 8px!important;
        font-size:12.5px!important;
    }

    .section-head,
    .task-head,
    .simple-task-head,
    .vtw-task-heading{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:8px!important;
        align-items:stretch!important;
        margin:0 0 8px!important;
        width:100%!important;
    }

    .vtw-task-heading-main{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto!important;
        align-items:center!important;
        gap:var(--vtw-mobile-gap)!important;
        width:100%!important;
        min-width:0!important;
        margin:0!important;
    }

    .vtw-task-heading h1,
    .vtw-task-heading-main h1{
        margin:0!important;
        min-width:0!important;
        font-size:14px!important;
        line-height:1.15!important;
        letter-spacing:-.15px!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .vtw-pdf-export-btn,
    .vtw-task-heading-main .vtw-pdf-export-btn{
        width:auto!important;
        min-width:102px!important;
        max-width:118px!important;
        height:var(--vtw-mobile-control-height)!important;
        min-height:var(--vtw-mobile-control-height)!important;
        padding:0 8px!important;
        font-size:12px!important;
        border-radius:var(--vtw-mobile-radius)!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    /* 3 ô thống kê đầu trang: cao đều 45px, không còn lệch cao thấp */
    .vtw-task-stats{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:var(--vtw-mobile-gap)!important;
        width:100%!important;
        max-width:100%!important;
        margin:0!important;
        align-items:stretch!important;
    }

    .vtw-task-stat-card{
        height:var(--vtw-mobile-stat-height)!important;
        min-height:var(--vtw-mobile-stat-height)!important;
        max-height:var(--vtw-mobile-stat-height)!important;
        padding:4px 6px!important;
        border-radius:12px!important;
        display:grid!important;
        grid-template-columns:17px minmax(0,1fr)!important;
        grid-template-rows:18px 17px!important;
        column-gap:4px!important;
        row-gap:0!important;
        align-items:center!important;
        justify-items:start!important;
        text-align:left!important;
        overflow:hidden!important;
        box-sizing:border-box!important;
    }

    .vtw-task-stat-card .vtw-stat-icon{
        grid-row:1 / 3!important;
        grid-column:1!important;
        width:17px!important;
        height:17px!important;
        font-size:14px!important;
        line-height:17px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        margin:0!important;
    }

    .vtw-task-stat-card strong{
        grid-column:2!important;
        grid-row:1!important;
        display:block!important;
        width:100%!important;
        margin:0!important;
        font-size:17px!important;
        line-height:18px!important;
        font-weight:400!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .vtw-task-stat-card span{
        grid-column:2!important;
        grid-row:2!important;
        display:block!important;
        width:100%!important;
        min-height:0!important;
        margin:0!important;
        font-size:12px!important;
        line-height:1.05!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .vtw-task-stat-card em{display:none!important;}

    .vtw-stat-week{
        background:#dcfce7!important;
        color:#065f46!important;
        border:1px solid #bbf7d0!important;
    }
    .vtw-stat-backlog{
        background:#fff!important;
        color:#dc2626!important;
        border:1px solid #fecaca!important;
    }
    .vtw-stat-rate{
        background:#eff6ff!important;
        color:#1d4ed8!important;
        border:2px solid #bfdbfe!important;
    }

    .vtw-stat-week *,
    .vtw-stat-backlog *,
    .vtw-stat-rate *{font-weight:400!important;}

    .task-layout,
    .task-layout-editor,
    .task-layout-simple{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:8px!important;
        width:100%!important;
        min-width:0!important;
    }

    .task-layout-simple .date-tabs.card,
    .date-tabs.card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:10px!important;
        overflow:hidden!important;
        position:relative!important;
        top:auto!important;
    }

    .date-tabs h2{
        margin:0 0 6px!important;
        font-size:15px!important;
        line-height:1.15!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .quick-date-links,
    .quick-date-links-3{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:var(--vtw-mobile-gap)!important;
        width:100%!important;
        margin:0 0 6px!important;
    }

    .quick-date-links .btn,
    .quick-date-links-3 .btn{
        width:100%!important;
        min-width:0!important;
    }

    .quick-date-custom{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto!important;
        gap:var(--vtw-mobile-gap)!important;
        align-items:end!important;
        width:100%!important;
        margin:0 0 8px!important;
    }

    .quick-date-custom label{
        min-width:0!important;
        margin:0!important;
    }

    .quick-date-custom input{
        width:100%!important;
        height:var(--vtw-mobile-control-height)!important;
        min-height:var(--vtw-mobile-control-height)!important;
        font-size:13px!important;
    }

    .quick-date-custom button{
        width:auto!important;
        min-width:82px!important;
        height:var(--vtw-mobile-control-height)!important;
    }

    .date-tab-scroll{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        column-count:2!important;
        column-gap:8px!important;
        column-fill:auto!important;
        gap:0!important;
        max-height:none!important;
        overflow:visible!important;
        padding:0!important;
    }

    .date-tab-scroll a{
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        width:100%!important;
        min-width:0!important;
        height:45px!important;
        min-height:45px!important;
        max-height:45px!important;
        padding:0 8px!important;
        margin:0 0 8px!important;
        border-radius:12px!important;
        box-sizing:border-box!important;
        break-inside:avoid!important;
        -webkit-column-break-inside:avoid!important;
        page-break-inside:avoid!important;
    }

    .date-tab-scroll a span{
        min-width:0!important;
        font-size:12px!important;
        line-height:1.1!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .date-tab-scroll a small{
        flex:0 0 auto!important;
        min-width:32px!important;
        height:20px!important;
        padding:0 5px!important;
        border-radius:999px!important;
        font-size:11px!important;
        line-height:20px!important;
        text-align:center!important;
    }

    .task-filter-simple,
    .filter-card{
        padding:8px!important;
        margin-bottom:8px!important;
    }

    .simple-filter-grid,
    .vtw-filter-grid-v196,
    .vtw-filter-grid-v196.no-user-selector{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important;
        align-items:end!important;
        width:100%!important;
    }

    .simple-filter-grid label,
    .vtw-filter-grid-v196 label{
        min-width:0!important;
        margin:0!important;
    }

    .week-filter-actions{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:6px!important;
        grid-column:1 / -1!important;
        width:100%!important;
    }

    .week-filter-actions .btn{
        width:100%!important;
        min-width:0!important;
        padding:0 5px!important;
        font-size:12px!important;
    }

    .filter-search{
        grid-column:1 / -1!important;
    }

    .assign-card{padding:10px!important;}
    .assign-card h2{font-size:15px!important;margin:0 0 8px!important;}
    .assign-form{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important;
        align-items:end!important;
    }
    .assign-form .assign-note{grid-column:1 / -1!important;}
    .assign-submit{grid-column:1 / -1!important;width:100%!important;}

    .vtw-day-card{
        padding:8px!important;
        border-radius:12px!important;
        margin-bottom:8px!important;
    }

    .vtw-day-title{
        display:flex!important;
        align-items:center!important;
        gap:6px!important;
        min-height:30px!important;
        margin:0 0 6px!important;
        font-size:15px!important;
        line-height:1.1!important;
        white-space:nowrap!important;
        overflow:hidden!important;
    }

    .vtw-zone-title{
        min-height:30px!important;
        height:30px!important;
        display:flex!important;
        align-items:center!important;
        padding:0 8px!important;
        margin:6px 0!important;
        border-radius:8px!important;
        font-size:13px!important;
        line-height:1!important;
    }

    .vtw-task-lines{
        display:grid!important;
        gap:5px!important;
    }

    .vtw-task-line{
        min-height:36px!important;
        padding:3px 4px!important;
        border-radius:9px!important;
        display:grid!important;
        grid-template-columns:22px 23px minmax(0,1fr) 30px!important;
        gap:4px!important;
        align-items:center!important;
        box-sizing:border-box!important;
    }

    .vtw-task-no{
        width:22px!important;
        min-width:22px!important;
        height:24px!important;
        line-height:24px!important;
        font-size:12px!important;
        text-align:center!important;
    }

    .vtw-check,
    .vtw-check-space{
        width:23px!important;
        min-width:23px!important;
        height:24px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        margin:0!important;
    }

    .vtw-check span,
    .word-check span,
    .task-check span{
        width:20px!important;
        height:20px!important;
        min-width:20px!important;
        min-height:20px!important;
        border-radius:5px!important;
        margin:0!important;
    }

    .vtw-check input:checked + span:after,
    .word-check input:checked + span:after,
    .task-check input:checked + span:after{
        left:3px!important;
        top:-3px!important;
        font-size:18px!important;
        line-height:20px!important;
    }

    .vtw-task-text-wrap{
        min-width:0!important;
        width:100%!important;
    }

    .vtw-task-input,
    .vtw-new-input,
    .js-new-task,
    .js-zone-add-input{
        width:100%!important;
        height:var(--vtw-mobile-control-height)!important;
        min-height:var(--vtw-mobile-control-height)!important;
        max-height:var(--vtw-mobile-control-height)!important;
        padding:0 8px!important;
        border-radius:8px!important;
        font-size:13px!important;
        line-height:var(--vtw-mobile-control-height)!important;
        box-sizing:border-box!important;
    }

    .vtw-delete,
    .icon-btn,
    .js-delete-task{
        width:30px!important;
        min-width:30px!important;
        max-width:30px!important;
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;
        padding:0!important;
        border-radius:8px!important;
        font-size:14px!important;
        line-height:1!important;
    }

    .vtw-view-only{
        width:30px!important;
        min-width:30px!important;
        height:30px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        overflow:hidden!important;
        font-size:0!important;
    }
    .vtw-view-only:before{content:'👁';font-size:13px!important;}

    .vtw-boss-note,
    .task-line-meta{
        font-size:10.5px!important;
        line-height:1.1!important;
        margin-top:2px!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .mobile-topbar{
        min-height:44px!important;
        height:44px!important;
        padding:5px 10px!important;
    }
    .mobile-menu-toggle,
    .mobile-profile-link{
        height:34px!important;
        min-height:34px!important;
    }
    .mobile-menu-toggle{width:34px!important;padding:0!important;font-size:22px!important;}
    .mobile-profile-link{width:34px!important;font-size:20px!important;}
}

@media (max-width:520px){
    .vtw-task-heading h1,
    .vtw-task-heading-main h1{font-size:13px!important;}
    .vtw-pdf-export-btn,
    .vtw-task-heading-main .vtw-pdf-export-btn{min-width:96px!important;max-width:108px!important;font-size:11.5px!important;}
    .vtw-task-stats{gap:5px!important;}
    .vtw-task-stat-card{padding:4px 5px!important;grid-template-columns:15px minmax(0,1fr)!important;}
    .vtw-task-stat-card .vtw-stat-icon{width:15px!important;height:15px!important;font-size:13px!important;line-height:15px!important;}
    .vtw-task-stat-card strong{font-size:16px!important;}
    .vtw-task-stat-card span{font-size:13px!important;}2
    .simple-filter-grid,.vtw-filter-grid-v196,.vtw-filter-grid-v196.no-user-selector{grid-template-columns:1fr!important;}
    .filter-search,.week-filter-actions{grid-column:1!important;}
    .assign-form{grid-template-columns:1fr!important;}
    .date-tab-scroll{column-gap:7px!important;}
    .date-tab-scroll a{padding:0 7px!important;margin-bottom:7px!important;}
    .date-tab-scroll a span{font-size:11.5px!important;}
    .date-tab-scroll a small{min-width:30px!important;font-size:10.5px!important;}
}
/* Fix mobile filter task - Văn Thế Web */
@media (max-width: 520px){

    .simple-filter-grid,
    .vtw-filter-grid-v196,
    .vtw-filter-grid-v196.no-user-selector{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important;
        align-items:end!important;
        width:100%!important;
    }

    .simple-filter-grid label,
    .vtw-filter-grid-v196 label{
        width:100%!important;
        min-width:0!important;
        margin:0!important;
        display:flex!important;
        flex-direction:column!important;
        gap:4px!important;
        font-size:14px!important;
        line-height:1.15!important;
    }

    .simple-filter-grid input,
    .simple-filter-grid select,
    .vtw-filter-grid-v196 input,
    .vtw-filter-grid-v196 select{
        width:100%!important;
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;
        padding:0 10px!important;
        border-radius:9px!important;
        font-size:14px!important;
        line-height:30px!important;
        box-sizing:border-box!important;
    }

    .filter-month,
    .filter-status{
        grid-column:auto!important;
    }

    .filter-search{
        grid-column:1 / -1!important;
        width:100%!important;
    }

    .filter-search input{
        width:100%!important;
    }

    .week-filter-actions{
        grid-column:1 / -1!important;
        width:100%!important;
    }

    .week-filter-actions .btn{
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;
        line-height:30px!important;
        padding:0 8px!important;
        font-size:13px!important;
        box-sizing:border-box!important;
    }

    .date-tab-scroll a span{
        font-size:14px!important;
    }
}
/* FIX MOBILE IPHONE 15 - TASK PAGE ONLY */
/* Dán cuối file: public/assets/css/style-mobile.css */

@media (max-width: 520px){

    /* 1. Fix khu vực tiêu đề + nút Xuất PDF */
    .vtw-task-heading{
        gap:6px!important;
        margin-bottom:8px!important;
    }

    .vtw-task-heading-main{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto!important;
        gap:6px!important;
        align-items:center!important;
        width:100%!important;
    }

    .vtw-task-heading-main h1{
        font-size:13px!important;
        line-height:30px!important;
        height:30px!important;
        margin:0!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .vtw-pdf-export-btn,
    .vtw-task-heading-main .vtw-pdf-export-btn{
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;
        width:auto!important;
        min-width:94px!important;
        max-width:104px!important;
        padding:0 7px!important;
        font-size:11.5px!important;
        line-height:30px!important;
        border-radius:9px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    /* 2. Fix 3 ô thống kê: đồng bộ cao 45px, không bị ô cao ô thấp */
    .vtw-task-stats{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:5px!important;
        width:100%!important;
        margin:0!important;
        align-items:stretch!important;
    }

    .vtw-task-stat-card{
        height:45px!important;
        min-height:45px!important;
        max-height:45px!important;
        padding:3px 5px!important;
        border-radius:12px!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
        display:grid!important;
        grid-template-columns:16px minmax(0,1fr)!important;
        grid-template-rows:20px 16px!important;
        column-gap:4px!important;
        row-gap:0!important;
        align-items:center!important;
        justify-items:start!important;
        text-align:left!important;
    }

    .vtw-task-stat-card.is-active-filter{
        outline:none!important;
        outline-offset:0!important;
        box-shadow:none!important;
    }

    .vtw-stat-rate{
        border-width:1px!important;
    }

    .vtw-task-stat-card .vtw-stat-icon{
        grid-row:1 / 3!important;
        grid-column:1!important;
        width:16px!important;
        height:16px!important;
        font-size:13px!important;
        line-height:16px!important;
        margin:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
    }

    .vtw-task-stat-card strong{
        grid-column:2!important;
        grid-row:1!important;
        width:100%!important;
        margin:0!important;
        font-size:16px!important;
        line-height:20px!important;
        font-weight:400!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .vtw-task-stat-card span{
        grid-column:2!important;
        grid-row:2!important;
        width:100%!important;
        margin:0!important;
        font-size:11px!important;
        line-height:14px!important;
        font-weight:400!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    /* 3. Fix nút Hôm qua / Hôm nay / Ngày mai */
    .quick-date-links-3{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:6px!important;
        margin-bottom:8px!important;
    }

    .quick-date-links-3 .btn{
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;
        padding:0 6px!important;
        font-size:13px!important;
        line-height:30px!important;
        border-radius:9px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
    }

    /* 4. Fix khu vực Xem theo ngày + Thêm Task */
    .quick-date-custom{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 92px!important;
        gap:6px!important;
        align-items:end!important;
        width:100%!important;
        margin:0 0 8px!important;
        padding:8px!important;
        border-radius:12px!important;
    }

    .quick-date-custom label{
        width:100%!important;
        min-width:0!important;
        margin:0!important;
        font-size:13px!important;
        line-height:1.15!important;
        display:flex!important;
        flex-direction:column!important;
        gap:5px!important;
    }

    .quick-date-custom input{
        width:100%!important;
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;
        padding:0 8px!important;
        font-size:13px!important;
        line-height:30px!important;
        border-radius:9px!important;
        box-sizing:border-box!important;
        -webkit-appearance:none!important;
        appearance:none!important;
    }

    .quick-date-custom button,
    .quick-date-custom .btn{
        width:92px!important;
        min-width:92px!important;
        max-width:92px!important;
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;
        padding:0 6px!important;
        font-size:13px!important;
        line-height:30px!important;
        border-radius:9px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:nowrap!important;
        box-sizing:border-box!important;
    }

    /* 5. Fix bộ lọc dưới: Tuần trước / Tuần này / Tuần sau */
    .task-filter-simple{
        padding:8px!important;
        border-radius:13px!important;
    }

    .week-filter-actions{
        grid-column:1 / -1!important;
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:6px!important;
        width:100%!important;
        margin:0!important;
    }

    .week-filter-actions .btn,
    .week-filter-actions .btn.small{
        width:100%!important;
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;
        padding:0 6px!important;
        font-size:13px!important;
        line-height:30px!important;
        border-radius:9px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:nowrap!important;
        box-sizing:border-box!important;
    }

    /* 6. Fix Xem theo tháng / năm 50% và Trạng thái 50% */
    .simple-filter-grid,
    .vtw-filter-grid-v196,
    .vtw-filter-grid-v196.no-user-selector{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:7px!important;
        align-items:end!important;
        width:100%!important;
    }

    .simple-filter-grid label,
    .vtw-filter-grid-v196 label{
        width:100%!important;
        min-width:0!important;
        margin:0!important;
        font-size:14px!important;
        line-height:1.15!important;
        display:flex!important;
        flex-direction:column!important;
        gap:5px!important;
    }

    .filter-month{
        grid-column:1 / 2!important;
        width:100%!important;
    }

    .filter-status{
        grid-column:2 / 3!important;
        width:100%!important;
    }

    .filter-search{
        grid-column:1 / -1!important;
        width:100%!important;
    }

    .simple-filter-grid input,
    .simple-filter-grid select,
    .vtw-filter-grid-v196 input,
    .vtw-filter-grid-v196 select{
        width:100%!important;
        height:30px!important;
        min-height:30px!important;
        max-height:30px!important;
        padding:0 8px!important;
        font-size:13px!important;
        line-height:30px!important;
        border-radius:9px!important;
        box-sizing:border-box!important;
        -webkit-appearance:none!important;
        appearance:none!important;
    }

    .simple-filter-grid select,
    .vtw-filter-grid-v196 select{
        background-position:right 8px center!important;
        padding-right:24px!important;
    }

    .filter-search input{
        width:100%!important;
    }

    /* 7. Fix danh sách ngày 2 cột: text dễ đọc hơn */
    .date-tab-scroll{
        column-count:2!important;
        column-gap:7px!important;
        width:100%!important;
    }

    .date-tab-scroll a{
        height:45px!important;
        min-height:45px!important;
        max-height:45px!important;
        padding:0 8px!important;
        margin:0 0 7px!important;
        border-radius:12px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        box-sizing:border-box!important;
        break-inside:avoid!important;
        -webkit-column-break-inside:avoid!important;
    }

    .date-tab-scroll a span{
        font-size:14px!important;
        line-height:1.1!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .date-tab-scroll a small{
        height:20px!important;
        min-height:20px!important;
        min-width:32px!important;
        padding:0 5px!important;
        font-size:11px!important;
        line-height:20px!important;
        border-radius:999px!important;
        text-align:center!important;
    }
}
/* Push Notification Mobile - Văn Thế Task */
@media (max-width:1180px){
    .mobile-topbar{
        grid-template-columns:44px 1fr 44px!important;
    }
    .mobile-push-bell{
        justify-self:center!important;
        width:auto!important;
        min-width:40px!important;
        height:34px!important;
        min-height:34px!important;
        padding:0 10px!important;
        border-radius:999px!important;
        background:#eaf2ff!important;
        color:#0b57d0!important;
        font-size:18px!important;
    }
    .mobile-push-bell.is-on{background:#dcfce7!important;color:#166534!important;}
    .mobile-push-bell.is-warn{background:#fee2e2!important;color:#991b1b!important;}
    .push-bell-btn [data-notification-badge]{
        position:absolute!important;
        top:-5px!important;
        right:-5px!important;
        min-width:18px!important;
        height:18px!important;
        padding:0 5px!important;
        border-radius:999px!important;
        background:#ef4444!important;
        color:#fff!important;
        font-size:11px!important;
        line-height:18px!important;
        align-items:center!important;
        justify-content:center!important;
        box-shadow:0 0 0 2px #fff!important;
    }
    .push-panel{
        margin:8px 10px 10px!important;
        padding:8px!important;
        border-radius:12px!important;
        background:#eef6ff!important;
        border:1px solid #bfdbfe!important;
    }
    .sidebar-push-bell{
        width:100%!important;
        height:32px!important;
        min-height:32px!important;
        padding:0 10px!important;
        border-radius:999px!important;
        font-size:13px!important;
        background:#dbeafe!important;
        color:#1d4ed8!important;
    }
    .sidebar-push-bell.is-on{background:#dcfce7!important;color:#166534!important;}
    .push-panel small{
        display:block!important;
        margin-top:4px!important;
        color:#64748b!important;
        font-size:11px!important;
        line-height:1.2!important;
        text-align:center!important;
    }
}
@media (max-width:1180px){.mobile-topbar{display:grid!important;align-items:center!important;}.mobile-profile-link{justify-self:end!important;}.mobile-menu-toggle{justify-self:start!important;}}


/* Account Push Notification Mobile - only profile page */
@media (max-width:1180px){
    .mobile-topbar{
        display:grid!important;
        grid-template-columns:44px minmax(0,1fr) 44px!important;
        align-items:center!important;
    }
    .mobile-menu-toggle{
        grid-column:1!important;
        justify-self:start!important;
    }
    .mobile-profile-link{
        grid-column:3!important;
        justify-self:end!important;
    }
    .account-push-card{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
        margin-top:12px!important;
        padding:12px!important;
        border-radius:16px!important;
    }
    .account-push-info{
        display:grid!important;
        grid-template-columns:40px minmax(0,1fr)!important;
        gap:10px!important;
        align-items:center!important;
    }
    .account-push-icon{
        width:40px!important;
        height:40px!important;
        border-radius:12px!important;
        font-size:21px!important;
    }
    .account-push-card h2{
        font-size:17px!important;
        line-height:1.2!important;
        margin:0 0 3px!important;
    }
    .account-push-card p{
        font-size:13px!important;
        line-height:1.35!important;
        margin:0!important;
    }
    .account-push-btn{
        width:100%!important;
        height:34px!important;
        min-height:34px!important;
        border-radius:999px!important;
        font-size:14px!important;
    }
}
/* Văn Thế Task - Push Toast Mobile */
@media (max-width: 768px){
    .vtw-push-toast{
        left:12px!important;
        right:12px!important;
        bottom:16px!important;
        width:auto!important;
        min-height:68px!important;
        border-radius:16px!important;
        padding:12px 40px 12px 12px!important;
    }

    .vtw-push-toast-icon{
        width:40px!important;
        height:40px!important;
        font-size:21px!important;
        border-radius:12px!important;
    }

    .vtw-push-toast-content strong{
        font-size:14px!important;
    }

    .vtw-push-toast-content span{
        font-size:13px!important;
    }
}
/* v1.9.40 - Push nhận diện rõ hơn */
.push-bell-btn.is-loading{background:#fef3c7!important;color:#92400e!important;cursor:wait!important;}
.push-bell-btn.is-error{background:#fee2e2!important;color:#991b1b!important;}
.sidebar-push-panel{margin-top:12px!important;margin-left:0!important;margin-right:0!important;}
.account-push-status{margin-top:5px!important;color:#2563eb!important;font-size:13px!important;line-height:1.35!important;}
.mobile-push-bell{grid-column:2!important;justify-self:center!important;}
.vtw-push-toast{position:fixed;right:22px;bottom:22px;z-index:999999;width:min(380px,calc(100vw - 32px));min-height:76px;display:flex;align-items:center;gap:12px;padding:14px 44px 14px 14px;border-radius:18px;background:#0f172a;color:#fff;box-shadow:0 18px 50px rgba(15,23,42,.28);cursor:pointer;animation:vtwPushToastIn .22s ease-out;}
.vtw-push-toast-icon{width:46px;height:46px;border-radius:14px;background:#fef3c7;color:#d97706;display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto;}
.vtw-push-toast-content{display:flex;flex-direction:column;gap:4px;min-width:0;}
.vtw-push-toast-content strong{font-size:16px;line-height:1.25;color:#fff;}
.vtw-push-toast-content span{font-size:14px;line-height:1.35;color:#dbeafe;}
.vtw-push-toast-close{position:absolute;top:8px;right:10px;width:26px;height:26px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:20px;line-height:24px;cursor:pointer;}
@keyframes vtwPushToastIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@media (max-width:1180px){.vtw-push-toast{left:10px!important;right:10px!important;bottom:14px!important;width:auto!important;min-height:68px!important;padding:12px 40px 12px 12px!important;border-radius:16px!important;}.vtw-push-toast-icon{width:40px!important;height:40px!important;border-radius:12px!important;font-size:21px!important;}.vtw-push-toast-content strong{font-size:14px!important;}.vtw-push-toast-content span{font-size:13px!important;}}

/* v1.9.41 - Reset thông báo nền khi trình duyệt mở tab khác */
.account-push-actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;justify-content:flex-end!important;}
.account-push-reset,.sidebar-push-reset{background:#f1f5f9!important;color:#334155!important;border:1px solid #cbd5e1!important;}
.account-push-reset:hover,.sidebar-push-reset:hover{background:#e2e8f0!important;}
.sidebar-push-reset{width:100%!important;margin-top:7px!important;height:34px!important;font-size:13px!important;}
.account-push-reset{height:38px!important;min-height:38px!important;padding:0 14px!important;border-radius:999px!important;font-size:13px!important;}
@media (max-width:1180px){.account-push-actions{width:100%!important;justify-content:stretch!important;}.account-push-actions .push-bell-btn{width:100%!important;}.account-push-reset{width:100%!important;height:36px!important;min-height:36px!important;}}

/* v1.9.43 - Mobile clean push UI */
.sidebar-push-panel{display:none!important;}
.brand-text{min-width:0!important;flex:1 1 auto!important;}
.brand-title-row{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;}
.brand-title-row .brand-title{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.brand-push-bell{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;flex:0 0 32px!important;padding:0!important;border-radius:999px!important;background:#1e293b!important;color:#fef3c7!important;border:1px solid rgba(255,255,255,.12)!important;}
.brand-push-bell.is-on{background:#dcfce7!important;color:#166534!important;border-color:#bbf7d0!important;}
.brand-push-bell.is-off{background:#dbeafe!important;color:#1d4ed8!important;border-color:#bfdbfe!important;}
.brand-push-bell.is-warn,.brand-push-bell.is-error{background:#fee2e2!important;color:#991b1b!important;border-color:#fecaca!important;}
.brand-push-bell [data-notification-badge],.mobile-push-bell [data-notification-badge]{box-shadow:0 0 0 2px #0f172a!important;top:-7px!important;right:-7px!important;}
.account-push-card-simple{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:14px!important;margin-top:14px!important;border:1px solid #bfdbfe!important;background:#f8fbff!important;}
.account-push-card-simple .account-push-info{display:block!important;}
.account-push-card-simple h2{font-size:17px!important;margin:0 0 3px!important;line-height:1.2!important;}
.account-push-card-simple p{font-size:13px!important;line-height:1.35!important;margin:0!important;color:#475569!important;}
.account-push-card-simple .account-push-btn{width:100%!important;height:38px!important;min-height:38px!important;border-radius:999px!important;font-size:14px!important;}
.account-push-icon,.account-push-actions,.account-push-reset{display:none!important;}

/* v1.9.43 - Mobile: dòng việc dài tự xuống dòng, chuông thương hiệu là link công việc */
.brand-title-link{color:#fff!important;text-decoration:none!important;display:block!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.brand-notification-link{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;}
.brand-notification-link [data-notification-badge]{position:absolute!important;top:-7px!important;right:-7px!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important;background:#ef4444!important;color:#fff!important;font-size:11px!important;line-height:18px!important;align-items:center!important;justify-content:center!important;box-shadow:0 0 0 2px #0f172a!important;}
.vtw-task-line{grid-template-columns:22px 23px minmax(0,1fr) auto 30px!important;gap:4px!important;align-items:start!important;}
.vtw-add-line{grid-template-columns:22px 23px minmax(0,1fr) 30px!important;}
.vtw-task-text-wrap{min-width:0!important;width:100%!important;}
textarea.vtw-task-input{display:block!important;width:100%!important;min-height:30px!important;height:auto!important;max-height:none!important;resize:none!important;overflow:hidden!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:break-word!important;line-height:1.25!important;padding:5px 6px!important;border-radius:8px!important;box-sizing:border-box!important;}
.vtw-task-line.important textarea.vtw-task-input{color:#ef1111!important;}
.vtw-task-line.normal textarea.vtw-task-input{color:#111827!important;}
.vtw-task-line.done textarea.vtw-task-input{color:#166534!important;background:transparent!important;}
.vtw-boss-note{align-self:center!important;justify-self:end!important;max-width:54px!important;min-width:0!important;font-size:9.5px!important;line-height:1.1!important;padding:2px 4px!important;margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;border-radius:999px!important;background:#fff3c4!important;color:#92400e!important;}
.vtw-boss-note-space{display:block!important;width:0!important;min-width:0!important;height:1px!important;overflow:hidden!important;}
.vtw-delete,.vtw-view-only{align-self:center!important;justify-self:end!important;}

/* v1.9.44 - CSS only: fix khoảng cách PC + task dài mobile không bị che */
@media (min-width:1181px){
    .app-shell{
        display:block!important;
        min-height:100vh!important;
    }
    .sidebar{
        position:fixed!important;
        left:0!important;
        top:0!important;
        bottom:0!important;
        width:260px!important;
        height:100vh!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        z-index:20!important;
    }
    .main{
        margin-left:260px!important;
        width:calc(100% - 260px)!important;
        max-width:none!important;
        min-width:0!important;
        min-height:100vh!important;
        overflow-x:hidden!important;
        padding-left:32px!important;
        padding-right:32px!important;
    }
    .task-layout-simple{
        display:grid!important;
        grid-template-columns:300px minmax(0,1fr)!important;
        column-gap:32px!important;
        row-gap:18px!important;
        width:100%!important;
        max-width:100%!important;
        align-items:start!important;
    }
    .task-layout-simple .date-tabs.card{
        position:sticky!important;
        top:18px!important;
        width:300px!important;
        min-width:300px!important;
        max-width:300px!important;
    }
    .task-layout-simple > section{
        min-width:0!important;
        width:100%!important;
        max-width:100%!important;
    }
    .task-layout-simple .filter-card,
    .task-layout-simple .vtw-word-board,
    .task-layout-simple .vtw-day-card{
        width:100%!important;
        max-width:100%!important;
    }
}

@media (max-width:1180px){
    .vtw-task-line{
        display:grid!important;
        grid-template-columns:22px 26px minmax(0,1fr) minmax(72px,84px) 32px!important;
        gap:5px!important;
        align-items:start!important;
        width:100%!important;
        min-width:0!important;
        overflow:visible!important;
    }
    .vtw-add-line{
        grid-template-columns:22px 26px minmax(0,1fr) 32px!important;
    }
    .vtw-task-no,
    .vtw-check,
    .vtw-delete,
    .vtw-view-only{
        align-self:start!important;
        margin-top:4px!important;
    }
    .vtw-task-text-wrap{
        min-width:0!important;
        width:100%!important;
        max-width:100%!important;
        overflow:visible!important;
    }
    textarea.vtw-task-input{
        width:100%!important;
        min-width:0!important;
        min-height:50px!important;
        height:auto!important;
        max-height:none!important;
        field-sizing:content!important;
        overflow:visible!important;
        white-space:pre-wrap!important;
        overflow-wrap:anywhere!important;
        word-break:break-word!important;
        line-height:1.28!important;
        padding:5px 6px!important;
        border-radius:8px!important;
        box-sizing:border-box!important;
    }
    .vtw-boss-note{
        max-width:84px!important;
        min-width:72px!important;
        width:auto!important;
        align-self:start!important;
        justify-self:end!important;
        margin-top:6px!important;
        padding:2px 5px!important;
        font-size:9.3px!important;
        line-height:1.1!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        border-radius:999px!important;
        background:#fff3c4!important;
        color:#92400e!important;
    }
    .vtw-delete,
    .vtw-view-only{
        justify-self:end!important;
        width:30px!important;
        min-width:30px!important;
        height:30px!important;
        min-height:30px!important;
    }
}

@media (max-width:520px){
    .vtw-task-line{
        grid-template-columns:20px 24px minmax(0,1fr) minmax(66px,76px) 30px!important;
        gap:4px!important;
    }
    .vtw-add-line{
        grid-template-columns:20px 24px minmax(0,1fr) 30px!important;
    }
    textarea.vtw-task-input{
        min-height:54px!important;
        font-size:14px!important;
        line-height:1.3!important;
    }
    .vtw-boss-note{
        min-width:66px!important;
        max-width:76px!important;
        font-size:8.8px!important;
        padding:2px 4px!important;
    }
}


/* v1.9.45 - ngày có nút xóa + form xem ngày cân 2 cột + mobile không che chữ */
.quick-date-custom{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 122px!important;
    align-items:end!important;
    gap:8px!important;
}
.quick-date-custom label{
    min-width:0!important;
    width:100%!important;
    font-size:14px!important;
    line-height:1.25!important;
}
.quick-date-custom input[type="date"]{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    font-size:15px!important;
    padding:7px 10px!important;
}
.quick-date-custom .btn,
.quick-date-custom .btn.small{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 10px!important;
    font-size:14px!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
}
.date-tab-scroll{
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
}
.date-tab-item{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 32px!important;
    gap:6px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    margin:2px 0!important;
}
.date-tabs .date-tab-main{
    margin:0!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:8px 10px!important;
    min-height:38px!important;
    border-radius:12px!important;
}
.date-tabs .date-tab-main span{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.date-tab-delete,
.date-tab-delete-spacer{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
}
.date-tab-delete{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:10px!important;
    background:#fee2e2!important;
    color:#b91c1c!important;
    font-size:14px!important;
    cursor:pointer!important;
    padding:0!important;
    opacity:.82!important;
}
.date-tab-delete:hover{background:#fecaca!important;opacity:1!important;}
.date-tab-delete.loading{opacity:.55!important;pointer-events:none!important;}
.date-tab-delete-spacer{display:block!important;}

@media(min-width:1181px){
    .task-layout-simple{
        grid-template-columns:320px minmax(0,1fr)!important;
        column-gap:34px!important;
    }
    .task-layout-simple .date-tabs.card{
        width:320px!important;
        min-width:320px!important;
        max-width:320px!important;
    }
    .quick-date-custom{
        grid-template-columns:minmax(0,1fr) 118px!important;
    }
}

@media(max-width:1180px){
    .quick-date-custom{
        grid-template-columns:minmax(0,1fr) 116px!important;
        gap:7px!important;
    }
    .quick-date-custom label{font-size:14px!important;}
    .quick-date-custom input[type="date"]{height:42px!important;font-size:15px!important;}
    .quick-date-custom .btn,.quick-date-custom .btn.small{height:42px!important;min-height:42px!important;font-size:14px!important;}
    .date-tab-item{grid-template-columns:minmax(0,1fr) 34px!important;gap:7px!important;margin:4px 0!important;}
    .date-tabs .date-tab-main{min-height:42px!important;padding:8px 10px!important;}
    .date-tab-delete,.date-tab-delete-spacer{width:34px!important;min-width:34px!important;height:34px!important;}

    .vtw-task-line{
        grid-template-columns:20px 24px minmax(0,1fr) 30px!important;
        grid-template-rows:auto auto!important;
        align-items:start!important;
        column-gap:5px!important;
        row-gap:2px!important;
        min-height:54px!important;
        overflow:visible!important;
    }
    .vtw-add-line{
        grid-template-columns:20px 24px minmax(0,1fr) 30px!important;
        grid-template-rows:auto!important;
        min-height:34px!important;
    }
    .vtw-task-no{grid-column:1!important;grid-row:1 / span 2!important;}
    .vtw-check{grid-column:2!important;grid-row:1 / span 2!important;}
    .vtw-task-text-wrap{grid-column:3!important;grid-row:1!important;min-width:0!important;overflow:visible!important;}
    textarea.vtw-task-input{
        min-height:38px!important;
        height:auto!important;
        max-height:none!important;
        overflow:hidden!important;
        white-space:pre-wrap!important;
        overflow-wrap:anywhere!important;
        word-break:break-word!important;
        line-height:1.32!important;
    }
    .vtw-boss-note{
        grid-column:3!important;
        grid-row:2!important;
        justify-self:start!important;
        align-self:start!important;
        min-width:0!important;
        max-width:130px!important;
        width:auto!important;
        margin:0!important;
        font-size:9.5px!important;
        line-height:1.1!important;
        padding:2px 6px!important;
    }
    .vtw-delete,.vtw-view-only{
        grid-column:4!important;
        grid-row:1 / span 2!important;
        justify-self:end!important;
        align-self:center!important;
        margin-top:0!important;
    }
    .vtw-add-line .vtw-new-input{
        grid-column:3!important;
        min-width:0!important;
    }
}

@media(max-width:520px){
    .quick-date-custom{grid-template-columns:minmax(0,1fr) 104px!important;gap:6px!important;}
    .quick-date-custom input[type="date"]{font-size:14px!important;padding-left:8px!important;padding-right:8px!important;}
    .quick-date-custom .btn,.quick-date-custom .btn.small{font-size:13.5px!important;padding:0 8px!important;}
    .date-tab-item{grid-template-columns:minmax(0,1fr) 32px!important;gap:6px!important;}
    .date-tab-delete,.date-tab-delete-spacer{width:32px!important;min-width:32px!important;height:32px!important;}
    .vtw-task-line{grid-template-columns:20px 24px minmax(0,1fr) 30px!important;}
    .vtw-boss-note{max-width:116px!important;font-size:9px!important;}
}