:root {
    --transition-speed: 0.8s;
    --borderALL: 16px;
    --borderBOT: 0 0 16px 16px;
    --padding: 20px;
    --paddingM: 6px;
    --maxwidthJS: 450px;
}

body {
    --popup-bg: #fff;
    --popup-bgo: rgba(255, 255, 255, 0.86);
    --popup-coloro: rgba(0, 0, 0, 0.86);
    --popup-color: #222;
    --popup-buttonbg: lightgray;
    width: calc(100% - var(--padding)*2);
    padding: var(--padding);
    display: block;
    font-family: Arial;
    background-image: var(--transition-speed) ease-in-out;
    overflow-x: hidden;
    background-color: #e5e5f7;
    opacity: 1;
    background-image: radial-gradient(#cacaca 0.6px, #e5e5f7 0.6px);
    background-size: 18px 18px;
}

body.dark-theme {
    --popup-bgo: rgba(0, 0, 0, 0.86);
    --popup-coloro: rgba(255, 255, 255, 0.86);
    --popup-bg: #222;
    --popup-color: #eee;
    --popup-buttonbg: #3c3c3c;
    background-image: radial-gradient(#404040 0.9px, #000000 0.9px);
    background-size: 18px 18px;
    background-color: #000000;
}

body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
    color: var(--popup-color);
    background: var(--popup-buttonbg);
}

body.dark-theme .toolbar {
    background-color: rgba(50, 50, 50, 0.95);
    color: #E0E0E0;
}

body.dark-theme .note {
    color: #E0E0E0;
}

body.dark-theme .note-wrapper {
    border-color: #444;
}

body.dark-theme .note-action-btn img,
body.dark-theme .toolbar button img {
    filter: invert(1);
}



@font-face {
    font-family: 'Arial';
    src: url('/Font_SFProRoundedR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TieuDe';
    src: url('/Font_GoogleSans.otf');
}

@font-face {
    font-family: 'InDam';
    src: url('/Font_FSAhkio.otf');
}

@font-face {
    font-family: 'VietTay';
    src: url('/Font_SVNPaula.otf');
}

#font-container {
    position: relative;
    display: inline-block;
}

#font-menu {
    position: absolute;
    width: 368px;
    top: 100%;
    left: 0;
    background: var(--popup-bg);
    color: var(--popup-color);
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    z-index: 100;
    display: flex;
    /* Hiển thị ngang */
    justify-content: space-between;
    font-family: sans-serif;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#font-container:hover #font-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#font-menu div {
    flex: 1;
    text-align: center;
    padding: 8px 0px;
    cursor: pointer;
    transition: background 0.2s;
    border-right: 1px solid #eee;
    white-space: nowrap;
}

#font-menu div:last-child {
    border-right: none;
}

#font-menu div:hover {
    background-color: darkgray;
}

.Form_Login {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.Form_Login2 {
    display: table-cell;
    vertical-align: middle;
}

.Form_Login3 {
    background: -webkit-linear-gradient(top, #7579ff, #b224ef);
    width: 500px;
    border-radius: 16px;
    overflow: hidden;
    padding: 55px 55px 37px 55px;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    /* Whatever width you want */
}

.Form_Login3A {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.6px);
    -webkit-backdrop-filter: blur(1.6px);
    border: 1px solid rgba(255, 255, 255, 0.27);
    overflow: hidden;
    padding: 55px 55px 37px 55px;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}

textarea {
    font-family: monospace;
    font-size: 14px;
}

.color-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
    border: 2px solid #ccc;
}

.color-circle:hover {
    border-color: #000;
}

h1 {
    color: yellow;
    font-size: 22px;
}
h2{
    font-size: 200%;
}
p {
    margin-top: 3px;
    margin: inherit;
}

.HeaderWeb {
    padding-bottom: 10px;
}

.toolbar {
    position: absolute;
    top: -36px;
    /* nổi lên trên note */
    left: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 6px;
    border-radius: 8px;
    display: none;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    justify-content: center;
    align-items: center;
}

.toolbar button {
    background: none;
    border: none;
    vertical-align: middle;
}

