html, body {
  height: 100%;
  margin: 0;
  padding: 0;    
  font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Tahoma, Verdana, sans-serif, "Geneva";
}

/*--------thanh cuộn----------*/
body::-webkit-scrollbar {
  width: 5px;
  background: rgba(0, 0, 0, 0.1);
}

body::-webkit-scrollbar-thumb {
  background-color: #bdc2c5;
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: #a1a1a1;
}

#khung{
  padding-top: 20px;  
  padding-bottom: 20px;  
  max-width: 42%;
  margin: 0 auto;  
  color: #32465a;  
  transition: .5s ease; 
}

.tieude{    
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 20px;      
  font-weight: 550;
  max-width: 100%;
  margin: 0 auto;
  color: #ed2f72;  
  color: #0c826f;
  margin-bottom: 20px;  
  transition: .5s ease;  
}

/* Thêm class này: Được kích hoạt khi cuộn chuột xuống*/
.tieude.sticky {
  position: sticky;
  top: 0;
  background: linear-gradient(
    to bottom, 
    rgba(255, 255, 255, 0.95) 30%, 
    rgba(255, 255, 255, 0.7) 70%, 
    rgba(255, 255, 255, 0) 100%
  );
  padding: 15px 0px 20px 0px;
  z-index: 999;  
  transition: background 0.3s ease; 
} 

.danhsach-tieude{
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 6px 6px 15px 15px;
  transition: .5s ease;   
  border: 1px solid #e6ecf3;
}

.danhsach-tieude a{    
  font-family: "Segoe UI", Arial, sans-serif;
  display: block;  
  text-decoration: none;
  font-size: 15.5px;    
  max-width: 100%;   
  color: #32465a;
  padding-bottom: 10px; 
  transition: .5s ease;     
  border-bottom: 1px solid;  
  border-image: linear-gradient(to right, transparent 0%, #e1e6ea 15%, #e1e6ea 85%, transparent 100%) 1;
  margin-bottom: -15px;
}

.danhsach-tieude a::before {  
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px; /* Căn lề chuẩn dòng với chữ */
  
  /* Nhúng trực tiếp SVG icon Document */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c826f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;  
  transition: all 0.5s ease;
}

.danhsach-tieude a:not(.active):hover  {
  font-size: 17px;
  padding-left: 15px;  
  color: #0c826f;
}

/* Kiểu hiển thị cố định cho bài viết đang mở */
.title-link.active {
  font-weight: 550;
  color: #0c826f;
  text-decoration: none;
  cursor: default; /* Đổi con trỏ chuột thành dạng mặc định (không bấm lại nữa) */
}

/* Thêm dấu check SVG ở cuối tiêu đề bài đang chọn */
.title-link.active::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px; /* Khoảng cách đẹp với tiêu đề */
  vertical-align: sub;
  background-color: #0c826f;
    
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}

.noidung{   
  font-family: 'Google Sans', sans-serif;
  font-size: 16px;    
  max-width: 100%;
  margin: 0 auto;  
  line-height: 34px;
  transition: .5s ease; 
  padding-top: 10px;
  padding-bottom: 10px;  
  color: black;
}

/* Tạo hiệu ứng thụt đầu dòng cho đoạn văn nằm sau thẻ <br> */
/* Thụt đầu dòng cho thẻ P */
.noidung p {
  font-size: 16px;
  line-height: 34px;
  text-align: justify;
  text-indent: 30px;
  margin-bottom: 10px;
}

/* Chỉ số trên (Lũy thừa/Dấu mũ: x^2) */
.noidung sup {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
}

/* Chỉ số dưới (H2O) */
.noidung sub {
  font-size: 0.75em;
  vertical-align: sub;
  line-height: 0;
}

/* Định dạng Bảng từ Word */
.noidung table {
  border-collapse: collapse;
  margin: 10px 0 !important;
  width: 100%;    
}

.noidung table td, .noidung table th {
  border: 1px solid #ccc  !important;
  padding: 0px 0px !important;  
}

.chu-nghien-nhay{  
  font-style: italic;
  font-weight: 500;
}

/*---------Cho mục đặc trưng-------------*/
.image_map2-container {
    position: relative;
    display: inline-block;
    text-align: center;
}
  
