@layer utilities {
    .bg-paper {
        background-image: url('https://img2.baidu.com/it/u=2608296977,1727784812&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=800');
        background-size: cover;
        background-position: center;
    }

    .bg-ancient-pattern {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="%234A6E5D" stroke-width="0.5" stroke-dasharray="5,5"></path></svg>');
        background-size: 50px 50px;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .text-shadow {
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .ink-splatter {
        position: relative;
    }

    .ink-splatter::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,30 Q30,10 40,30 T60,30 T80,30" fill="none" stroke="%2300000010" stroke-width="2"></path><path d="M30,60 Q40,40 50,60 T70,60 T90,60" fill="none" stroke="%2300000010" stroke-width="2"></path><path d="M40,80 Q50,60 60,80 T80,80" fill="none" stroke="%2300000010" stroke-width="2"></path></svg>');
        background-size: 100% 100%;
        opacity: 0.08;
        pointer-events: none;
    }
    /* Ép đồng bộ màu nền của body */
    body.night-mode {
        background: linear-gradient(135deg, #22332B 0%, #35544A 100%) !important;
    }
    
    /* Đồng bộ màu sắc biểu tượng trong thanh điều hướng */
    .night-mode .header-common .fa-book {
        color: #7BA292 !important;
    }

    .night-mode .bg-light {
        background-color: #22332B !important;
    }

    .night-mode .bg-secondary\/20 {
        background-color: #2C4636 !important;
    }

    .night-mode .bg-primary\/80,
    .night-mode .bg-primary\/90 {
        background-color: #35544A !important;
    }

    .night-mode .text-light,
    .night-mode,
    .night-mode .text-dark,
    .night-mode .text-ancient,
    .night-mode .text-base,
    .night-mode .text-black,
    .night-mode .text-gray-800 {
        color: #E6EFEA !important;
    }

    .night-mode .text-primary {
        color: #90ad94 !important;
    }
    
    .night-mode .text-secondary {
        color: #266656 !important;  
    }


    .night-mode .bg-ancient-pattern {
        background-color: #22332B !important;
        /* Giữ lại đường khung cổ điển */
    }

    .night-mode .border-secondary\/30 {
        border-color: #35544A !important;
    }

    /* Thay đổi lớp nền trong chế độ tối */
    .night-mode .bg-dark\/30 {
        background-color: rgba(44, 70, 54, 0.3) !important; /* Sử dụng màu sắc đậm hơn nhưng vẫn giữ độ trong suốt */
    }
    
    /* Điều chỉnh độ sáng trong chế độ ban đêm */
    .night-mode .bg-paper {
        filter: grayscale(0.2); /* Loại bỏ điều chỉnh brightness */
    }

    /* Điều chỉnh màu sắc liên kết và nút trong chế độ ban đêm */
    .night-mode a,
    .night-mode .hover\:text-secondary:hover {
        color: #A3B9A6 !important;
    }

    .night-mode .character-btn {
        color: #E6EFEA !important;
        background-color: #2C4636 !important;
        border-color: #35544A !important;
    }

    .night-mode .character-btn.bg-primary\/20,
    .night-mode .character-btn.text-light {
        background-color: #35544A !important;
        color: #E6EFEA !important;
    }

    /* Thay đổi kế hoạch màu sắc thẻ */
    .bamboo-card {
        background-color: #F0F5F2;
        /* Nền thẻ trong chế độ ban ngày */
        border: 1px solid rgba(74, 110, 93, 0.3);
    }

    .night-mode .bamboo-card {
        background-color: #35544A !important;
        /* Nền thẻ trong chế độ ban đêm */
        border-color: #4A6E5D !important;
    }

    /* Thay đổi hiệu ứng hover cho thẻ */
    .bamboo-card {
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .bamboo-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 20px -5px rgba(74, 110, 93, 0.3);
        background-color: #FFFFFF !important;
    }

    .night-mode .bamboo-card:hover {
        background-color: #3D5D50 !important;
        box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.4);
    }

    /* Thêm hiệu ứng hover cho nội dung thẻ */
    .card-content {
        transition: transform 0.3s ease;
    }

    .bamboo-card:hover .card-content {
        transform: scale(1.03);
    }

    /* Thêm hiệu ứng hover cho biểu tượng trên thẻ */
    .card-icon {
        transition: all 0.4s ease;
    }

    .bamboo-card:hover .card-icon {
        transform: rotate(5deg) scale(1.1);
        filter: brightness(1.1);
    }

    .card-hover:hover {
        background-color: rgba(163, 185, 166, 0.2) !important;
    }

    .night-mode .card-hover:hover {
        background-color: rgba(74, 110, 93, 0.4) !important;
    }

    /* Thay đổi màu sắc nền cho biểu tượng trên thẻ */
    .bamboo-card .w-16.h-16 {
        background-color: rgba(74, 110, 93, 0.1) !important;
    }

    .night-mode .bamboo-card .w-16.h-16 {
        background-color: rgba(163, 185, 166, 0.2) !important;
    }
}

.bamboo-border {
    border-image: linear-gradient(to right, #4A6E5D, #35544A) 1;
}

.scroll-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 110, 93, 0.3) transparent;
}