.toolbar img {
    width: 26px;
    height: auto;
}

.toolbar button:hover img {
    filter: contrast(160%);
    transition: opacity var(--transition-speed),
    transform var(--transition-speed),
    background-color var(--transition-speed),
    filter var(--transition-speed) ease-in-out;
}

/* Toolbar nổi khi cuộn mất */
.floating-toolbar {
    position: fixed;
    border-radius: 0 0 8px 8px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: var(--note-bg, #fff);
    /* để phù hợp dark/light */
    transition: all var(--transition-speed, 0.3s);
}

.note-wrapper.editing .toolbar {
    min-height: 36px;
}

.note-wrapper.dimmed {
    opacity: 1;
    filter: brightness(1) blur(1px) grayscale(1);
    transition: filter var(--transition-speed) ease-in-out;
    pointer-events: none;
    /* tránh click nhầm vào note khác */
}

.note-wrapper {
    width: calc((100% - var(--padding)*2) / 3);
    max-width: var(--maxwidthJS);
    /* để giới hạn width note cho độ phân giải cao hơn thì tự động chia cột */
    border: 0;
    border-radius: var(--borderALL);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.05) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.01) 0px 0px 0px 1px inset;
    break-inside: avoid;
    background: transparent;
    margin-bottom: 16px;
    box-sizing: border-box;
    /* ✅ dòng này nên giữ */
    /* ngăn không cho các note được isotope khởi tạo xếp đè lên nhau masonry: { gutter: margin 16 thì gutter 12 là đẹp */
        transition:
        opacity var(--transition-speed),
        background-color var(--transition-speed),
        filter var(--transition-speed) ease-in-out;
    }

    .note-wrapper.dragging {
        transition: none !important;
        z-index: 10;
        /* 👁 Làm nổi note lên trên */
        /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */
        box-shadow: 0px 1px 2px 0px rgba(0, 255, 255, 0.7),
        1px 2px 4px 0px rgba(0, 255, 255, 0.7),
        2px 4px 8px 0px rgba(0, 255, 255, 0.7),
        2px 4px 16px 0px rgba(0, 255, 255, 0.7);
    */ transform: scale(1.2);
        /* 👁 Tăng nhẹ kích thước */
    }

    .note-wrapper.hiding {
        opacity: 0;
        transform: scale(0.8);
    }

    .note-wrapper.hidden {
        display: none;
    }

    .note-wrapper:last-child {
        margin-bottom: 10px;
        /* trùng với padding-bottom trên */
    }

    .note-wrapper.wide {
        grid-column: span 2;
        width: calc(66.666% - 12px);
        /* 2 cột */
        /* tùy hệ thống của bạn */
        transition: width var(--transition-speed, 0.5s);
    }

/* Fullscreen note chiếm 2/3 bên trái */
.note-wrapper.fullscreen-note {
    position: fixed;
    top: 50%;
    left: 0;
    width: 66.666%;
    height: 80%;
    transform: translateY(-50%);
    z-index: 1001;
    background: var(--popup-bg, #fff);
    padding: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: auto;
    border-radius: 12px;
}

form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.inputCSS {
    font-size: 16px;
    line-height: 1.2;
    display: block;
    width: 50%;
    height: 45px;
    background: #fff;
    border-radius: 10px;
    border: none;
    padding: 0 8px 0 8px;
    margin-right: 8px;
}

.submitCSS {
    display: block;
    width: max-content;
    padding: 0 10px;
    max-width: 160px;
    height: 45px;
    border-radius: 6px;
    border: none;
    background-color: var(--popup-buttonbg);
    color: var(--popup-color);
    top: 0;
    left: 0;
    opacity: 1;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    margin: 0 2px;
}

.submitCSS:hover {
    background-color: var(--popup-color);
    color: var(--popup-buttonbg);
}

.input-color-css {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#.input-color-css::-webkit-color-swatch {
    border-radius: 12px;
    border: none;
}

#.input-color-css::-moz-color-swatch {
    border-radius: 12px;
    border: none;
}

