*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Reading Time */
.reading-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-style: italic;
    color: #9D4155;
    justify-content: center;
}

/* Table of Contents */
.table-of-contents {
    background: rgba(255, 255, 255, 0.5);
    border: 2px dashed #967e68;
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem 0 2rem;
}

.table-of-contents h3 {
    margin-bottom: 1rem;
    color: #9D4155;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-of-contents h3 img {
    width: 20px;
    height: 20px;
}

.toc-nav ul {
    list-style: none;
    padding-left: 1.5rem;
}

.toc-nav > ul {
    padding-left: 0;
}

.toc-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    color: #967e68;
    text-decoration: none;
    transition: all 0.2s ease;
}

.toc-nav a:hover {
    color: #9D4155;
    transform: translateX(5px);
}

html {
    cursor: url('/assets/cursor2.gif'), auto;
}

body{
background-image: url('/assets/bg1.png');
background-color: #E0C4C1;
margin: 7%;
font-family: 'Alegreya', sans-serif;
font-size: 17px;
color: #967e68;
}

img {
    pointer-events: none;
}

.sidebg{
background-image: url('/assets/bg4.png');
background-repeat: repeat-y;
background-position: top right;
width: 15vw;
height: 100%;
min-width: 200px;
max-width: 250px;
position: fixed;
top: 0;
left: 0;
}

.side{
    background-image: url(/assets/bg4.png);
    width: 100%;
    height: 100%;
    padding: 1rem;
    text-align: left;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    scrollbar-width: none;
}

.avatar{
border-radius: 10px;
width: 100%;
opacity: 0.9;
}

.desc{
    background-image: url(/assets/font_m.png);
    background-repeat: no-repeat;
    background-position: center;
    /* 2. QUAN TRỌNG: Buộc ảnh nền luôn lấp đầy container */
    background-size: 100% 100%;

    /* 3. QUAN TRỌNG: Đặt tỷ lệ khung hình (rộng/cao) cho container */
    /*    (Hãy điều chỉnh tỷ lệ này cho khớp với ảnh nền của bạn) */
    aspect-ratio: 290 / 175;

    /* 4. Căn giữa container trong sidebar */
    max-width: 290px;
    margin: 0 auto;

    /* 5. Dùng flexbox để căn giữa văn bản bên trong */
    display: flex;
    align-items: center;
    justify-content: center;
}
.desc p {
    /* 6. Giới hạn chiều rộng của văn bản để nó không chạm vào mép ảnh */
    max-width: 80%;
    text-align: center;
    font-size: 1rem;
    /* Reset padding vì chúng ta đã kiểm soát nó ở container cha */
    padding: 0;
}
.sideheaders{
background-image: url(/assets/line1.png);
background-repeat: no-repeat;
background-size: contain;
background-position-y: center;
}

.nav {
    font-family: 'Love Ya Like A Sister', serif;
    font-weight: normal;
    font-size: 20px;
    background-color: #E0C4C1;

    /* --- THAY ĐỔI CHÍNH Ở ĐÂY --- */
    display: inline-block; /* 1. Hộp sẽ tự co lại theo nội dung */
    padding: 2px 10px;    /* 2. Thêm đệm cho hiệu ứng subtitle */
    
    /* Xóa thuộc tính width cố định không còn cần thiết */
    /* width: 116px; */ 
}

.side ul{
padding-left: 1rem;
}

.side li{
list-style-image: url('/assets/star3.gif');
font-size: 16px;
list-style-position: inside;
}

/* Custom Ordered List */
.right ol {
list-style: none;
counter-reset: custom-counter;
padding-left: 1rem;
}

.right ol li {
counter-increment: custom-counter;
margin: 0 0 0.5rem 0;
position: relative;
padding-left: 2rem;
}

.right ol li::before {
content: counter(custom-counter) ".";
position: absolute;
left: 0;
color: #967e68;
font-weight: bold;
}

.right li {
list-style-image: url('/assets/star3.gif');
margin: 0 0 0.5rem 0;
}

.container{
display: flex;
flex-direction: column;
margin-left: clamp(200px, 15vw, 250px);
}