.scroll-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(74, 110, 93, 0.3);
    border-radius: 3px;
}

.chat-bubble {
    position: relative;
    max-width: 80%;
}

.chat-bubble::after {
    content: "";
    position: absolute;
    top: 15px;
    border-width: 8px;
    border-style: solid;
}

.chat-bubble-left::after {
    left: -16px;
    border-color: transparent #ffffff transparent transparent;
}

.chat-bubble-right::after {
    right: -16px;
    border-color: transparent transparent transparent #A3B9A6;
}

.ink-wash {
    background: linear-gradient(135deg, rgba(74, 110, 93, 0.05) 0%, rgba(163, 185, 166, 0.1) 100%);
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-typing {
    animation: typing 1.4s infinite;
}

@keyframes typing {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

.dialogue-card {
    transition: all 0.3s ease;
}

.dialogue-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.text-stroke {
    -webkit-text-stroke: 0.5px rgba(74, 110, 93, 0.3);
}

.bg-ink-splash {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="splash" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise"/><feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="G"/></filter><rect x="0" y="0" width="100" height="100" style="fill:none;stroke:%234A6E5D;stroke-width:0.5;stroke-opacity:0.1" filter="url(%23splash)"/></svg>');
    background-size: 100% 100%;
}

.reading-progress {
    height: 3px;
    background: linear-gradient(to right, #4A6E5D var(--scroll), transparent 0);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
}

.character-hover {
    transition: all 0.3s ease;
}

.character-hover:hover {
    transform: scale(1.03);
    filter: brightness(1.05);
}

.ancient-text {
    font-family: 'Playfair Display', serif;
    letter-spacing: 2px;
}

.scroll-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="%234A6E5D" stroke-width="0.3" stroke-dasharray="1,1"></path></svg>');
    background-size: 20px 20px;
    opacity: 0.1;
    pointer-events: none;
}

.setting-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.setting-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.setting-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.setting-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.setting-toggle input:checked+.setting-toggle-slider {
    background-color: #4A6E5D;
}

.setting-toggle input:focus+.setting-toggle-slider {
    box-shadow: 0 0 1px #4A6E5D;
}

.setting-toggle input:checked+.setting-toggle-slider:before {
    transform: translateX(24px);
}

.ancient-scroll {
    position: relative;
    background-color: #F0F5F2;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    overflow: hidden;
    margin-top: 30px;
}

.ancient-scroll::before,
.ancient-scroll::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="10" viewBox="0 0 100 10"><path d="M0 5 Q25 0 50 5 T100 5" fill="none" stroke="%234A6E5D" stroke-width="1" stroke-dasharray="1,2"></path></svg>');
    background-repeat: repeat-x;
}

.ancient-scroll::before {
    top: 0;
}

.ancient-scroll::after {
    bottom: 0;
}


body {
    background: linear-gradient(135deg, #E6EFEA 0%, #A3B9A6 100%);
}

    /* Thay đổi màu sắc và font chữ trong thanh điều hướng */
.header-common {
    background-color: rgba(42, 67, 55, 0.95) !important;
    border-bottom: 1px solid rgba(74, 110, 93, 0.3);
    color: #E6EFEA !important;
    /* Cố định font chữ màu trắng */
}

/* Thay đỉnh màu sắc liên kết trong thanh điều hướng */
.nav-link {
    color: #E6EFEA !important;
}

/* Thay đổi màu sắc văn bản trong chế độ ban đêm */
.night-mode {
    color: #E6EFEA !important;
    /* Thay đổi màu sắc nền và thẻ trong chế độ ban đêm */

    .bg-paper {
        filter: none; /* Hoàn toàn loại bỏ tất cả hiệu ứng lọc */
    }
    
    .bg-light,
    .bg-paper,
    .bg-light\/90,
    .bg-light\/70 {
        background-color: #22332B !important;
        background-image: none !important;
    }
    
    /* Loại bỏ các cài đặt khác có thể ảnh hưởng đến độ sáng */
    .character-btn {
        filter: none !important;
    }
    
    .character-hover:hover {
        filter: brightness(1.05) !important; /* Chỉ giữ lại hiệu ứng hover */
    }
}

/* Thay đổi kiểu dáng nút bắt đầu cuộc trò chuyện */
.start-chat-btn {
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(74, 110, 93, 0.2);
}

/* Thay đổi hiệu ứng hover cho nút bắt đầu cuộc trò chuyện */
.start-chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(74, 110, 93, 0.3);
}

/* Thay đổi kiểu dáng tiêu đề chương trong sách cổ điển */
.chapter-title {
    color: #4A6E5D !important; /* Màu chính trong chế độ ban ngày */
    text-shadow: 1px 1px 2px rgba(74, 110, 93, 0.2);
}

.night-mode .chapter-title {
    color: #FFFFFF !important; /* Màu trắng trong chế độ ban đêm */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Tăng độ đậm cho bóng sáng để tăng độ tương phản */
}

/* Thay đổi kiểu dáng phụ đề trong chương */
.chapter-subtitle {
    color: #7BA292 !important; /* Màu nổi bật trong chế độ ban ngày */
}

.night-mode .chapter-subtitle {
    color: #E6EFEA !important; /* Màu sáng trong chế độ ban đêm */
}

/* Thay đổi kiểu dáng trang chân trang để tránh ảnh hưởng của chế độ ban đêm */
footer {
    background-color: rgba(42, 67, 55, 0.95) !important;
    color: #E6EFEA !important;
}

/* Thêm kiểu dáng văn bản mô tả trong chân trang */
footer .text-light\/70 {
    color: rgba(255, 255, 255, 0.7) !important; /* Cố định giữ màu trắng 70% trong suốt */
}

/* Thêm kiểu dáng văn bản bản quyền trong chân trang */
footer .text-light\/50 {
    color: rgba(255, 255, 255, 0.5) !important; /* Cố định giữ màu trắng 50% trong suốt */
}

/* Thay đổi màu sắc liên kết trong chân trang */
footer a {
    color: #A3B9A6 !important;
    transition: all 0.3s ease;  /* Thêm hiệu ứng chuyển đổi mượt mà */
}

footer a:hover {
    color: #E6EFEA !important;  /* Khi hover, màu sắc trở nên sáng hơn */
    transform: translateY(-1px);  /* Thêm hiệu ứng nhẹ nhàng di chuyển lên trên */
    text-shadow: 0 2px 4px rgba(230, 239, 234, 0.3);  /* Thêm bóng sáng để tăng độ tương phản */
}

/* Thay đổi màu sắc text-dark/70 */
.text-dark\/70 {
    color: rgba(51, 51, 51, 0.7) !important; /* Màu sâu 70% trong suốt trong chế độ ban ngày */
}

.night-mode .text-dark\/70 {
    color: rgba(230, 239, 234, 0.7) !important; /* Màu sáng 70% trong suốt trong chế độ ban đêm */
}

/* Thay đổi màu sắc cơ bản cho text-sm */
.text-sm {
    color: #333333 !important; /* Màu sâu cơ bản trong chế độ ban ngày */
}

.night-mode .text-sm {
    color: #E6EFEA !important; /* Màu sáng cơ bản trong chế độ ban đêm */
}

/* Tăng cường màu sắc văn bản trong container của cài đặt */
.night-mode #settings-container * {
    color: #E6EFEA !important;
}