.image_map2 {
    max-width: 60%;
    margin-bottom: 4px;
    margin-top: 8px;
    border-radius: 6px;
    border: 0px solid #e1e6ea;
    transition: .5s ease;  
}
  
.image_map2-container i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    color: #0c826f;
    opacity: 0;
    transition: .5s ease;  
    width: 50px;
    height: 50px;
    border-radius: 50%;    
    border: 1px solid #0c826f;
    display: flex;
    align-items: center;
    justify-content: center;    
    background: rgba(255, 255, 255, 0.4);
}
  
.image_map2-container i::before {  
    font-family: "FontAwesome", "Tahoma"; 
    content: "\f065"; 
    word-spacing: 1px;
    font-size: 17px;   
    color: #0c826f;     
    transition: .5s ease;   
}
  
.image_map2-container:hover .image_map2 {
    opacity: 0.7;
    border-radius: 4px;
    border: 0px solid #e1e6ea;  
    box-shadow: 0 0 0px #9ec5fe;    
    transform: scale(1.0);  
}
  
.image_map2-container:hover i {
  opacity: 1;  
}
  
.tieude_dactrung{  
  width: fit-content; 
  display: block;  
  margin: 0 auto; /* Thêm thuộc tính này để căn giữa thẻ block */
  padding: 8px 15px; 
  color: #475569;
  color: #32465a;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;  
  text-align: center;
  transition: width 0.2s ease;  
  max-width: 60%;
}

.nguonbaiviet{
  font-family: 'Be Vietnam Pro', sans-serif !important;
  color: #687991;
  color: #32465a;
  font-size: 15px;  
  display: block;
  margin-bottom: 15px;
  text-align: center;
  transition: .5s ease;     
}
  
.nguonbaiviet::before {
  content: "Nguồn: ";    
  color: #687991;
  font-weight: 500; 
}

/*------------audio control------------*/
.audio-player {  
  display: inline-block;  
  padding: 15px;
  border-radius: 10px; 
  font-family: Arial, sans-serif;
  text-align: center;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

button { 
  border: none;   
  font-size: 16px; 
  cursor: pointer;
  color: #0c826f;
  transition: background-color 0.3s ease, transform 0.3s ease;   
}

button:hover { 
  color: #ffffff;   
  transform: scale(1.15); 
}

#playBtn, #pauseBtn {
  background-color: #ffffff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 18px;
  cursor: pointer;
  color: #0c826f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
  border: 1px solid #0c826f;
}

#playBtn:hover, #pauseBtn:hover {
  background-color: #0c826f;  
  box-shadow: 0 0 8px #0c826f;
  color: #ffffff;
  transform: scale(1.15);
}

#muteBtn {
  background-color: #ffffff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  color: #0c826f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
  border: 1px solid #0c826f;
}

#muteBtn:hover {
  background-color: #0c826f;  
  box-shadow: 0 0 8px #0c826f;
  color: #ffffff;
  transform: scale(1.15);
}

#musicSelect {
  background-color: #ffffff;
  border-radius: 20px;
  max-width: 145px;
  height: 26px;
  line-height: 24px; /* Thêm dòng này (26px trừ 2px border) để ép chữ nằm chính giữa */
  font-size: 14px;
  cursor: pointer;
  color: #0c826f;
  transition: background-color 0.3s ease, transform 0.3s ease;
  border: 1px solid #0c826f;

  /* Đặt padding gọn lại, dùng padding top/bottom = 0 */
  padding: 0 25px 0 26px; 

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230c826f'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c826f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  background-repeat: no-repeat, no-repeat;
  background-position: left 8px center, right 8px center;
  background-size: 16px auto, 16px auto;
}

#musicSelect:hover {
  background-color: #ffffff;  
  box-shadow: 0 0 8px #0c826f; 
  transform: scale(1.09);
}

#optionBtn {
  background-color: #ffffff;  
  border-radius: 20px;  
  width: auto;
  height: 26px;
  line-height: 24px; /* Ép dòng cao 24px để chữ nằm chính giữa */
  font-size: 14px; 
  cursor: pointer;  
  color: #0c826f; 
  transition: background-color 0.3s ease, transform 0.3s ease;
  border: 1px solid #0c826f;
  
  /* Đặt padding gọn gàng: Trên 0px, Phải 25px, Dưới 0px, Trái 10px */
  padding: 0 25px 0 10px;
  
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c826f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 16px auto;
}