.headerwrapper{
display: flex;
flex-direction: row;
justify-content: space-between;
}

.title{
font-family: 'Love Ya Like A Sister', serif;
font-weight: normal;
color: #8f7c66;
font-size: 46px;
align-self: end;
margin-left: -0.5rem;
}

.headerimg{
width: 35%; /* Cho phép ảnh co giãn theo chiều rộng của container */
max-width: 285px; /* Đảm bảo ảnh không bị vỡ/pixelated khi container quá lớn */
height: auto; /* Giữ đúng tỷ lệ ảnh */
align-self: end;
margin-right: -1rem;
margin-bottom: -1.5rem;
position: relative;
z-index: 1;
}

.boxgap{
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.box{
display: flex;
flex-direction: row;
background-image: url('/assets/bg4.png');
border: 3px dashed #967e68;
border-radius: 10px;
position: relative; /* Thêm thuộc tính này */
/* Trạng thái ban đầu trước khi animation: trong suốt và bị đẩy xuống */
opacity: 0;
transform: translateY(30px);
/* Hiệu ứng chuyển động mượt mà cho nhiều thuộc tính */
transition: transform 0.6s ease-out, opacity 0.6s ease-out, box-shadow 0.3s ease-in-out;
}
/* Thêm khối mã này sau quy tắc .box */
.box::after {
content: '';
position: absolute;
width: 91px; /* Điều chỉnh chiều rộng của nơ */
height: 51px; /* Điều chỉnh chiều cao của nơ */
background-image: url('/assets/ribbon4-1.png'); /* Thay bằng đường dẫn đến ảnh nơ của bạn */
background-size: contain;
background-repeat: no-repeat;
right: 2.5rem;
bottom: 0;
transform: translate(50%, 50%); /* Căn giữa nơ trên góc */
}

/* Lớp này sẽ được JavaScript thêm vào để kích hoạt animation */
.box.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.box:hover {
    transform: translateY(-5px); /* Nhấc box lên một chút */
    box-shadow: 0 8px 25px rgba(157, 65, 95, 0.2); /* Thêm hiệu ứng đổ bóng */
}

.left{
border-right: 3px solid #967e68;
padding: 0.7rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

.icon{
border: 2px solid #967E68;
width: 80px;
height: 80px;
}

.right {
padding: 1rem;
flex-grow: 1;
/* Thêm thuộc tính này để ngăn .right co lại nhỏ hơn nội dung của nó */
min-width: 0;
overflow-x: hidden; /* Ngăn nội dung tràn theo chiều ngang */
}

/* Style mặc định cho ảnh nhỏ (stickers/icons) */
.right img {
    max-height: 1.5em; /* Giới hạn chiều cao bằng với chiều cao dòng chữ */
    width: auto; /* Tự động điều chỉnh chiều rộng theo tỷ lệ */
    display: inline-block; /* Cho phép ảnh hiển thị cùng dòng với text */
    vertical-align: middle; /* Căn giữa ảnh với dòng chữ */
    margin: 0 0.3em; /* Thêm khoảng cách nhỏ hai bên */
}

/* Style cho ảnh lớn/ảnh bìa - ghi đè style mặc định */
.right img.feature-image {
    max-width: 100%; /* Đảm bảo ảnh không vượt quá chiều rộng của container */
    max-height: none; /* Ghi đè max-height của ảnh nhỏ */
    width: 100%; /* Lấp đầy chiều rộng container */
    height: auto; /* Giữ tỷ lệ khung hình */
    display: block; /* Loại bỏ khoảng trống dưới ảnh */
    height: auto; /* Giữ tỷ lệ khung hình */
    margin: 1rem 0; /* Thêm khoảng cách trên dưới */
    border-radius: 10px;
    opacity: 0.7;
}

.right img.feature-image:hover {
    background-color: #8a3a4c;
    transform: translateY(-2px);
    opacity: 1;
    box-shadow: 0 0 8px #9d415f59; /* Thêm hiệu ứng đổ bóng nhẹ */
}

.right h3 {
    /* 1. Áp dụng trực tiếp ảnh nền */
    background-image: url('/assets/h4.png');
    background-repeat: no-repeat;
    background-size: 100% 100%; /* Buộc ảnh nền luôn lấp đầy phần tử */

    /* 2. Đặt tỷ lệ khung hình CỐ ĐỊNH (dựa trên kích thước ảnh 290x70) */
    aspect-ratio: 290 / 70;

    /* 3. Đặt kích thước linh hoạt cho container */
    width: 70%; /* Cho phép nó co giãn theo container cha */
    max-width: 290px; /* Nhưng không bao giờ rộng hơn kích thước gốc của ảnh */

    /* 4. Dùng flexbox để căn chỉnh văn bản bên trong */
    display: flex;
    align-items: center; /* Căn giữa văn bản theo chiều dọc */
    
    /* 5. Đặt đệm để văn bản không chạm vào mép của frame ảnh */
    padding: 0.5rem 1rem 0.5rem 5.6rem; /* Cú pháp: top right bottom left */
    box-sizing: border-box; /* Đảm bảo padding không làm thay đổi kích thước tổng thể */

    /* 6. Reset các thuộc tính cũ không còn cần thiết */
    min-height: auto;
    font-family: 'Love Ya Like A Sister', serif;
    font-weight: normal;
    font-size: 23px;
    margin-bottom: 1rem;
}
.right h2 {
    position: relative; /* 1. Tạo bối cảnh định vị cho pseudo-element */
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    min-height: 0;
    padding-left: 3rem; /* 2. Đặt padding CỐ ĐỊNH */
}
/* Pseudo-element cho ảnh nền của H2 */
.right h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3rem; /* 3. Đặt chiều rộng CỐ ĐỊNH */
    height: 100%;
    background-image: url('/assets/ribbon1.png');
    background-repeat: no-repeat;
    background-position: left;
}
a{
color: #9D4155;
text-decoration: none;
font-weight: bold;

}

a:visited{
color: #a8cbbb;
font-weight: bold;
font-style: italic;
}

a:hover{
font-style: italic;
text-shadow: 5px 5px 20px rgb(174 65 85 / 50%);
cursor: url('/assets/cursor2b.gif'), pointer;
}

a:active{
font-style: italic;
font-weight: normal;
}

::-webkit-scrollbar{
width: 5px; 
}

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

::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #9D4155;
}

