@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/inter/inter-400.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/inter/inter-400-vietnamese.woff2) format("woff2");
    unicode-range:
        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
        U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
        U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/inter/inter-500.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/inter/inter-500-vietnamese.woff2) format("woff2");
    unicode-range:
        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
        U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
        U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/inter/inter-600.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/inter/inter-600-vietnamese.woff2) format("woff2");
    unicode-range:
        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
        U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
        U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/inter/inter-700.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/inter/inter-700-vietnamese.woff2) format("woff2");
    unicode-range:
        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
        U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
        U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/fonts/inter/inter-900.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(/fonts/inter/inter-900-vietnamese.woff2) format("woff2");
    unicode-range:
        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
        U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
        U+1EA0-1EF9, U+20AB;
}

body {
    font-family:
        "Inter",
        "Segoe UI",
        system-ui,
        -apple-system,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
}

.hero-bg {
    background-image: url(/img/hero-building.png);
}

.gradient-primary {
    background-image: linear-gradient(
        175deg,
        color-mix(in oklch, var(--color-primary) 55%, black) 10%,
        var(--color-primary) 95%
    );
}

.header-shadow {
    box-shadow: 0px 2px 6px rgba(0, 76, 190, 0.15);
}

.onboarding-flag-stripe {
    background-image: linear-gradient(
        90deg,
        #c8102e 0%,
        #cc7a2a 50%,
        #c99417 100%
    );
}

.onboarding-banner-subtitle {
    color: #f5c842;
}
.recipient-card-title {
    flex-grow: 0;
}

.alert-primary-tint {
    --alert-color: color-mix(in oklab, var(--color-primary) 10%, white);
    border-color: #dbeafe;
    color: var(--color-primary);
}

.alert-warning-tint {
    --alert-color: color-mix(in oklab, var(--color-warning) 10%, white);
    border-color: color-mix(in oklab, var(--color-warning) 20%, white);
    color: var(--color-base-content);
}

[data-visible="false"] {
    display: none;
}

.collapse-item-chevron {
    transition: transform 0.2s ease;
}
.collapse-item-title[data-open="true"] .collapse-item-chevron {
    transform: rotate(180deg);
}

.collapse-item-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}
.collapse-item-content[data-open="true"] {
    grid-template-rows: 1fr;
}
.collapse-item-inner {
    overflow: hidden;
    min-height: 0;
}

[data-editable="true"] {
    cursor: pointer;
}

.tabs > .tab:checked {
    color: var(--color-primary);
    font-weight: 600;
}

.searchable-select .dropdown-content {
    display: none;
}
.searchable-select[data-open="true"] .dropdown-content {
    display: block;
}
/* Auto-flip len tren khi khong du cho ben duoi viewport - xem SearchableSelect._positionPanel().
   Mac dinh panel dung top-full/mt-1 (TEMPLATE trong SearchableSelect.js) mo XUONG duoi trigger. */
.searchable-select .dropdown-content.ss-open-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.searchable-select [data-js="ss-trigger"],
.date-range-trigger {
    border-color: color-mix(
        in oklab,
        var(--color-base-content) 20%,
        transparent
    );
}
.searchable-select:has(> [data-js="ss-value"].input-error)
    [data-js="ss-trigger"] {
    border-color: var(--color-error);
}
/* SearchableSelect.setDisabled() - giong quy uoc input/ngay ban hanh disabled khac trong app. */
.searchable-select[data-disabled="true"] [data-js="ss-trigger"] {
    background-color: var(--color-base-200);
    border-color: color-mix(
        in oklab,
        var(--color-base-content) 10%,
        transparent
    );
    color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
    pointer-events: none;
    cursor: not-allowed;
}
/* input/select disabled mac dinh cua DaisyUI gan nhu mat vien tren nen bg-base-200 cua trang -
 * cho vien/nen ro rang, dong bo voi SearchableSelect disabled o tren. */