.profile-box {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.avatar-wrapper {
    position: relative;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
    transition: transform 0.3s ease;
}

.avatar-name {
    font-size: 12px;
    margin-top: 0;
    text-align: center;
    color: var(--popup-color);
}

/* ✅ Nút xổ ra bên phải khi hover */
.avatar-buttons {
    position: absolute;
    top: 45%;
    left: 100%;
    transform: translate(-20px, -50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-speed) ease;
    z-index: 11;
    background: var(--popup-bg);
    padding: 6px;
    border-radius: 6px;
}

.avatar-buttons img {
    width: auto;
    height: 48px;
}

.avatar-buttons button {
    border: none;
    width: 48px;
    height: 48px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
    background: none;
}

.avatar-buttons button:hover {
    transform: scale(1.1);
    /* transition: all var(--transition-speed) ease-in-out; */
}

.avatar-wrapper:hover .avatar-buttons {
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
}

.note[readonly] {
    pointer-events: none;
    user-select: none;
}

.note-grid {
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}

.color-circle {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    margin-right: 5px;
    border: 1px solid #888;
    transition: background-color var(--transition-speed);
}

#note-container {
    padding-bottom: 10px;
    /* hoặc chiều cao float-cart + thêm chút khoảng cách */
}

.note {
    min-height: 80px;
    width: 100%;
    min-width: 0;
    padding: 10px;
    transition: color var(--transition-speed) ease-in-out;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
    outline: none;
    border: none;
}

.note img {
    border-radius: var(--borderALL);
    object-fit: cover !important;
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: 68vh;
    display: block;
    margin: 0 0 8px 0;
}

.note .resizable-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
}

.note-wrapper.editing .note {
    max-width: 100vw;
    /* full chiều ngang màn hình */
}

.add-note-btn {
    font-family: inherit;
    margin-top: 40px;
    background: none;
    color: var(--popup-color);
    border: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.edit-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: white;
    border: none;
    border-radius: 100%;
    padding: 6px 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed) ease-in-out;
}

/* Khi hover vào note-wrapper thì hiện nút edit */
.note-wrapper:hover .edit-btn {
    opacity: 1;
    pointer-events: auto;
}

.note-action-btn {
    border: none;
    border-radius: 50%;
    padding: 6px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, background-color 0.3s, opacity var(--transition-speed);
    opacity: 0;
    pointer-events: none;
    background-color: var(--popup-bg);
    position: absolute;
    bottom: 10px;
    z-index: 10;
}

.note-action-btn img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Vị trí từng nút nếu cần */
.fullscreen-btn {
    right: 50px;
}

.share-btn {
    right: 90px;
}

.relate-btn {
    right: 130px;
}

/* Khi hover mới hiện */
.note-wrapper:hover .note-action-btn {
    opacity: 1;
    pointer-events: auto;
}

.note-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: var(--borderALL) !important;
    /* width: 66.666vw;
    max-width: 66vw;*/
    margin: var(--padding);
    width: calc(100% - var(--padding)*2);
    max-width: 100vw;
    height: 100vh;
    background-color: var(--popup-bg, white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    overflow-y: auto;
    scrollbar-width: none;
    background-image: url("https://www.transparenttextures.com/patterns/brushed-alum-dark.png");
    background-blend-mode: soft-light;
    line-height: 1.5;
    font-size: 1.1rem;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE & Edge */
    padding: var(--padding);
    transition:
    width var(--transition-speed, 0.5s),
    height var(--transition-speed, 0.5s),
    top var(--transition-speed, 0.5s),
    left var(--transition-speed, 0.5s),
    background-color var(--transition-speed, 0.5s),
    box-shadow var(--transition-speed, 0.5s),
    transform var(--transition-speed, 0.5s);
}

.note-fullscreen img {
    max-height: 86vh !important;
    display: block;
    margin: 0 auto;
}

.note-dimmed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--popup-bgo);
    z-index: 9998;
    transition: background 0.5s ease;
}

/* Cho .note bên trong tự cuộn nếu quá dài */
.note-fullscreen .note {
    max-height: none;
    overflow-y: auto;
    min-height: 100%;
    max-width: 100%;
}