::selection {
  background-color: #9D4155;
  color: #fff;
}
#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
}
.footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 10vh;
    height: 12vh;
}

.right q {
    font-weight: bold;
    font-size: 1.5rem;
    font-style: italic;
    text-shadow: 0 0 10px rgb(157, 65, 95);
    color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 10px;
}
.right q::before, q::after {
    font-size: 45px;
    color: #9d415f59;
}
a.quotes-author {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.right input{
    width: 100%; 
    box-sizing: border-box; 
}

@media(max-width:760px){
body{
margin: 0;
padding: 1rem;
}
.box {
flex-direction: column;
}

/* 2. Ngăn cách giữa các phần trong box */
.left {
border-right: none; /* Xóa viền phải */
border-bottom: 2px dashed #967e68; /* Thêm viền dưới để ngăn cách */
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
    }

/* 3. Sửa lỗi hiển thị cho tiêu đề h3 */
.right h3{
    width: 70%; /* Cho phép nó rộng hơn một chút trên màn hình nhỏ */
    font-size: 1.1rem;
    padding: 0.5rem 1rem 0.5rem 4.5rem;
}
.right h2{
    padding-left: 14%;
    font-size: 1.1rem;
}
.right p{
    font-size: 1rem; /* Giảm kích thước chữ cho di động */
}
/* 4. Làm cho thanh tiến trình Discord co giãn */
.bar-container {
width: 80%; /* Cho phép thanh co giãn theo chiều rộng */
max-width: 250px; /* Giới hạn chiều rộng tối đa để không quá dài */
}
.sidebg{
    background-image: none;
    position: relative;
    top: 0;
    margin-bottom: 1rem;
    width: 100%;
    height: auto;
    /* 2. Reset max-width để .sidebg có thể chiếm toàn bộ màn hình điện thoại */
    max-width: none;
}
.side{
height: auto;
width: 100%;
text-align: center;
padding: 1rem;
border-radius: 10px;
border: 3px dashed;
}
.side ul{
padding: 0;
display: flex;
flex-direction: column;
}
.avatar{
width: 50%;
margin: 0 auto;
}
.container{
margin: 0;
}
.headerimg{
width: 180px;
}
.title{
font-size: 36px;
margin: 0;
}
.sideheaders {
    /* Thêm thuộc tính này để căn giữa các phần tử con inline-block */
    text-align: center;
}
.desc p {
    font-size: 1.3rem;
}
.nav {
    /* 2. Thêm một chút đệm để nền không quá sát chữ (hiệu ứng phụ đề) */
    padding: 2px 8px;
    font-size: 1.5rem;
    /* Các thuộc tính cũ không cần nữa và có thể xóa */
    /* width: auto; */
}
#timezone {
    text-align: center;
}
.footer {
    align-items: center;
    padding-top: 5vh;
    height: 12vh;
}
.right q {
    font-size: 1.3rem;
    text-align: center;
}
}