/* Tăng cường màu sắc văn bản trong dropdown của cài đặt */
.night-mode #settings-container select option {
    color: #E6EFEA !important;
    background-color: #2C4636 !important;
}

/* Tăng cường màu sắc văn bản trong placeholder của cài đặt */
.night-mode #settings-container input::placeholder,
.night-mode #settings-container textarea::placeholder {
    color: rgba(230, 239, 234, 0.7) !important;
}

/* Tăng cường màu sắc văn bản và nền cho nút trong cài đặt */
.night-mode #settings-container button {
    color: #E6EFEA !important;
    background-color: #35544A !important;
    border: 1px solid #4A6E5D !important;
}

.night-mode #settings-container button:hover {
    background-color: #4A6E5D !important;
}

/* Tăng cường màu sắc viền trong cài đặt để tăng độ tương phản */
.night-mode #settings-container .ancient-scroll {
    border: 1px solid #2c463684 !important;
}

/* Tăng cường màu sắc nền trong cài đặt để tăng độ tương phản */
.night-mode #settings-container .ancient-scroll {
    background-color: #2C4636 !important;
}

/* Tăng cường màu sắc văn bản cho tiêu đề trong cài đặt */
.night-mode #settings-container h2,
.night-mode #settings-container h3 {
    color: #E6EFEA !important;
}