.input:disabled,
.select:disabled {
    background-color: var(--color-base-200);
    border-color: color-mix(
        in oklab,
        var(--color-base-content) 10%,
        transparent
    );
}
.searchable-select [data-js="ss-list"] li > a[data-focus="true"] {
    background-color: var(--color-base-200);
}
[data-state="loading"] .content-section {
    display: none;
}
[data-state="loading"] .skeleton-section {
    display: block;
}
/* .skeleton-section co them class "flex" (vd published-detail.html) can giu display:flex de
 * gap-* con tac dung - rule tren se lam mat khoang cach giua cac khoi skeleton neu khong co dong nay. */
[data-state="loading"] .skeleton-section.flex {
    display: flex;
}
[data-state="done"] .skeleton-section {
    display: none;
}
[data-state="done"] .content-section {
    display: block;
}

.content-section-always {
    display: block;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-base-300) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--color-base-300);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--color-base-content) 30%, transparent);
    background-clip: padding-box;
}

#sidebar .btn {
    background-color: transparent;
    border: none;
    color: inherit;
}
#sidebar .btn:hover {
    background-color: color-mix(in oklch, white 12%, transparent);
    border: none;
    box-shadow: none;
}

#sidebar {
    width: 16rem;
    transition: width 0.2s ease;
}
#sidebar .skeleton {
    background-color: color-mix(in oklch, white 5%, transparent);
    background-image: linear-gradient(
        105deg,
        transparent 0% 40%,
        color-mix(in oklch, white 8%, transparent) 50%,
        transparent 60% 100%
    );
}
#sidebar[data-collapsed="true"] {
    width: 3.5rem;
    overflow: visible;
}
#sidebar[data-collapsed="true"] .sidebar-label {
    display: none;
}
#sidebar[data-collapsed="false"] .tooltip::before,
#sidebar[data-collapsed="false"] .tooltip::after {
    display: none !important;
}

#sidebar[data-collapsed="true"] .menu > li:has(> details)::before,
#sidebar[data-collapsed="true"] .menu > li:has(> details)::after {
    display: none !important;
}

/* Tooltip luôn hiện trên header dính (sticky). */
.tooltip:before,
.tooltip:after,
.tooltip .tooltip-content {
    z-index: 20;
}
#sidebar[data-collapsed="true"] .menu {
    overflow: visible !important;
}

#sidebar[data-collapsed="true"] #sidebar-menu-wrap {
    overflow: visible !important;
}
.flyout-menu {
    padding-right: 24px;
}
#sidebar[data-collapsed="false"] .flyout-menu {
    position: relative;
}

#sidebar[data-collapsed="false"] .flyout-menu::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background-color: color-mix(in oklch, white 40%, transparent);
}
#sidebar[data-collapsed="false"] .flyout-title {
    display: none;
}
#sidebar[data-collapsed="true"] .menu > li {
    position: relative;
}
#sidebar[data-collapsed="true"]
    .menu
    > li
    > details:not([open])
    > .flyout-menu {
    display: none;
}
#sidebar[data-collapsed="true"] .menu > li > details[open] > .flyout-menu {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 100;
    min-width: 13rem;
    padding: 0.5rem;
    margin-left: 6px;
    background-color: var(--color-neutral);
    border-radius: var(--radius-box, 0.5rem);
    box-shadow:
        0 4px 20px oklch(0% 0 0 / 0.25),
        0 0 0 1px oklch(0% 0 0 / 0.1);
}
#sidebar[data-collapsed="true"] .flyout-menu .sidebar-label {
    display: revert;
}
#sidebar[data-collapsed="true"] .menu details > summary::after,
#sidebar[data-collapsed="true"] .menu details > summary::marker,
#sidebar[data-collapsed="true"]
    .menu
    details
    > summary::-webkit-details-marker {
    display: none !important;
}

#sidebar .menu {
    width: 100%;
    overflow-x: hidden;
    flex-wrap: nowrap;
}
#sidebar .menu li {
    display: block;
    width: 100%;
    min-width: 0;
}
#sidebar .menu li > details,
#sidebar .menu li > details > ul {
    width: 100%;
    min-width: 0;
}

#sidebar .menu-title {
    color: color-mix(in oklch, var(--color-neutral-content) 50%, transparent);
}