/* Thêm vào cuối tệp style.css của bạn */
.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.status-indicator.online { background-color: #4b8; } /* Xanh lá */
.status-indicator.idle { background-color: #fa1; } /* Vàng */
.status-indicator.dnd { background-color: #f44; } /* Đỏ */
.status-indicator.offline { background-color: #778; } /* Xám */

.discord-status {
    display: flex;
    flex-direction: column; /* Xếp các mục con theo chiều dọc */
    align-items: stretch;   /* Căn giữa các mục con theo chiều ngang */
    gap: 0.5rem;           /* Tạo khoảng cách giữa ảnh, text, và thanh thời gian */
}

#discord-activity {
    text-align: center;
    margin-top: 0.7rem; /* Tạo khoảng cách với ảnh ở trên */
}

#discord-asset-container {
    text-align: center;
}

/* Sửa đổi quy tắc cho ảnh asset */
.discord-asset-image {
    max-width: 100%;      /* Cho phép ảnh co giãn */
    max-height: 150px;    /* Giới hạn chiều cao để không quá lớn */
    border-radius: 8px;
    box-shadow: 0 0 20px rgb(174 65 85 / 50%);
    /* Xóa các thuộc tính 'float' và 'margin-right' nếu có */
}

/* Sửa đổi quy tắc cho thanh thời gian */
.discord-progress-bar {
    /* clear: both; <-- Xóa thuộc tính này */
    display: flex;
    align-items: center;
    justify-content: center; /* Căn giữa toàn bộ thanh */
    gap: 0.5rem;
    font-size: 13px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    /* 3. Buộc thanh tiến trình chiếm toàn bộ chiều rộng có sẵn */
    width: 100%;
}

.bar-container {
    width: 60%; /* Cho phép nó co giãn */
    max-width: 250px; /* Nhưng không được quá dài trên màn hình lớn */
    position: relative;
    height: 16px;
    display: flex;
    align-items: center;
}

/* Sửa đổi quy tắc cho thời gian đã trôi qua */
.discord-elapsed-time {
    /* clear: both; <-- Xóa thuộc tính này */
    text-align: center; /* Căn giữa văn bản */
    font-size: 13px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.bar-background {
    position: absolute;
    width: 100%;
    height: 2px; /* Chiều cao của đường kẻ */
    background-color: #967e68;
    opacity: 0.5;
}

.bar-scrubber {
    position: absolute;
    width: 16px;  /* Điều chỉnh cho vừa với ảnh ribbon1.png của bạn */
    height: 16px; /* Điều chỉnh cho vừa với ảnh ribbon1.png của bạn */
    transform: translateX(-50%); /* Căn giữa ảnh trên điểm tiến trình */
}
#statuscafe-time {
    padding-top: 0.4rem;
    font-size: 0.7rem;
}

.left p{
    padding-bottom: 5px;
    width: 80px;
    height: auto;
}
#back-to-top-btn {
    display: none; /* Mặc định ẩn nút đi */
    position: fixed; /* Giữ nút cố định trên màn hình */
    bottom: 20px; /* Cách lề dưới 20px */
    right: 30px; /* Cách lề phải 30px */
    z-index: 99; /* Đảm bảo nút luôn nằm trên các phần tử khác */
    border: none;
    outline: none;
    background-color: transparent;
    cursor: url('/assets/cursor2b.gif'), pointer;
    padding: 0;
    opacity: 0; /* Bắt đầu với trạng thái trong suốt */
    transition: opacity 0.4s; /* Hiệu ứng mờ dần */
}

#back-to-top-btn img {
    width: clamp(50px, 10vw, 80px);
    height: auto;
}