#optionBtn:hover {
  background-color: #ffffff;  
  box-shadow: 0 0 8px #0c826f; 
  transform: scale(1.09);
}

.colored-option {
  color: black; 
}

#progressSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  background: transparent;
  flex-grow: 1;
  max-width: 300px;
}

#progressSlider::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    #0c826f 0%,
    #0c826f var(--progress, 0%),
    #ccc var(--progress, 0%),
    #ccc 100%
  );
}

#progressSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0c826f;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-top: -4.5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#progressSlider::-webkit-slider-thumb:hover {  
  transform: scale(1.5);
}

#progressSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0c826f;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#progressSlider::-moz-range-track {
  background: #ccc;
  height: 0px;
  border-radius: 5px;
}

#currentTime, #duration{
  font-size: 14px;
}

#thoigian {
  font-family: monospace;  
  font-size: 13px;
  font-weight: 500;
  color: #0c826f;  
  display: flex;
  align-items: center;
  gap: 6px;
}

.dieukhien{  
  text-align: center;
  display: block; 
  margin-left: auto;
  margin-right: auto;
}

/* Nút like, share, copy text */
.nhomBtn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 8px;
  font-size: 13.5px; /* Đã thu nhỏ chữ */
  color: #0c826f;  /* <-- Màu này sẽ đổi màu cho SVG luôn nhờ currentColor */
  transition: all 0.3s ease;
}

/* Đổi màu khi di chuột vào (Hover) */
.nhomBtn:hover {
  color: #0c826f;  /* Icon SVG và chữ sẽ cùng đổi sang màu xanh này */
}

/* Phân trang */
.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #f8fafc;
  
  width: calc(100% + 40px); /* Phủ kín 2 bên nếu khung cha có padding 15px */
  margin-left: -20px;      /* Căn lề trái bằng đúng padding của khung cha */
  margin-right: -20px;     /* Căn lề phải bằng đúng padding của khung cha */
  margin-top: -9px !important;/* Chạm sát phần danh sách bên trên */
  padding: 10px 0;

  border-radius: 2px 2px 13px 13px;
}

#trangBtn {
  background-color: #ffffff;  
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 14px;
  cursor: pointer;
  color: #0c826f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
  border: 1px solid #0c826f;
  margin-top: -1px;
}

#trangBtn:hover {
  background-color: #0c826f;  
  box-shadow: 0 0 8px #0c826f;
  color: #ffffff;
  transform: scale(1.15);
}

.trang{
  color: #687991; 
  color: #32465a;  
  font-size: 16px;
  font-weight: 400;
  margin-left: 5px;
  margin-right: 5px;
}

.tailieuthamkhao{
  font-size: 15px; 
  text-align: left;
  padding: 20px;
}

/* =========================================================
  NÚT BẬT TẮT SÁNG TỐI (THEME SWITCH - SVG ICONS)
  ========================================================= */
.theme-switch-wrapper {
  position: fixed;
  top: 15px;            /* Thay bottom thành top */
  right: 20px;          /* Dùng right thay cho left: 95% để không bị tràn lề trên màn hình nhỏ */
  z-index: 1000;
  display: flex;  
}

.theme-toggle-btn {
  position: relative;
  width: 80px;        /* Tăng từ 60px -> 75px */
  height: 32px;       /* Tăng từ 28px -> 35px */
  box-sizing: border-box; 
  background-color: rgba(248, 249, 250, 0.9);
  border-radius: 25px; /* Tăng từ 20px -> 25px cho bo tròn chuẩn */  
  border: 1px solid rgba(226, 232, 240, 0.9); 
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;     /* Tăng nhẹ padding 2 bên từ 6px -> 8px */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
 
 
  border: 1px solid rgba(226, 232, 240, 0.8);
  
}

/* Hiệu ứng Hover nổi bật */
.theme-toggle-btn:hover {
  transform: scale(1.06);
}