.note-truncated {
    position: relative;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8; /* số dòng */
  overflow: hidden;
    /*max-height: 600px;
    tùy chỉnh theo font-size để đủ chứa ~75 từ */
    overflow: hidden;
}

.note-truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.5em;
    background: linear-gradient(to bottom, transparent, var(--popup-bg, white));
    border-radius: var(--borderBOT);
}

.save-cancel {
    position: relative;
    bottom: 0px;
    right: auto;
    padding: 0px;
    cursor: pointer;
}

.save-cancel img {
    width: 26px;
    height: auto;
    padding: 0 1px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
}

.save-cancel button {
    background: none;
    border: 0;
    padding: 0;
}

#color-picker {
    display: flex;
    margin-left: 10px;
    vertical-align: middle;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.add-note-btn img {
    width: 50px;
    padding: 0 3px;
}

#float-cart {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    color: white;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    cursor: pointer;
    z-index: 9999;
}

#file-popup {
    position: fixed;
    bottom: 90px;
    right: 20px;
    background: var(--popup-bg);
    border-radius: 10px;
    padding: 10px;
    display: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    width: 220px;
    z-index: 1;
}

#file-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#file-popup li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

#file-popup input[type=file] {
    display: none;
}

.file-label {
    display: inline-block;
    background: var(--popup-buttonbg);
    color: var(--popup-color);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 8px;
    text-align: center;
}

/* NÚT ĐĂNG NHẬP LƯU NOTE */
#float-auth-buttons {
    display: flex;
    justify-content: flex-end;
    width: fit-content;
    position: fixed;
    top: 20px;
    right: 20px;
    flex-direction: row;
    gap: 1px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.6px);
    -webkit-backdrop-filter: blur(1.6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px;
}

#float-auth-buttons button {
    border-radius: 50%;
    width: 64px;
    height: 64px;
    padding: 0px;
    border: none;
    background: transparent;
    transition: all var(--transition-speed);
    cursor: pointer;
}

#float-auth-buttons button:hover {
    filter: brightness(1.3);
}

#float-auth-buttons button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#float-cart img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#theme-btn img {
    transition: opacity var(--transition-speed) ease-in-out;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    transition: opacity var(--transition-speed), transform var(--transition-speed);
    transform: scale(0.9);
    z-index: 999;
}

.modal-content {
    padding: 24px;
    border-radius: var(--borderALL);
    min-width: 300px;
    width: 100%;
    max-width: 400px;
    background: var(--popup-bgo);
    color: var(--popup-color);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.6px);
    -webkit-backdrop-filter: blur(1.6px);
    border: 1px solid rgba(255, 255, 255, 0.27);
    transition: all var(--transition-speed);
    backdrop-filter: blur(1.6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal.show {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 6px !important;
    right: 6px;
    width: 32px;
    height: 32px;
    background: red;
    color: white;
    font-size: 20px;
    /* hoặc giảm từ 26px nếu quá lớn */
    font-weight: bold;
    border: none;
    border-radius: 50%;
    /* đảm bảo hình tròn */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* loại bỏ padding mặc định */
    line-height: 1;
    /* tránh lệch chiều dọc */
    transition: background 0.2s, transform 0.2s;
}

.modal-close:hover {
    background: #cc0000;
}

.info-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.info-grid div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.info-grid label {
    margin-top: 10px;
    font-weight: bold;
    font-size: 13px;
}

.info-grid input {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    margin-top: 4px;
    font-size: 14px;
    width: 100%;
    max-width: 400px;
}

input[readonly] {
    background-color: #f0f0f0;
    /* xám nhẹ */
    cursor: not-allowed;
    /* đổi con trỏ để gợi ý không chỉnh được */
}

.info-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/***************************************************************/
/* TẠO CAROUSE TỪ UPLOAD IMAGE VÀ CHÈN VÀO NOTE */
/***************************************************************/
.carousel-img-wrapper {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: var(--borderALL);
}

.carousel-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.image-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    border-radius: var(--borderALL);
}