/* Lớp này sẽ được JavaScript thêm vào để hiện nút */
#back-to-top-btn.show {
    display: block;
    opacity: 1;
}
.right ul {
    padding-left: 25px; /* Điều chỉnh giá trị này nếu cần */
}
.right li {
    list-style-image: url('assets/star4.gif');
    list-style-position: outside;
}
#timezone {
    text-align: left;
}
/* Container chứa tất cả thông báo */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999; /* Đảm bảo nó luôn nằm trên cùng */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Khoảng cách nếu có nhiều thông báo cùng lúc */
}

/* Kiểu dáng của một thông báo đơn lẻ */
.copy-notification {
    background-color: #9D4155; /* Màu nền hợp với theme của bạn */
    /* background-image: url('/assets/h4.png'); */
    /* width: 100%; */
    /* max-width: 290px; /* Giới hạn chiều rộng tối đa */
    /* height: auto; */
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Alegreya', sans-serif;
    
    /* Trạng thái ban đầu: ẩn và nằm bên ngoài màn hình bên phải */
    opacity: 0;
    transform: translateX(100%);
    
    /* Hiệu ứng chuyển động mượt mà */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Lớp 'show' để kích hoạt hiệu ứng trượt vào */
.copy-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.guestbook input[type="text"],
.guestbook input[type="url"],
.guestbook textarea {
    width: 100%;
    background-color: #E0C4C1; /* Dùng màu nền chính của trang */
    color: #967e68; /* Dùng màu chữ chính */
    font-family: 'Alegreya', sans-serif; /* Đảm bảo dùng đúng font */
    font-size: 1rem;
    padding: 10px;
    border: 2px solid #967e68; /* Dùng kiểu viền đặc trưng của trang */
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
    margin-bottom: 10px;
}

/* Sửa lỗi tràn viền và chỉ cho phép kéo theo chiều dọc */
.guestbook textarea {
    resize: vertical;
    min-height: 120px; /* Đặt chiều cao tối thiểu */
}

/* Thay đổi giao diện khi người dùng click vào ô nhập liệu */
.guestbook input[type="text"]:focus,
.guestbook input[type="url"]:focus,
.guestbook textarea:focus {
    outline: none; /* Xóa viền mặc định của trình duyệt */
    border-color: #9D4155; /* Đổi màu viền sang màu nhấn */
    box-shadow: 0 0 8px #9d415f59; /* Thêm hiệu ứng đổ bóng nhẹ */
}

/* Tạo kiểu cho chữ placeholder */
.guestbook ::placeholder {
    color: #000000a6;
    opacity: 0.7;
}

/* Tạo kiểu cho nút Submit */
.guestbook input[type="submit"] {
    background-color: #9D4155;
    color: #fff;
    font-family: 'Love Ya Like A Sister', serif;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    cursor: url('/assets/cursor2b.gif'), pointer;
    transition: background-color 0.3s, transform 0.2s;
}

/* Hiệu ứng khi di chuột qua nút Submit */
.guestbook input[type="submit"]:hover {
    background-color: #8a3a4c; /* Làm màu nền tối đi một chút */
    transform: translateY(-2px); /* Tạo hiệu ứng nhấc lên */
}
.right hr {
    /* 1. Xóa bỏ đường kẻ mặc định của trình duyệt */
    border: 0;
    
    /* 2. Đặt chiều cao của thẻ <hr> bằng với chiều cao của ảnh */
    height: 13px;
    
    /* 3. Sử dụng hình ảnh của bạn làm nền */
    background-image: url('/assets/divider1.gif');
    
    /* 4. QUAN TRỌNG: Cho phép ảnh lặp lại theo chiều ngang */
    background-repeat: repeat-x;
    
    /* (Tùy chọn) Căn giữa ảnh nền theo chiều dọc nếu cần */
    background-position: center;
    margin: 1em 0;
}
.right hr.hr2 {
    /* 2. Đặt chiều cao của thẻ <hr> bằng với chiều cao của ảnh */
    height: 13px;
    
    /* 3. Sử dụng hình ảnh của bạn làm nền */
    background-image: url('/assets/line1.png');
    
    /* 4. QUAN TRỌNG: Cho phép ảnh lặp lại theo chiều ngang */
    background-repeat: repeat-x;
    
    /* (Tùy chọn) Căn giữa ảnh nền theo chiều dọc nếu cần */
    background-position: center;
    margin: 1em 0;
}
#diary-form {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Căn các mục về bên trái */
    gap: 1rem;
}