/* Kích thước & hiệu ứng Icon SVG */
.theme-toggle-btn svg {
  width: 20px;        /* Tăng icon từ 16px -> 20px */
  height: 20px;       /* Tăng icon từ 16px -> 20px */
  z-index: 2;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* TRẠNG THÁI SÁNG (LIGHT MODE) */
/* Icon Mặt trời: Sáng nổi bật */
.theme-toggle-btn .icon-sun {
  color: #ffffff;
  stroke: #ffffff;
  opacity: 1;
}

/* Icon Mặt trăng: Ẩn mờ xám */
.theme-toggle-btn .icon-moon {
  color: #212f3f;
  stroke: #212f3f;
  opacity: 0.8;
}

/* Viên bi chạy bên trong (Màu trắng tinh) */
.theme-toggle-btn::after {
  content: "";
  position: absolute;
  top: 2px;           /* Căn lề trên chuẩn khung mới */
  left: 5px;          /* Căn lề trái chuẩn khung mới */
  width: 26px;        /* Tăng viên bi từ 20px -> 25px */
  height: 26px;       /* Tăng viên bi từ 20px -> 25px */
  background-color: #0c826f;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  z-index: 1;
}

/* =========================================================
  CHẾ ĐỘ TỐI (DARK MODE STYLES)
  ========================================================= */
body.dark-mode {
  color: #e1e6ea;
  background-color: #232b3a;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

body.dark-mode .theme-toggle-btn {
  background-color: #1e293b;
  border-color: #334155;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.3);
}

/* Viên bi trượt sang phải & đổi màu xanh ngọc */
body.dark-mode .theme-toggle-btn::after {
  transform: translateX(42px); /* <-- Đổi thành 26px để viên bi dịch hết sang phải */
  background-color: #0c826f;
}

/* Icon Mặt trời: Mờ đi */
body.dark-mode .theme-toggle-btn .icon-sun {
  color: #f1f4f7;
  stroke: #f1f4f7;
  opacity: 0.4;
  filter: none;
}

/* Icon Mặt trăng */
body.dark-mode .theme-toggle-btn .icon-moon {
  color: #ffffff;
  stroke: #ffffff;
  opacity: 1; 
}

body.dark-mode #khung {
  color: #d1d5db;
}

body.dark-mode .danhsach-tieude{ 
  border: 1px solid #334155;
}

body.dark-mode .noidung {
  color: #d1d5db;
}

body.dark-mode .danhsach-tieude a {
  color: #ffffff;
}

/* Hiệu ứng khi rê chuột vào (Hover) ở chế độ tối */
body.dark-mode .danhsach-tieude a:not(.active):hover  {
  color: #2dd4bf;              /* Đổi sang màu xanh ngọc bích nổi bật trên nền tối */
  text-decoration: none;        /* Bỏ gạch chân (nếu muốn) */
}

/* Kiểu hiển thị cố định cho bài viết đang mở */
body.dark-mode .title-link.active { 
  color: #0c826f; 
}

body.dark-mode .trang,
body.dark-mode .nhomText,
body.dark-mode .tieude_dactrung,
body.dark-mode .nguonbaiviet {
  color: #94a3b8;
}

body.dark-mode #playBtn,
body.dark-mode #pauseBtn,
body.dark-mode #muteBtn,
body.dark-mode #trangBtn,
body.dark-mode #musicSelect,
body.dark-mode #optionBtn {
  background-color: #1e293b;
  color: #2dd4bf;
  border-color: #0c826f;
}

body.dark-mode #playBtn:hover,
body.dark-mode #pauseBtn:hover,
body.dark-mode #muteBtn:hover,
body.dark-mode #trangBtn:hover {
  background-color: #0c826f;
  color: #ffffff;
}

body.dark-mode::-webkit-scrollbar-thumb {
  background-color: #334155;
}

body.dark-mode .tieude.sticky {
 
  background-color: transparent;
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.01'/%3E%3C/svg%3E"),
    linear-gradient(
      to bottom,
      rgba(35, 43, 58, 1) 0%,      /* Đục hoàn toàn phần đỉnh */
      rgba(35, 43, 58, 1) 40%,     /* Che phủ rõ ràng phần tiêu đề */
      rgba(35, 43, 58, 0.85) 65%,  /* Bắt đầu giảm nhẹ */
      rgba(35, 43, 58, 0.4) 85%,   /* Mờ dần */
      rgba(35, 43, 58, 0) 100%     /* Tan biến hoàn toàn */
    );
 
}