.image-carousel .carousel-track {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.image-carousel .carousel-track img {
    flex: 0 0 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: var(--borderALL);
    display: block;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

/* Nút điều hướng */
.carousel-nav {
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed) ease;
}

.image-carousel:hover .carousel-nav {
    opacity: 0.6;
    pointer-events: auto;
}

/* Nút điều hướng hình tròn */
.rounded-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: var(--popup-coloro);
    color: var(--popup-bgo);
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

/* Vị trí nút trái/phải */
.carousel-nav.left {
    left: 5px;
}

.carousel-nav.right {
    right: 5px;
}

/* Biểu tượng nhiều ảnh (⋯) góc phải trên */
.carousel-multi-icon {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 32px !important;
    height: 32px;
    padding: 6px;
    z-index: 3;
    user-select: none !important;
    pointer-events: none !important;
    opacity: 1;
    filter: invert(1);
    box-shadow: none !important;
}

/****************************************/
/* CSS CLICK VÀO ẢNH FULLSCREEN */
/***************************************/
.fullscreen-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fullscreen-gallery img {
    width: calc(25% - 10px);
    object-fit: cover;
    cursor: pointer;
}

.resizable-image {
    display: inline-block;
    position: relative;
    resize: none;
    /* không dùng native resize */
    max-width: 100% !important;
    border: none !important;
}

.note-ghost {
    opacity: 0.4;
    transform: rotate(3deg);
}

.link-btn {
    position: absolute;
    top: 60px;
    right: -20px;
    background: lightgreen !important;
    border: 1px solid #ccc;
    border-radius: 100%;
    padding: 3px 6px;
    cursor: pointer;
    z-index: 1;
}

#link-canvas {
    z-index: 0;
    /* đảm bảo phía sau note */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#alarm-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    background: var(--popup-bg);
    color: var(--popup-color);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.5s, color 0.5s;
    pointer-events: none;
    min-width: 250px;
}

#alarm-popup.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.alarm-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.alarm-box label {
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: bold;
}

.alarm-box input {
    padding: 8px 10px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: var(--popup-bg);
    color: var(--popup-color);
}

.alarm-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.alarm-buttons button {
    padding: 8px 15px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    background: var(--popup-buttonbg);
    color: var(--popup-color);
    transition: background 0.3s;
}

@keyframes blinkMove {
    0% {
        background-color: rgba(255, 0, 0, 0.2);
        transform: translate(0, 0);
    }

    50% {
        background-color: rgba(255, 0, 0, 0.4);
        transform: translate(2px, -2px);
    }

    100% {
        background-color: rgba(255, 0, 0, 0.2);
        transform: translate(0, 0);
    }
}

.alarm-active {
    animation: blinkMove 1s infinite;
    border: 2px solid red !important;
}

/* ✅ Hiệu ứng nhấp nháy và rung cho báo thức */
@keyframes alarmFlash {

    0%,
    100% {
        filter: brightness(100%);
    }

    50% {
        filter: brightness(120%);
    }
}

@keyframes alarmShake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2px, -2px);
    }

    50% {
        transform: translate(-2px, 2px);
    }

    75% {
        transform: translate(2px, 2px);
    }
}

.note-wrapper.alarming {
    animation: alarmFlash 1s infinite, alarmShake 0.5s infinite;
    z-index: 999;
    /* Cho nổi bật */
}

/************************************************/
/*                     GIAO DIỆN VIDEO POPUP               */
/************************************************/
.popup-video-wrapper {
    width: 100%;
    /* kéo rộng hơn */
    max-width: 1440px;
    /* đúng kích thước 1080p */
    aspect-ratio: 16/9;
    background: black;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
    pointer-events: auto;
}

.video-popup .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--transition-speed) ease-in-out;
}

.video-popup .popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    background: black;
    padding: 0;
    border-radius: 15px;
    z-index: 1001;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity var(--transition-speed) ease-in-out, transform var(--transition-speed) ease-in-out;
    max-width: 1300px;
    max-height: 80vh;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* Nút đóng */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: white;
}

/* Link YouTube */
.youtube-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