/* Tăng cường màu sắc văn bản cho label trong cài đặt */
.night-mode #settings-container label {
    color: #E6EFEA !important;
}

/* Tăng cường màu sắc nền và văn bản cho input, select và textarea trong cài đặt */
.night-mode #settings-container input,
.night-mode #settings-container select,
.night-mode #settings-container textarea {
    background-color: #2C4636 !important;
    color: #E6EFEA !important;
    border-color: #35544A !important;
}

/* Tăng cường kiểu dáng khi focus cho input, select và textarea trong cài đặt */
.night-mode #settings-container input:focus,
.night-mode #settings-container select:focus,
.night-mode #settings-container textarea:focus {
    border-color: #A3B9A6 !important;
    box-shadow: 0 0 0 2px rgba(163, 185, 166, 0.25) !important;
}

/* Tăng cường màu sắc văn bản và nền cho nút trong cài đặt */
.night-mode #settings-container button {
    color: #E6EFEA !important;
}

/* Tăng cường kiểu dáng cho nút "Đặt lại cài đặt" trong cài đặt */
.night-mode #settings-container #reset-settings {
    border-color: #A3B9A6 !important;
    color: #A3B9A6 !important;
    background-color: transparent !important;
}

.night-mode #settings-container #reset-settings:hover {
    background-color: rgba(163, 185, 166, 0.1) !important;
}

/* Tăng cường kiểu dáng cho nút "Lưu cài đặt" trong cài đặt */
.night-mode #settings-container #save-settings {
    background-color: #A3B9A6 !important;
    color: #22332B !important;
}

.night-mode #settings-container #save-settings:hover {
    background-color: rgba(163, 185, 166, 0.9) !important;
}

/* Tăng cường màu sắc văn bản cho option trong dropdown của cài đặt */
.night-mode #settings-container select option {
    background-color: #2C4636 !important;
    color: #E6EFEA !important;
}

/* Tăng cường màu sắc văn bản cho span trong cài đặt */
.night-mode #settings-container span {
    color: #E6EFEA !important;
}

/* Tăng cường kiểu dáng cho container của setting-toggle trong cài đặt */
.night-mode #settings-container .setting-toggle .setting-toggle-slider {
    background-color: #35544A !important;
}

.night-mode #settings-container .setting-toggle input:checked + .setting-toggle-slider {
    background-color: #A3B9A6 !important;
}

/* Thay đổi kiểu dáng cho container của settings-container trong chế độ ngang */
@media (orientation: landscape) {
    #settings-container {
        /* Giới hạn chiều rộng tối đa, có thể điều chỉnh theo nhu cầu */
        width: 90% !important; 
        /* Căn giữa bằng cách tự động đặt lề trái và phải */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Thay đổi kiểu dáng cho container của settings-container trong chế độ ngang với màn hình lớn hơn */
@media (orientation: landscape) and (min-width: 1280px) {
    #settings-container {
        /* Giới hạn chiều rộng tối đa hơn cho màn hình lớn hơn */
        width: 90% !important; 
    }
}