#diary-form input[type="password"] {
    width: 100%;
    max-width: 300px; /* Giới hạn chiều rộng để không quá dài */
    background-color: #E0C4C1;
    color: #967e68;
    font-family: 'Alegreya', sans-serif;
    font-size: 1rem;
    padding: 10px;
    border: 2px solid #967e68;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

#diary-form input[type="password"]:focus {
    outline: none;
    border-color: #9D4155;
    box-shadow: 0 0 8px #9d415f59;
}

#diary-form button {
    background-color: #9D4155;
    color: #fff;
    font-family: 'Love Ya Like A Sister', serif;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    cursor: url('/assets/cursor2b.gif'), pointer;
    transition: background-color 0.3s, transform 0.2s;
}

#diary-form button:hover {
    background-color: #8a3a4c;
    transform: translateY(-2px);
}

/* Tạo kiểu cho thông báo lỗi, tương tự thông báo copy */
.error-notification {
    background-color: #9D4155; /* Dùng màu nhấn để báo lỗi */
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Alegreya', sans-serif;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.error-notification.show {
    opacity: 1;
    transform: translateX(0);
}
/* Tạo kiểu cho thông báo thành công */
.success-notification {
    background-color: #a8cbbb; /* Dùng màu xanh lá cây hợp theme */
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Alegreya', sans-serif;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.success-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Tạo kiểu cho thông báo thông tin (redirecting) */
.info-notification {
    background-color: #967e68; /* Dùng màu chữ chính */
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Alegreya', sans-serif;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.info-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Tạo kiểu cho thông báo cảnh báo (spam click) */
.warning-notification {
    background-color: #e0a96d; /* Màu cam/vàng cảnh báo */
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Alegreya', sans-serif;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.warning-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* --- BẮT ĐẦU: KIỂU DÁNG CHO TOOLTIP TÙY CHỈNH --- */
#custom-tooltip {
    position: fixed; /* Giữ cố định trên màn hình */
    display: none; /* Mặc định ẩn */
    background-color: #9D4155; /* Sao chép từ .copy-notification */
    color: #fff;
    padding: 8px 15px; /* Điều chỉnh kích thước cho phù hợp */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Alegreya', sans-serif;
    font-size: 14px; /* Hơi nhỏ hơn thông báo */
    z-index: 10000; /* Luôn nằm trên cùng */
    pointer-events: none; /* Để không cản trở sự kiện chuột khác */
    white-space: nowrap; /* Ngăn văn bản dài xuống dòng */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Lớp 'show' để hiện tooltip */
#custom-tooltip.show {
    display: block;
    opacity: 1;
}

/* --- KẾT THÚC: KIỂU DÁNG CHO TOOLTIP TÙY CHỈNH --- */


.custom-audio-player {
    width: 100%;
    padding: 5px;
    background-color: #E0C4C1;
    border: 2px dashed #967e68;
    border-radius: 8px;
}

.custom-audio-player .controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.play-pause-btn, .volume-btn {
    background: none;
    border: none;
    cursor: url('/assets/cursor2b.gif'), pointer;
    padding: 0;
    width: 16px;
    height: 16px;
}

.play-pause-btn img, .volume-btn img {
    width: 100%;
    height: 100%;
}

.play-pause-btn .hidden {
    display: none;
}

.progress-container {
    flex-grow: 1;
}

.time-display {
    font-family: 'Alegreya', sans-serif;
    font-size: 12px;
    text-align: center;
    margin-bottom: 2px;
}

.progress-bar-wrapper {
    background-image: url('/assets/line1.png');
    background-repeat: repeat-x;
    background-position: center;
    height: 13px; 
    width: 100%;
    cursor: url('/assets/cursor2b.gif'), pointer;
    position: relative;
}

.progress-bar {
    width: 0%;
    height: 100%;
    border-radius: 5px;
    transition: width 0.1s linear;
}

.progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%; /* Vị trí ban đầu */
    width: 18px;  /* Thu nhỏ kích thước */
    height: 12px;
    background-image: url('/assets/ribbon1.png');
    background-size: contain;
    background-repeat: no-repeat;
    /* Dịch chuyển thumb để tâm của nó nằm trên đường kẻ */
    transform: translate(-50%, -50%); 
    transition: left 0.1s linear;
}

.volume-container {
    position: relative;
}

.volume-slider-container {
    position: absolute;
    bottom: 25px; /* Hiển thị thanh trượt phía trên nút âm lượng */
    left: 50%;
    transform: translateX(-50%);
    background-color: #E0C4C1;
    border: 2px solid #967e68;
    border-radius: 8px;
    padding: 10px 5px;
    display: none; /* Mặc định ẩn đi */
}

/* Khi di chuột qua container âm lượng, hiển thị thanh trượt */
.volume-container:hover .volume-slider-container {
    display: block;
}

.volume-slider {
    -webkit-appearance: slider-vertical; /* Định hướng cho Chrome/Safari */
    appearance: slider-vertical;
    width: 8px;
    height: 75px;
    cursor: url('/assets/cursor2b.gif'), pointer;
}

#theme-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9998; /* Đặt dưới thông báo một chút */
    background: none;
    border: none;
    padding: 5px;
    cursor: url('/assets/cursor2b.gif'), pointer;
    width: 26px; /* 16px icon + 10px padding */
    height: 26px;
    filter: drop-shadow(0px 0px 6px white);
}