#mic-button {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    background: red;
    color: white;
    border-radius: 50%;
    padding: 14px 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: none;
    cursor: pointer;
    transition: background 0.3s;
}

#mic-button img {
    transition: opacity var(--transition-speed, 0.3s) ease-in-out;
    width: 32px;
    height: 32px;
}

#mic-button.listening {
    background-color: green;
    animation: pulse 1.5s ease-out infinite;
}

/* ✅ Animation lượn sóng phát ra */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.6);
        /* đậm hơn */
    }

    50% {
        box-shadow: 0 0 0 30px rgba(0, 255, 0, 0.2);
        /* to hơn và vẫn thấy */
    }

    100% {
        box-shadow: 0 0 0 40px rgba(0, 255, 0, 0);
        /* lớn hơn nữa rồi biến mất */
    }
}

/* Chỉ thêm hiệu ứng khi đang ghi âm */
.mic-pulse.listening::before,
.mic-pulse.listening::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(0, 255, 0, 0.4);
    /* Màu sóng */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: ripplePulse 2s ease-out infinite;
}

.mic-pulse::after {
    animation-delay: 1s;
    /* Delay tạo sóng thứ hai */
}

/* Animation mở rộng và nhạt dần */
@keyframes ripplePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    70% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0.2;
    }

    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

.voice-inserted {
    background-color: rgba(255, 255, 0, 0.6);
    transition: background-color var(--transition-speed) ease;
    border-radius: 4px;
}

/************************************************/
/*            GIAO DIỆN IMAGE POPUP                     */
/************************************************/
.image-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(1px);
}

.image-popup img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.image-popup span {
    position: absolute;
    top: 50%;
    font-size: 32px;
    color: white;
    cursor: pointer;
    user-select: none;
}

#prev-img {
    left: 20px;
    transform: translateY(-50%);
}

#next-img {
    right: 20px;
    transform: translateY(-50%);
}

#image-modal.show {
    opacity: 1;
    pointer-events: auto;
}

#image-modal {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#modal-image.show {
    transform: scale(1);
    opacity: 1;
    border-radius: var(--borderALL);
}

#modal-image {
    transform: scale(0.98);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

body.no-scroll {
    overflow: hidden;
}

/************************************************/
/*                 TỪ KHÓA LIÊN QUAN NOTE              */
/************************************************/
.hl-0 {
    background-color: #ffe066;
    font-weight: bold;
}

.hl-1 {
    background-color: #ff8787;
    font-weight: bold;
}

.hl-2 {
    background-color: #63e6be;
    font-weight: bold;
}

.hl-3 {
    background-color: #a5d8ff;
    font-weight: bold;
}

.hl-4 {
    background-color: #d0bfff;
    font-weight: bold;
}

.hl-5 {
    background-color: #ffc078;
    font-weight: bold;
}

body.dark .hl-0 {
    background-color: #7a6400;
    color: white;
}

body.dark .hl-1 {
    background-color: #661010;
    color: white;
}

body.dark .hl-2 {
    background-color: #005f4d;
    color: white;
}

body.dark .hl-3 {
    background-color: #114d73;
    color: white;
}

body.dark .hl-4 {
    background-color: #3e2e68;
    color: white;
}

body.dark .hl-5 {
    background-color: #6a4600;
    color: white;
}

/*************************/
/* CSS QUẢN LÝ TAG */
/***********************/
.tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px 4px 12px;
    margin: 4px;
    border-radius: 999px;
    font-weight: bold;
    color: var(--popup-color);
    position: relative;
    font-size: 14px;
    line-height: 1.2;
}

.tag-pill-delete {
    background: red;
    color: white;
    font-size: 12px;
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 50%;
    margin-left: 8px;
    cursor: pointer;
    line-height: 18px;
}

/************************************************/
/*                  RELATE NOTE BẮN TỈA SMART       */
/************************************************/
.note-center {
    transition: transform 0.3s;
    box-shadow: 0 0 10px lime;
}

.note-related {
    transition: all 0.4s ease;
    box-shadow: 0 0 5px yellow;
}

.exit-related-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 99;
    background: red;
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
}