#sidebar .menu li > a,
#sidebar .menu li > details > summary {
    color: var(--color-neutral-content);
}
#sidebar .menu li > a:hover,
#sidebar .menu li > details > summary:hover {
    background-color: color-mix(in oklch, white 12%, transparent);
    color: var(--color-neutral-content);
}
#sidebar .menu li > a[data-active="true"],
#sidebar .menu li > a[data-active="true"]:hover,
#sidebar .menu li > a[data-active="true"]:focus,
#sidebar .menu li > a[data-active="true"]:focus-visible {
    background-color: color-mix(
        in oklch,
        var(--color-primary) 35%,
        transparent
    ) !important;
    color: var(--color-neutral-content) !important;
    box-shadow: none !important;
    outline-style: none !important;
}

#sidebar .menu li > details:has(a[data-active="true"]) > summary {
    color: var(--color-neutral-content);
    background-color: color-mix(
        in oklch,
        var(--color-primary) 35%,
        transparent
    );
}

#sidebar[data-collapsed="true"] .menu > li > a,
#sidebar[data-collapsed="true"] .menu > li > details > summary,
#sidebar[data-collapsed="true"] > a {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

#sidebar-overlay {
    display: none;
}
#sidebar-overlay[data-visible="true"] {
    display: block;
}

/* Chừa thanh cử chỉ/notch (iOS home indicator) */
#bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
}
/* JS chỉ ghi data-*, CSS quyết định hiển thị - xem js/layout/bottomNav.js + bottomNavInit.js */
#bottom-nav[data-page-hidden="true"],
#bottom-nav[data-hidden-by-sidebar="true"] {
    display: none;
}
.bottom-nav-link {
    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
}
.bottom-nav-link[data-active="true"] {
    color: var(--color-primary);
}

@media (max-width: 1023px) {
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 30;
    }
    #sidebar[data-collapsed="true"] {
        width: 0;
        overflow: hidden;
    }
}

#toast-container > div {
    box-sizing: content-box !important;
    padding: 15px 32px 15px 50px !important;
    width: 300px !important;
    background-position: 15px 15px !important;
}
#toast-container .toast-close-button {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    border: 0 !important;
    background: none !important;
}
#signature-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ms-tag {
    max-width: 48%;
}

* {
    -webkit-tap-highlight-color: transparent;
}
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:hover {
    transition: background-color 1s 9999s;
    -webkit-text-fill-color: var(--color-base-content);
    caret-color: var(--color-base-content);
}

/* Cong tac 2 lua chon "Loai van ban di" (create-draft/edit-draft) - style radio an bang label
   dang nut, khong dung JS doi class Tailwind theo quy uoc du an. */
#document-kind-group label:has(input:checked) {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
    border-color: var(--color-primary);
}

/* Dropzone tai file - phan hoi truc quan khi hover/keo tha, khong co san trong Tailwind/DaisyUI. */
.dropzone {
    transition:
        border-color 0.15s,
        background-color 0.15s;
    will-change: border-color, background-color;
}
.dropzone:hover {
    border-color: color-mix(
        in oklab,
        var(--color-primary) 40%,
        var(--color-base-300)
    );
}
.dropzone[data-dragover="true"] {
    border-color: var(--color-primary);
    background-color: color-mix(in oklab, var(--color-primary) 6%, transparent);
}

.org-tree-row {
    transition: background-color 0.15s ease;
}
.org-tree-row[data-open="true"] {
    background-color: var(--color-base-200);
}
.org-tree-toggle-btn svg {
    transition: transform 0.15s ease;
}
.org-tree-row[data-open="true"] .org-tree-toggle-btn svg {
    transform: rotate(90deg);
}
.org-tree-row-flash {
    animation: org-tree-row-flash 1.5s ease-out;
}
@keyframes org-tree-row-flash {
    0%, 40% {
        background-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
    }
    100% {
        background-color: transparent;
    }
}

.recipient-search-mode-btn[data-active="true"] {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
    border-color: var(--color-primary);
}