/* Màu tiêu đề chính ở Chế độ Tối (Dark Mode) */
body.dark-mode .tieude {
  color: #ffffff; /* Màu hồng sáng nổi bật, đồng bộ với màu danh sách bên dưới */
}

body.dark-mode .danhsach-tieude a {
  border-image: linear-gradient(to right, transparent 0%, #334155 15%, #334155 85%, transparent 100%) 1;
}

/* Đổi màu phần chưa chạy (chưa fill) của thanh trượt sang xám tối */
body.dark-mode #progressSlider::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #0c826f 0%,
    #0c826f var(--progress, 0%),
    #334155 var(--progress, 0%), /* Màu xám tối chìm nền */
    #334155 100%
  );
}

body.dark-mode #progressSlider::-moz-range-track {
  background: #334155;  
}

/* Tùy chỉnh màu Icon SVG khi bật Chế độ Tối (Dark Mode) */
body.dark-mode .nhomBtn {
  color: #2dd4bf;  /* Chuyển icon & chữ sang màu xanh ngọc bích khi ở chế độ tối */
}

body.dark-mode .danhsach-tieude a::before {
  /* Đổi nét vẽ stroke trong SVG từ màu %238d9eb6 sang màu %2394a3b8 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

body.dark-mode .pagination{  
  background-color: #2f3d50;   
}


/* ==========================================
  8. RESPONSIVE DESIGN (MOBILE & LAPTOP)
  ========================================== */

/* A. LAPTOP / MÀN HÌNH TRUNG BÌNH (736px đến 1366px) */
@media screen and (min-width: 736px) and (max-width: 1366px) {
  .image_map2{
    max-width: 80%;   
  } 
  #khung{
    padding-top: 20px;   
    padding-left: 15px;
    padding-right: 15px;  
    padding-bottom: 20px;
    max-width: 70%;   
  }  
}

/* B. TABLET / DI ĐỘNG LỚN (Max-width: 735px) */
@media screen and (max-width: 735px) {
  .tieude{            
    max-width: 100%;          
  }
  .noidung{            
    max-width: 100%;            
  }

  .danhsach-tieude{
    padding-top: 15px;
    padding-left: 13px;
    padding-right: 13px;    
  }

  .pagination{      
    width: calc(100% + 26px); /* Phủ kín 2 bên nếu khung cha có padding 15px */
    margin-left: -13px;      /* Căn lề trái bằng đúng padding của khung cha */
    margin-right: -13px;     /* Căn lề phải bằng đúng padding của khung cha */   
  }

  .image_map2{
    max-width: 100%;   
  } 
  #khung{
    padding-top: 20px;  
    padding-left: 15px;
    padding-right: 15px;  
    padding-bottom: 20px;
    max-width: 100%;   
  } 
  .controls {    
    gap: 10px;
  }
  .tailieuthamkhao{  
    padding: 0px;
  }

  .theme-switch-wrapper {    
    top: 15px;            
    right: 15px;          
    
  }

  .tieude_dactrung{      
    max-width: 100%;
  }

}

/* C. DI ĐỘNG NHỎ (Max-width: 480px) */
@media screen and (max-width: 480px) {

  body.dark-mode {    
    background-image: none !important;
  }

  .theme-switch-wrapper {     
    top: 15px;            
    right: 15px;     
  }

  #khung{
    margin-top: 5px;     
    padding-top: 15px;   
  }

  .noidung p {
    font-size: 17px;
    text-indent: 25px !important;
    margin-bottom: 8px ;
  }
  
  .danhsach-tieude a{      
    font-size: 16.5px;     
  }

  .tieude{    
    font-size: 20px; 
    font-weight: 550; 
    margin-bottom: 5px; 
  }

  .tieude_dactrung{     
    font-size: 15px;    
  }

  .trang{
    font-size: 17px;
  }  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    border-radius: 50%;
    padding: 10px;
  }
  .controls {    
    gap: 14px;
  }
  #musicSelect {     
    max-width: 100px;    
  }
  .nguonbaiviet{
    font-size: 15px;  
  }
  #currentTime, #duration{
    font-size: 15px;
  }
  #musicSelect, #optionBtn {  
    font-size: 15px;   
  }
  .nhomBtn {    
    font-size: 15px; 
    
  }

  .tieude.sticky {
    position: static !important;
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
  }
 

}