/************************************************/
/*               MODAL BÁO GIÁ SUBSCRIPTION     */
/************************************************/
.license-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 0 0 1px var(--popup-buttonbg);
    color: var(--popup-color);
}

.license-table th,
.license-table td {
    padding: 10px;
    border: 1px solid var(--popup-buttonbg);
}

/* Bo góc cho bảng */
.license-table thead th:first-child {
    border-top-left-radius: 12px;
}

.license-table thead th:last-child {
    border-top-right-radius: 12px;
}

.license-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
    background: var(--normal-bg);
}

.license-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Header row */
.license-table thead th {
    background-color: var(--popup-bgo, #f0f0f0);
    font-weight: bold;
}

/* Màu theo từng cột license */
:root {
    --normal-bg: #ffffff;
    --silver-bg: #e0e0e0;
    --gold-bg: #fff3b0;
    --platinum-bg: #f2f4f8;
}

.dark-theme {
    --normal-bg: #222;
    --silver-bg: #666;
    --gold-bg: #b89e41;
    --platinum-bg: #999;
}

/* Áp dụng màu nền cho từng cột */
.license-table td:nth-child(2),
.license-table th:nth-child(2) {
    background-color: var(--normal-bg);
}

.license-table td:nth-child(3),
.license-table th:nth-child(3) {
    background-color: var(--silver-bg);
}

.license-table td:nth-child(4),
.license-table th:nth-child(4) {
    background-color: var(--gold-bg);
}

.license-table td:nth-child(5),
.license-table th:nth-child(5) {
    background-color: var(--platinum-bg);
}

/************************************************/
/*                     GIAO DIỆN RESPONSIVE               */
/************************************************/

/* Điện thoại nhỏ */
@media only screen and (max-width: 480px) {
  html, body {
    overflow-x: hidden;
  }

  body {
    position: relative;
    padding: var(--paddingM);
    width: calc(100% - var(--paddingM) * 2);
    box-sizing: border-box;
  }

  #float-auth-buttons {
    position: absolute;
  }

  .avatar-buttons {
    gap: 0;
  }

  .note-wrapper {
    width: calc(100% - var(--paddingM));
    max-width: 480px;
  }

  .note-fullscreen {
    width: auto;
    border-radius: var(--borderALL) !important;
    margin: var(--padding);
    padding: 36px 2px 0 2px;
  }

  .save-cancel {
    position: initial;
  }

  .carousel-nav {
    opacity: 0.6;
  }

  #float-cart {
    bottom: 2px;
    right: 2px;
    width: 64px;
    height: 64px;
  }
}

/* Điện thoại lớn và máy tính bảng dọc */
@media only screen and (min-width: 481px) and (max-width: 1000px) {
  .note-wrapper {
    width: calc((100% - var(--padding) * 2) / 2);
  }

  .note-fullscreen {
    width: calc(100% - var(--padding) * 2);
    border-radius: var(--borderALL) !important;
    margin: var(--padding);
  }

  .save-cancel {
    position: initial;
  }
}

/* Màn hình máy tính tới 2K */
@media only screen and (min-width: 1001px) and (max-width: 1500px) {
  .note-wrapper {
    width: calc((100% - var(--padding) * 2) / 3);
  }

  .note-fullscreen {
    width: calc(100% - var(--padding) * 2);
    border-radius: var(--borderALL) !important;
    margin: var(--padding);
  }

  .save-cancel {
    position: initial;
  }
}

/* Màn hình FHD đến 2K */
@media only screen and (min-width: 1501px) and (max-width: 3000px) {
  .note-wrapper {
    width: calc((100% - var(--padding) * 3) / 4);
  }

  .note-fullscreen {
    width: calc(100% - var(--padding) * 2);
    border-radius: var(--borderALL) !important;
    margin: var(--padding);
  }
}

/* Màn hình 4K trở lên */
@media only screen and (min-width: 3001px) {
  .note-wrapper {
    width: calc((100% - var(--padding) * 4) / 5);
  }

  .note-fullscreen {
    width: calc(100% - var(--padding) * 2);
    border-radius: var(--borderALL) !important;
    margin: var(--padding);
  }
}