#theme-toggle-icon {
    width: 16px;
    height: 16px;
}

/* 2. Định nghĩa các màu sắc cho chế độ tối */
/* Áp dụng các quy tắc này khi body có class 'dark-mode' */

body.dark-mode {
    background-color: #2c2828e3;
    color: #d1c7bd;
}

body.dark-mode .sidebg,
body.dark-mode .side,
body.dark-mode .box {
    background-image: none;
    background-color: #3a3535ce;
}

body.dark-mode .box,
body.dark-mode .side {
    border-color: #d1c7bd;
}

body.dark-mode .left {
    border-color: #d1c7bd;
}

body.dark-mode a {
    color: #e86a8f; /* Làm màu link sáng hơn */
}

body.dark-mode a:visited {
    color: #a8cbbb; /* Màu này vẫn ổn */
}

body.dark-mode .nav {
    background-color: #2c2828; /* Dùng màu nền chính */
}

/* Dùng filter để đảo ngược màu các ảnh nền trang trí */
body.dark-mode .right h3,
body.dark-mode .right h2::before,
body.dark-mode .progress-bar-wrapper,
body.dark-mode .progress-thumb {
    filter: invert(1) hue-rotate(180deg);
    color: #796666;
}

body.dark-mode .custom-audio-player,
body.dark-mode .volume-slider-container,
body.dark-mode .guestbook input[type="text"],
body.dark-mode .guestbook input[type="url"],
body.dark-mode .guestbook textarea,
body.dark-mode #diary-form input[type="password"] {
    background-color: #3a3535;
    color: #d1c7bd;
    border-color: #97908a;
}

body.darkmode .guestbook input[type="text"]:focus,
body.darkmode .guestbook input[type="url"]:focus,
body.darkmode .guestbook textarea:focus,
body.darkmode #diary-form input[type="password"] {
    border-color: #9e5867; /* Đổi màu viền sang màu nhấn */
    box-shadow: 0 0 8px #ac728659;
}

body.dark-mode .guestbook ::placeholder {
    color: #d1c7bd;
    opacity: 0.5;
}

body.dark-mode .timezone {
    background-color: #d1c7bd;
    box-shadow: 0px 0px 5px rgb(174 65 85 / 50%);
    border-radius: 5px;
}

body.dark-mode .desc p {
    color: #2c2828;
}

body.dark-mode .table-of-contents {
    background: rgb(0 0 0 / 50%);
}
body.dark-mode .reading-time {
    color: #d1c7bd;
}

/* --- BẮT ĐẦU: CSS CHO BLOG POST GENERATOR --- */

#blog-generator-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

#blog-generator-form label {
    font-weight: bold;
    margin-top: 0.5rem;
}

#blog-generator-form .input-with-button {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

#blog-generator-form .input-with-button input[type="text"] {
    flex: 1;
}

#blog-generator-form input[type="text"],
#blog-generator-form input[type="date"],
#blog-generator-form input[type="time"],
#blog-generator-form textarea {
    width: 100%;
    background-color: #E0C4C1;
    color: #967e68;
    font-family: 'Alegreya', sans-serif;
    font-size: 1rem;
    padding: 10px;
    border: 2px solid #967e68;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
    cursor: url('/assets/cursor2b.gif'), pointer;
}

#blog-generator-form input[type="date"],
#blog-generator-form input[type="time"] {
    width: 2.5rem;
    height: 44px; /* Chiều cao tương đương với input text (padding 10px + border 2px = 24px) */
    padding: 5px;
    cursor: url('/assets/cursor2b.gif'), pointer;
    position: relative;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: transparent;
}

#blog-generator-form input[type="date"]::-webkit-calendar-picker-indicator,
#blog-generator-form input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    color: #967e68;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    opacity: 1;
    cursor: url('/assets/cursor2b.gif'), pointer;
}

#blog-generator-form input[type="date"]::-webkit-datetime-edit,
#blog-generator-form input[type="time"]::-webkit-datetime-edit {
    display: none;
}

#blog-generator-form input[type="text"]:focus,
#blog-generator-form input[type="date"]:focus,
#blog-generator-form input[type="time"]:focus,
#blog-generator-form textarea:focus {
    outline: none;
    border-color: #9D4155;
    box-shadow: 0 0 8px #9d415f59;
}

#blog-generator-form button {
    background-color: #9D4155;
    color: #fff;
    font-family: 'Love Ya Like A Sister', serif;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    cursor: url('/assets/cursor2b.gif'), pointer;
    transition: background-color 0.3s, transform 0.2s;
    margin-top: 1rem;
    align-self: flex-start;
}

#blog-generator-form button:hover {
    background-color: #8a3a4c;
    transform: translateY(-2px);
}

#generator-output textarea {
    width: 100%;
    background-color: #3a3535;
    color: #d1c7bd;
    font-family: monospace;
    font-size: 0.9rem;
    padding: 10px;
    border: 1px solid #967e68;
    border-radius: 4px;
    margin-top: 0.5rem;
    white-space: pre;
    word-wrap: normal;
    overflow-x: auto;
}

.code-container {
    position: relative;
    margin-top: 0.5rem;
}

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #5a5555;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: url('/assets/cursor2b.gif'), pointer;
    font-family: 'Love Ya Like A Sister', serif;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity 0.3s, background-color 0.3s;
}

.copy-btn:hover {
    opacity: 1;
    background-color: #9D4155;
}

/* --- KẾT THÚC: CSS CHO BLOG POST GENERATOR --- */
.art-video-player .icon {
    border: none;
}