@import url("pygment_highlights.css");

:root {
  --color-primary: #004ba0;          /* nếu đây là màu chính */
  --color-navy: #003066;             /* tên gợi tông xanh navy */
  --color-brand-dark-blue: #003066;  /* nếu là màu thương hiệu */
}

/* CSS cho nút search */
.search-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: #161616;
  -webkit-transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1);
  transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1);
  -webkit-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
  opacity: 0;
}

.search-page.search-active {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1, 1);
  -ms-transform: translate(0, 0) scale(1, 1);
  transform: translate(0, 0) scale(1, 1);
}

.search-page.search-active .search-main {
  opacity: 1;
}

.search-page .search-main {
  padding-top: 10px;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1) 250ms;
  transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1) 250ms;
}

.search-page .search-main .row,
.search-page .search-main .row>div {
  height: 100%;
}

.search-page .search-icon-close-container {
  position: absolute;
  z-index: 1;
  padding: 16px;
  top: 0;
  right: 2px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
}

.search-page .search-icon-close-container i {
  font-size: 20px;
}

.search-page #search-input {
  font-family: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 30px;
  font-weight: bold;
  color: #161616;
}

@media only screen and (min-width: 768px) {
  .search-page #search-input {
    margin-left: 20px;
  }
}

.search-page #search-results {
  overflow: auto;
  height: 70%;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}

.search-icon a,
.search-icon-close {
  cursor: pointer;
  font-size: 30px;
  color: #00aeff;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.search-icon a:hover,
.search-icon-close:hover {
  opacity: 0.8;
}

.search-icon,
.search-icon-close {
  font-size: 16px;
}

/* --- General --- */

body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* font-family: 'Poppins,Arial,sans-serif'; */
  font-size: 18px;
  color: #ffffff;
  /* position: relative; */
  /* background: #F5F5F5;; */
  background-color: var(--color-primary);
}

p {
  line-height: 1.5;
  margin: 10px 0;
}

p a {
  /* text-decoration: underline */
  color: #ff9966;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
}

h2 {
  display: inline-block;
  background: linear-gradient(
    90deg, 
    #b8860b,   /* vàng đậm */
    #ffd700,   /* vàng chuẩn */
    #fff1a8,   /* ánh sáng nhạt */
    #ffd700,   /* vàng chuẩn */
    #b8860b    /* vàng đậm */
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === HEADING STYLE #3 === */
h3 {
  /* font-size: 28px; */
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 15px;
  position: relative;
}
h3:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 55px;
  background-color: #111;
}
h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 95%;
  max-width: 255px;
  background-color: #333;
}

a {
  color: #ff9966;
}

a:hover,
a:focus {
  color: #00d3ff;
  text-decoration: none;
}

blockquote {
  color: #ffc400;
  font-style: italic;
  position: relative;
  border-left: none;
}

blockquote::after {
  position: absolute;
  top: -15px;
  left: 0;
  z-index: -1;
  line-height: 50px;
  font-family: 'FontAwesome';
  content: "\f10d";
  font-size: 20px;
  color: #ffc400;
}

blockquote p:first-child {
  margin-top: 0;
  color: #e8c41e;
}

hr.small {
  max-width: 150px;
  margin: 15px auto;
  border-width: 10px;
  border-color: inherit;
  border-radius: 3px;
}

.main-content {
  padding-top: 80px;
}

@media only screen and (min-width: 768px) {
  .main-content {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: 130px;
  }
}

.main-explain-area {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 15px inherit;
}

.hideme {
  display: none;
}

::-moz-selection {
  color: rgb(255, 255, 255);
  text-shadow: none;
  background: #00d3ff;
}

::selection {
  color: rgb(255, 255, 255);
  text-shadow: none;
  /* background: #00d3ff; */
}

img::selection {
  color: white;
  background: transparent;
}

img::-moz-selection {
  color: white;
  background: transparent;
}

img {
  max-width: 100%;
}

.disqus-comments {
  margin-top: 30px;
  color: #890000;
}

@media only screen and (min-width: 768px) {
  .disqus-comments {
    margin-top: 40px;
    color: #890000;
  }
}

/* --- Navbar --- */

.navbar-custom {
  z-index: 3;
  /* --- thêm line này để fix lỗi cho thanh navbar ẩn sau mục search --- */
  background: var(--color-primary);
  /* background-color: #16161600; */
  border-bottom: 1px solid #01004b00;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.navbar-custom .navbar-brand {
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 800;
  color: #ffc400;
  background: linear-gradient(
    90deg, 
    #b8860b,   /* vàng đậm */
    #ffd700,   /* vàng chuẩn */
    #fff1a8,   /* ánh sáng nhạt */
    #ffd700,   /* vàng chuẩn */
    #b8860b    /* vàng đậm */
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar-custom .nav li a {
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 800;
  color: #ffc400;
}


.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus {
  color: #00d3ff;
}

.navbar-custom .navbar-brand-logo {
  padding-top: 0px;
  -webkit-transition: padding .5s ease-in-out;
  -moz-transition: padding .5s ease-in-out;
  transition: padding .5s ease-in-out;
}

.navbar-custom .navbar-brand-logo img {
  height: 50px;
  border-radius: 15%;
  -webkit-transition: height .5s ease-in-out;
  -moz-transition: height .5s ease-in-out;
  transition: height .5s ease-in-out;
}

.navbar-custom.top-nav-short {
  background-color: var(--color-primary);
}

.navbar-custom.top-nav-short .navbar-brand-logo {
  padding-top: 5px;
}

.navbar-custom.top-nav-short .navbar-brand-logo img {
  height: 40px;
}

@media only screen and (min-width: 768px) {
  .navbar-custom {
    padding: 20px 0;
    -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
  }

  .navbar-custom.top-nav-short {
    padding: 0;
  }
}

@media (max-width: 786px) {
  .navbar-custom .navbar-brand {
    font-size: 5vw;
  }
}

.navbar-custom .avatar-container {
  position: absolute;
  left: 50%;
  width: 50px;
  margin-top: -25px;
}

.navbar-custom .avatar-container .avatar-img-border {
  width: 100%;
  border-radius: 50%;
  margin-left: -50%;
  display: inline-block;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

.navbar-custom .avatar-container .avatar-img {
  width: 100%;
  border-radius: 50%;
  display: block;
}

.navbar-custom.top-nav-expanded .avatar-container {
  display: none;
}

@media only screen and (min-width: 768px) {
  .navbar-custom .avatar-container {
    width: 100px;
    margin-top: -50px;
  }

  .navbar-custom .avatar-container .avatar-img-border {
    width: 100%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
  }

  .navbar-custom .avatar-container .avatar-img {
    width: 100%;
  }

}

.container-fluid {
  padding-left: max(15px, env(safe-area-inset-left));
  padding-right: max(15px, env(safe-area-inset-right));
}

/* Multi-level navigation links */
.navbar-custom .nav .navlinks-container {
  position: static;
}

.navbar-custom .nav .navlinks-parent:after {
  content: " \25BC";
}

.navbar-custom .nav .navlinks-children {
  width: max-content;
  display: none;
  word-break: break-word;
}

.navbar-custom .nav .navlinks-container .navlinks-children a {
  display: block;
  padding: 10px;
  padding-left: 30px;
  /* background: #f5f5f5; */
  background-color: var(--color-primary);
  text-decoration: none !important;
  border-width: 0 1px 1px 1px;
  font-weight: bold;
}

.navlinks-children {
  display: none;
}
.navlinks-children.show {
  display: block;
}


@media only screen and (max-width: 767px) {
  .navbar-custom .nav .navlinks-container.show-children {
    background: none;
  }

  .navbar-custom .nav .navlinks-container .navlinks-children a {
    background: none;
  }

  .navbar-custom .nav .navlinks-container.show-children .navlinks-children {
    display: block;
  }
  
  .navbar-custom .navbar-brand-logo {
    padding-top: 7px;
  }

  .navbar-custom.top-nav-short .navbar-brand-logo img {
    height: 45px;
  }
}

@media only screen and (min-width: 768px) {
  .navbar-custom .nav .navlinks-container {
    text-align: center;
  }

  .navbar-custom .nav .navlinks-container:hover {
    background: rgba(0, 0, 0, 0.2);
  }

  .navbar-custom .nav .navlinks-container:hover .navlinks-children {
    display: block;
  }

  .navbar-custom .nav .navlinks-children {
    position: absolute;
  }

  .navbar-custom .nav .navlinks-container .navlinks-children a {
    padding-left: 10px;
    border: 1px solid var(--color-primary);
    border-width: 0 1px 1px;
  }
}

/* --- Footer --- */

footer {
  padding: 30px 0;
  /* background: #161616; */
  background: linear-gradient(90deg, var(--color-primary), #00489b 50%, var(--color-primary));
  /* border-top: 1px #EAEAEA solid; */
  border-top: 1px var(--color-primary) solid;
  /* margin-top: 50px; */
  font-size: 14px;
}

footer a {
  color: #ffc400;
}

.text-muted {
  color: #ffc400;
}

footer .list-inline {
  margin: 0;
  padding: 0;
}

footer .copyright {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: center;
  margin-bottom: 0;
}

footer .copyright h2 {
  font-size: 20px;
}

footer .theme-by {
  text-align: center;
  margin: 10px 0 0;
}

@media only screen and (min-width: 768px) {
  footer {
    padding: 40px 0;
  }

  footer .footer-links {
    font-size: 18px;
  }

  footer .copyright {
    font-size: 16px;
  }
}

.qr-code p {
  color: #ffc400;
  display: flex;          /* Thiết lập Flexbox cho thẻ a */
  justify-content: center; /* Canh giữa theo chiều ngang */
  align-items: center;    /* Canh giữa theo chiều dọc */
}

.qr-code a {
  display: flex;          /* Thiết lập Flexbox cho thẻ a */
  justify-content: center; /* Canh giữa theo chiều ngang */
  align-items: center;    /* Canh giữa theo chiều dọc */
}


.qr-code a img {
  width: 120px;
  height: 120px;
  align-items: center;
}


/* --- Post preview --- */

.post-preview {
  padding: 35px 5px;
  border-bottom: 2px solid #202020;
}

/* @media only screen and (min-width: 768px) {
  .post-preview {
    padding: 35px 0;
  }
} */

.post-preview:last-child {
  border-bottom: 0;
}

.post-preview a {
  text-decoration: none;
  color: #ffffff;
}

.post-preview a:focus,
.post-preview a:hover {
  text-decoration: none;
  color: #890000;
}

.post-preview .post-title {
  font-size: 30px;
  margin-top: 0;
}

.post-preview .post-subtitle {
  margin: 0;
  font-weight: 300;
  margin-bottom: 10px;
}

.post-subtitle {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 25px;
}

  /* bangnguyendev add */
  .post-preview .post-title {
    font-size: 36px;
  }
  .post-preview .post-subtitle {
    font-size: 20px;
  }
  /* Tiêu đề chính */
  .post-title.main-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    transition: color 0.3s ease;
  }

  /* Đoạn nội dung mô tả */
  .post-title.sub-content {
    font-size: 16px;
    font-weight: 400;
    color: #a1a1a1;
    line-height: 1.6;
  }

  /* Hover hiệu ứng tiêu đề */
  .post-preview:hover .post-title.sub-content {
    color: #00FFC6;
  }

.post-preview .post-meta,
.post-heading .post-meta {
  color: #808080;
  font-size: 18px;
  font-style: italic;
  margin: 0 0 10px;
}

.post-preview .post-entry {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.post-entry-container {
  display: inline-block;
  width: 100%;
}

.post-entry {
  width: 100%;
}

/* Khung ngoai */
.post-image {
  float: right;
  height: 192px;
  width: 192px;
  filter: grayscale(90%);
  margin-top: -50px;
  transition: filter 0.3s ease, color 0.3s ease; /* Thêm hiệu ứng chuyển từ từ */
}

.post-image:hover {
  filter: grayscale(0%);
}

/* Hinh anh thuc su hien ra */
.post-image img {
  border-radius: 100px;
  height: 160px;
  width: 160px;
  margin: 20px;
}

.post-preview .post-read-more {
  font-weight: 800;
}

@media only screen and (max-width: 500px) {

  .post-image,
  .post-image img {
    height: 100px;
    width: 100px;
  }

  .post-image {
    width: 100%;
    text-align: center;
    float: left;
    margin-bottom: 20px;
    margin-top: -20px;
  }
}

@media only screen and (min-width: 768px) {
  .post-preview .post-title {
    font-size: 36px;
  }
  .post-preview .post-subtitle {
    font-size: 20px;
  }
  /* Tiêu đề chính */
  .post-title.main-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    transition: color 0.3s ease;
  }

  /* Đoạn nội dung mô tả */
  .post-title.sub-content {
    font-size: 16px;
    font-weight: 400;
    color: #a1a1a1;
    line-height: 1.6;
  }

  /* Hover hiệu ứng tiêu đề */
  .post-preview:hover .post-title.sub-content {
    color: #00FFC6;
  }
}

/* Hinh anh vao bai dang */
.post-img-post {
  margin-top: 1%;
  margin-bottom: 5%;
  margin-left: auto;
  margin-right: auto;
  border: solid #1b1b1b;
  background-color: #333333d2;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  padding: 5px;
  width: fit-content;
  text-align: center;
  font-style: italic;
  font-family: 'Courier New', Courier, monospace;
  /* transition: transform 330ms ease-out;  */
}

/* .post-img-post:hover {
  transform: scale(1.5); 
  transition: transform 330ms ease-in; 
} */

.ndb-transbox {
  display: flex; /* Sử dụng Flexbox */
  align-items: center; /* Căn giữa theo chiều dọc */
  justify-content: center; /* Căn giữa theo chiều ngang */
  height: 100%; /* Chiều cao bằng với chiều cao */
  width: 100%; /* Chiều rộng bằng với chiều ngang */
  padding-left: 10px;
  padding-right: 10px;
}


.ndb-transbox h1 {
  color: #ffcc00; /* Cam vàng tươi */
  -webkit-text-stroke: 2.8px var(--color-primary); /* Viền xanh dương đậm */
  /* text-shadow: 
    0 0 5px #ffcc00,
    0 0 10px #ffcc00,
    0 0 20px #ff9900; Tạo hiệu ứng phát sáng cam đậm */
  /* animation: glowing 3s infinite; */
  text-align: center;
  padding: 100px 0 350px 0; /* Tạo khoảng cách trên và dưới */
  z-index: 1; 
}

.ndb-transbox h1::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(60vw, 60vh);  /* lấy cạnh nhỏ hơn của màn hình */
  height: min(60vw, 60vh);
  background: url('/img/Picture-HSL/logo-trans.png') no-repeat center;
  background-size: contain; /* hoặc cover */
  opacity: 0.39; /* độ mờ */
  z-index: -1;  /* luôn nằm dưới chữ */
  pointer-events: none; /* không chặn click */
}

@keyframes glowing {
  0% {
    text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 20px #ff9900;
  }
  50% {
    text-shadow: 0 0 10px #ffe066, 0 0 20px #ffcc00, 0 0 30px #ff9900;
  }
  100% {
    text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 20px #ff9900;
  }
}


.gradient-bg {
  /* width: 100vw; */
  height: auto;
  background: linear-gradient(90deg, var(--color-primary), #0077ff 50%, var(--color-primary));
}

.gradient-text {
  position: relative;
  width: 100%;
  padding-bottom: 2%;
  text-align: center;
  transition: all 1s ease-in-out; /* Hiệu ứng chuyển động mượt mà */
}


.gradient-text p {
  /* font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
  font-family: Poppins,Arial,sans-serif;
  font-size: clamp(1rem, 5vw, 4rem); /* Font size linh hoạt từ 1rem đến 3rem */
  font-weight: 600;
  padding-top: 40px;
  padding-bottom: 40px;
  display: inline-block;
  color: #ffc400;
}

.gradient-text-hot {
  position: relative;
  width: 100%;
  text-align: center;
  transition: all 1s ease-in-out; /* Hiệu ứng chuyển động mượt mà */
}


.gradient-text-hot p {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 5vw, 3rem); /* Font size linh hoạt từ 1rem đến 3rem */
  font-weight: 900;
  display: inline-block;
background: linear-gradient(90deg, #00d3ff, #f0de0a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.img-index {
  width: 100%;        /* Chiều rộng bằng với chiều ngang màn hình */
  height: auto;        /* Giữ tỉ lệ ảnh */
  object-fit: cover;
}

/* Bang Nguyen thêm */
.contact_NFC {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-top: 10px;
  padding-bottom: 20px;
  background-color: #f0d4871f;
  border-radius: 25px;
}

.column {
  flex: 1;
  padding: 0 10px; /* Thêm padding cho mỗi cột */
}

/* Cập nhật cho chữ chạy thì không bị nhảy lên nhảy xuống. Khóa kích thuocs vùng hiern thị chữ chạy. */
.typed_caption {
  width: auto;
  height: 70px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
  padding-top: 5px;
}

/* Cập nhật khoảng cách cho bài viết với ảnh bìa.  */
.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* padding-bottom: 10px;
  padding-top: 20px; */
}

/* --- Tags --- */

.blog-tags {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #999;
  font-size: 15px;
  margin-bottom: 30px;
}

.blog-tags a {
  color: #ffc400;
  font-weight: bold;
  text-decoration: none;
  padding: 0px 5px;
}

.blog-tags a:hover {
  border-radius: 2px;
  color: #008AFF;
  background-color: #EEE;
}

.post-preview .blog-tags {
  margin-top: 5px;
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .post-preview .blog-tags {
    margin-top: 10px;
  }
}

/* --- Post and page headers --- */

.intro-header {
  margin: 80px 0 20px;
  position: relative;
}

.intro-header.big-img {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  margin-top: 0px; /* bangnguyendev fix */
  /* The small navbar is 50px tall + 1px border */
  margin-bottom: -10px;
}

.intro-header.big-img.container {
  max-height: 100%;
}

.intro-header.big-img .big-img-transition {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

.intro-header .page-heading {
  text-align: center;
}

/* 
.big-img {
  height: 1012px;
} */

.big-img.intro-header
{
  display: flex;
  justify-content: center; /* Canh giữa ngang */
  align-items: center;    /* Canh giữa dọc */
  width: 100%; /* Chiều rộng toàn màn hình */
  height: 100%; /* Chiều cao toàn màn hình */
  background-size: cover;
  background-position: center; 
}

.intro-header.big-img .page-heading,
.intro-header.big-img .post-heading {
  display: flex;
  justify-content: center; /* Canh giữa ngang */
  align-items: center;    /* Canh giữa dọc */
  /* text-shadow: 7px 4px 0px #002e7882; */
  padding-top: 3em;
  padding-bottom: 3em;
}

.intro-header .page-heading h1 {
  margin-top: 0;
  font-size: 40px;
}


.intro-header .post-heading h1 {
  margin-top: 0;
  font-size: 40px;
}


.intro-header .page-heading .page-subheading,
.intro-header .post-heading .post-subheading {
  font-size: 27px;
  line-height: 1.1;
  display: block;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  margin: 10px 0 0;
}

.intro-header .post-heading .post-subheading {
  margin-bottom: 20px;
}

.intro-header.big-img .page-heading .page-subheading,
.intro-header.big-img .post-heading .post-subheading {
  font-weight: 400;
}

.intro-header.big-img .page-heading hr {
  box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  -moz-box-shadow: 1px 1px 3px #000;
}

.intro-header.big-img .post-heading .post-meta {
  color: #EEE;
}

.img-desc {
  border-top-left-radius: 10px;
}

.intro-header.big-img .img-desc {
  background: rgba(0, 51, 190, 0.493);
  position: absolute;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #ffc400;
  /* color: linear-gradient(90deg, #00d3ff, #f00ac0);; */
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  right: 0;
  bottom: 0;
  display: none;
}

@media only screen and (min-width: 768px) {
  .intro-header {
    margin-top: 130px;
  }

  .intro-header.big-img {
    margin-top: 0px; /* bangnguyendev fix */
    /* Full navbar is small navbar + 20px padding on each side when expanded */
    margin-bottom: -10px;
  }

  .intro-header .page-heading h1 {
    font-size: 70px;
  }

  .intro-header .post-heading h1 {
    font-size: 50px;
  }

  .intro-header.big-img .img-desc {
    font-size: 14px;
  }
}

.header-section.has-img .no-img {
  margin-top: 0;
  background: #FCFCFC;
  margin: 0 0 40px;
  padding: 20px 0;
  box-shadow: 0 0 5px #AAA;
}

/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
.header-section.has-img .intro-header.no-img {
  display: none;
}

@media only screen and (max-width: 365px) {
  .header-section.has-img .intro-header.no-img {
    display: block;
  }

  .intro-header.big-img {
    width: 100%;
    height: 220px;
  }

  .intro-header.big-img .page-heading,
  .intro-header.big-img .post-heading {
    display: none;
  }

  .header-section.has-img .big-img {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 325px) {
  .intro-header.big-img {
    height: 200px;
  }
}

.caption {
  text-align: center;
  font-size: 14px;
  padding: 10px;
  font-style: italic;
  margin: 0;
  display: block;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

#header-gh-btns {
  margin-bottom: 15px;
}

@media only screen and (max-width: 500px) {
  #header-gh-btns>iframe {
    display: block;
    margin-bottom: 5px;
  }
}

/* Sửa giao diện sub-title, tạo phông nền mờ phía dễ đọc chữ. */
.intro-header .page-heading .page-subheading {
  padding-bottom: 10px;
  border-radius: 8px;
  margin-left: 10px;
  margin-right: 10px;
}

#button_onTop {
  display: inline-block;
  /* color: #ffffff; */
background: linear-gradient(90deg, #00d3ff, #f0de0a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 10px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
}
#button_onTop::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button_onTop:hover {
  cursor: pointer;
  background-color: #333;
}
#button_onTop:active {
  background-color: #555;
}
#button_onTop.show {
  opacity: 1;
  visibility: visible;
}




/* --- Pager --- */

.pager li a {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 10px 5px;
  background: linear-gradient(
    90deg, 
    #b8860b,   /* vàng đậm */
    #ffd700,   /* vàng chuẩn */
    #fff1a8,   /* ánh sáng nhạt */
    #ffd700,   /* vàng chuẩn */
    #b8860b    /* vàng đậm */
  );
  border-radius: 15px;
  color: var(--color-primary);
  border: 1px solid #161616;
}

@media only screen and (min-width: 768px) {
  .pager li a {
    padding: 15px 25px;
  }
}

.pager li a:hover,
.pager li a:focus {
  color: #FFF;
background: linear-gradient(90deg, #00d3ff, #f0de0a);
  border: 1px solid #161616;
}

.pager {
  margin: 10px 0 0;
}

.pager.blog-pager {
  margin-top: 0;
}

@media only screen and (min-width: 768px) {
  .pager.blog-pager {
    margin-top: 10px;
  }
}

/* --- Tables --- */

table {
  padding: 0;
  border-collapse: collapse; /* Gộp viền cho gọn */
  width: 100%;
  overflow: hidden; /* Ẩn phần viền thừa ở góc */
  border-radius: 15px; /* Bo tròn 4 góc */
  /* margin: 20px; */
}

table th {
  border-top: 1px solid #cccccc00;
  background: linear-gradient(0deg, #635400, #a18401);
  margin: 0;
  padding: 0;
}

table tr {
  border-top: 1px solid #cccccc00;
  background-color: #07015a;
  margin: 0;
  padding: 0;
}

table tr:nth-child(2n) {
background: linear-gradient(0deg, #a7771f, #c47500);
}

table tr th {
  font-weight: bold;
  border: 1px solid #cccccc00;
  text-align: center;
  margin: 0;
  padding: 6px 13px;
}

table tr td {
  border: 1px solid #ffffff00;
  text-align: center;
  margin: 0;
  padding: 6px 13px;
}

table tr th :first-child,
table tr td :first-child {
  margin-top: 0;
}

table tr th :last-child,
table tr td :last-child {
  margin-bottom: 0;
}

/* --- Social media sharing section --- */

#social-share-section {
  margin-bottom: 30px;
}

/* Custom khi sử dụng thiết bị di dộng */
@media screen and (max-width: 600px) {
  .mobile-js-hide {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

/* --- Custom: For Ads' alignment --- */
.ads {
  text-align: center;
}

/* --- Notification boxes --- */
.box-note,
.box-warning,
.box-error {
  padding: 15px 15px 15px 10px;
  margin: 20px 20px 20px 5px;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 5px 3px 3px 5px;
}

.box-note {
  background-color: #161616;
  border-left-color: #2980b9;
}

.box-warning {
  background-color: #161616;
  border-left-color: #f1c40f;
}

.box-error {
  background-color: #161616;
  border-left-color: #c0392b;
}

/* Fix table border github gist snippets */

.gist,
.gist-file table tr {
  border: unset;
}

.gist,
.gist-file table tr td {
  border: unset;
}

/* --- Custom: About me section --- */
#aboutme-section {
  font-size: 19px;
}

.about-text {
  position: relative;
  margin-left: 30px;
}

.about-icon {
  font-size: 24px;
  position: absolute;
  left: -40px;
  margin-top: 5px;
}

#aboutme-section p:last-child {
  margin-bottom: 0;
}

/* fix .navbar-toggle */

.navbar-default button.navbar-toggle:focus,
.navbar-default button.navbar-toggle:hover {
  background-color: initial;
}

.navbar-default button.navbar-toggle[aria-expanded="true"] {
  background-color: rgba(0, 0, 0, 0.2);
}

.navbar-toggle {
  border-radius: 10px;
  border-color: linear-gradient(90deg, #00d3ff, #f00ac0) !important; /* Màu đỏ, bạn có thể thay đổi */
}


.navbar-default .navbar-toggle {
  background-color: linear-gradient(90deg, #00d3ff, #f00ac0) !important; /* Màu đỏ, bạn có thể thay đổi */
}

/* Tags page */

.tag-btn {
  margin: 5px;
}

#full-tags-list {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#full-tags-list .tag-entry {
  margin: 0 0 15px 25px;
}

#full-tags-list .tag-entry a {
  font-size: 20px;
}

#full-tags-list .tag-entry .entry-date {
  color: #808080;
  font-style: italic;
  font-size: 16px;
}

/* Add thêm .no-scroll để bổ sung vào nút search */
.no-scroll {
  overflow-y: hidden;
}

/* .mini-post-list hiển thị kết quả tìm kiếm */
.mini-post-list {
  margin: 20px 0 15px 0;
}

.mini-post-list .tag-text {
  font-weight: 200;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
}

.mini-post-list .post-preview {
  position: relative;
}


/* Title "Search..." */
.waviy {
  font-family: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
  /* padding-right: 150px; */
  padding-top: 10px;
  text-align: center;
  -webkit-box-reflect: below -70px linear-gradient(transparent, rgba(107, 13, 13, 0.144));
}

.waviy span {
  position: relative;
  display: inline-block;
background: linear-gradient(90deg, #00d3ff, #f0de0a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: waviy 2s infinite;
  animation-delay: calc(.1s * var(--i))
}

@keyframes waviy {

  0%,
  40%,
  100% {
    transform: translateY(0)
  }

  20% {
    transform: translateY(-20px)
  }
}


/*
 *  STYLE scrollbar
 */

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #161616;
}
::-webkit-scrollbar {
  width: 15px;
  height: 10px; 
  background-color: #161616;
}
::-webkit-scrollbar-thumb {
  background-color: #c79800;
  background-image: -webkit-linear-gradient(45deg,
      rgba(255, 255, 255, .2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, .2) 50%,
      rgba(255, 255, 255, .2) 75%,
      transparent 75%,
      transparent);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #00a5c2;
  background-image: -webkit-linear-gradient(-45deg,
      rgba(255, 255, 255, .2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, .2) 50%,
      rgba(255, 255, 255, .2) 75%,
      transparent 75%,
      transparent);
  border-radius: 10px;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:horizontal{
  background-color: rgb(83, 83, 83);
  background-image: -webkit-linear-gradient(45deg,
      rgba(255, 255, 255, .2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, .2) 50%,
      rgba(255, 255, 255, .2) 75%,
      transparent 75%,
      transparent);
  border-radius: 0px 5px 5px 0px;
  cursor: pointer;
}
::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: rgba(83, 83, 83, 0.212);
  background-image: -webkit-linear-gradient(-45deg,
      rgba(0, 0, 0, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(0, 0, 0, .2) 50%,
      rgba(0, 0, 0, .2) 75%,
      transparent 75%,
      transparent);
  border-radius: 0px 5px 5px 0px;
}

/* Hiển thị category ở inddex */
.category-show {
  background-color: rgba(193, 193, 193, 0.2);
  border-radius: 5px;
  width: fit-content;
  padding: 4px;
  color: rgba(51, 51, 51, 1);
  font-weight: bold;
  font-size: smaller;
  margin-top: 5px;
  margin-bottom: 5px;
  text-shadow: 2px 2px 5px rgba(61, 58, 55, 0.5); /* Áp dụng bóng */
  transition: background-color 0.3s ease, color 0.3s ease; /* Thêm hiệu ứng chuyển từ từ */
}

/* Hover effect */
.category-show:hover {
  background-color: rgba(34, 34, 33, 0.904); /* Thay đổi màu nền khi hover */
  color: #f8f8f8; /* Thay đổi màu chữ khi hover */
}


/* Reset some default styles for consistency */
select {
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}


/* Styling for the select element */
#optiongroup {
  width: 260px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ffb374;
  border-radius: 10px;
  background-color: #f9f9f9;
  outline: none; /* Remove default focus outline */
}

/* Styling for the optgroup labels */
optgroup {
  font-weight: bold;
  color: #333;
}

/* Styling for the options */
option {
  padding: 4px 8px;
}

/* Hover effect for options */
option:hover {
  background-color: #ddd;
}



.container {
  width: 100%; /* Chiều rộng bằng với chiều rộng của viewport */
  max-width: 100%; /* Đảm bảo không vượt quá chiều rộng của phần tử cha */
  box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng thể */
  padding-left: 0%;
  padding-right: 0%;  
}

/* Tổng quan bố cục của phần content */
.content-index {
  /* display: flex; Sử dụng flexbox để sắp xếp nội dung */
  flex-direction: column; /* Sắp xếp theo chiều dọc */
  justify-content: flex-end; /* Canh nội dung về cuối theo chiều dọc */
  align-items: center; /* Canh giữa theo chiều ngang */
  /*height: 100%;  Chiều cao bằng với toàn màn hình */
  width: 100%; /* Chiều rộng bằng với toàn màn hình */
  color: white; /* Màu chữ trắng */
  text-align: center; /* Căn giữa văn bản */
  padding: 40px 20px; /* Khoảng cách bên trong */
}

/* Phần tiêu đề chính (summary) */
.summary {
  font-size: 4rem; /* Kích thước chữ lớn */
  font-weight: 900; /* Chữ đậm */
  background-color: rgba(0, 0, 0, 0); /* Không có nền (trong suốt) */
  padding: 30px 20px; /* Khoảng cách bên trong */
  border-radius: 10px; /* Bo tròn các góc */
    background: linear-gradient(
    90deg, 
    #b8860b,   /* vàng đậm */
    #ffd700,   /* vàng chuẩn */
    #fff1a8,   /* ánh sáng nhạt */
    #ffd700,   /* vàng chuẩn */
    #b8860b    /* vàng đậm */
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mô tả nội dung */
.description-content-index-sp {
  max-width: 768px; /* Giới hạn chiều rộng tối đa */
  text-align: center; /* Văn bản căn giữa */
  font-size: 2rem; /* Kích thước chữ vừa phải */
  font-weight: 400; /* Chữ thường (không đậm) */
  color: #ffffff; /* Màu chữ trắng */
  padding: 0px 20px; /* Khoảng cách bên trong theo chiều ngang */
  margin: 10px auto; /* Căn giữa và tạo khoảng cách trên/dưới */
  border-radius: 10px; /* Bo tròn các góc */
}

/* Khu vực chứa các thành phần (components) */
.details {
  display: flex; /* Sử dụng flexbox */
  flex-wrap: wrap; /* Nội dung sẽ tự xuống dòng nếu không đủ không gian */
  gap: 10px; /* Khoảng cách giữa các components */
  justify-content: center; /* Căn giữa theo chiều ngang */
  margin-top: 20px; /* Khoảng cách phía trên */
}

/* Định dạng từng thành phần trong khu vực components */
.component {
  display: flex; /* Sử dụng flexbox */
  flex-direction: column; /* Xếp chồng các phần tử bên trong */
  align-items: center; /* Căn giữa theo chiều ngang */
  flex: 1 1 calc(100%/3 - 10px); /* Chia đều thành 3 cột (33.33% chiều rộng mỗi cột) */
  padding: 30px 40px; /* Khoảng cách bên trong */
  border: 1px solid #cccccc00; /* Viền ẩn (có thể điều chỉnh nếu cần) */
  border-radius: 15px; /* Bo tròn góc của component */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  */
  transform: scale(1); /* Kích thước mặc định */
  transition: transform 0.5s ease, box-shadow 0.5s ease; /* Hiệu ứng mượt khi hover */
}



/* Avatar bên trong component */
.avatar {
  width: 300px; /* Kích thước chiều ngang của avatar */
  height: 300px; /* Kích thước chiều cao của avatar */
  border-radius: 15%; /* Làm avatar thành hình tròn */
  object-fit: cover; /* Đảm bảo hình ảnh không bị méo */
  margin-bottom: 10px; /* Khoảng cách dưới avatar */
  transition: transform 0.5s ease; /* Thêm transition cho ảnh */
}

/* Khi hover vào component -> chỉ ảnh zoom */
.component:hover .avatar {
  transform: scale(1.1);
}

/* Tên của component */
.component-name {
  margin-top: 10px; /* Khoảng cách phía trên */
  width: 350px; /* Kích thước chiều ngang của tên */
  height: fit-content; /* Kích thước chiều cao của tên */
  font-size: 1.5rem; /* Kích thước chữ của tên */
  font-weight: bold; /* Độ dày bình thường */
  color: #050049; /* Màu chữ trắng */
  text-align: left; /* Căn giữa văn bản */
  padding: 5px 15px; /* Khoảng cách bên trong */
  border-radius: 20px; /* Bo tròn góc của nền tên */
  background: rgb(255, 255, 255); /* Nền mờ đen */
}

.title-label {
  display: block;
  width: 100%;
  font-size: 1.5rem;
  font-weight: 750;
  color: #fff;
  padding: 10px 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  text-align: left;
  text-transform: uppercase; /* luôn viết hoa */
  /* Gradient nổi bật */
  background: linear-gradient(90deg, #c9a012, #e8c41e);
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}

/* Container phần thông tin */
.tour-info {
  text-align: left;          /* Canh trái */
  font-size: 1.2rem;         /* Nhỏ hơn phần tiêu đề */
  margin-top: 5px;           /* Tạo khoảng cách với tiêu đề */
  line-height: 1.5;          /* Giãn dòng vừa phải */
}

/* Style riêng cho giá */
.tour-price {
  font-size: 2rem;           /* Lớn hơn một chút so với thời gian */
  font-weight: bold;         /* Làm đậm để nổi bật */
  color: #b8860b;            /* Màu vàng nổi bật (bạn có thể đổi) */
  text-align: center;         /* Canh giữa */
  margin-top: 10px;          /* Tạo khoảng cách với phần trên */
}

.old-price {
  text-decoration: line-through;
  color: #aaa;
  font-size: 1.5rem;
}

.new-price {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b); /* vàng ánh kim */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); /* tạo chiều sâu */
  letter-spacing: 0.5px;
}

/* Media query cho màn hình nhỏ (tối đa 768px) */
@media (max-width: 768px) {
  .component {
    /*flex: 1 1 calc(50% - 10px);  Chia thành 2 cột */
    /* max-width: 150px; Giảm chiều rộng tối đa */
    padding: 5px; /* Giảm khoảng cách bên trong */
  }
  .summary {
    font-size: 3rem; /* Giảm kích thước chữ */
  }
  .description-content-index-sp {
    font-size: 1.5rem; /* Giảm kích thước chữ mô tả */
  }
  .avatar {
    width: 100px; /* Giảm kích thước avatar */
    height: 100px;
  }
  .component-name {
    font-size: 1.4rem; /* Giảm kích thước tên */
  }
}



/* Bọc ảnh */
.image-container {
  position: relative; /* Làm gốc cho các nhãn overlay */
  width: 350px;
  height: 300px;
  border-radius: 15%; 
  overflow: hidden; /* đảm bảo label không tràn ra ngoài */
}

/* Nhãn khuyến mãi góc trên trái */
.promo-label {
  position: absolute;
  top: 35px;
  left: 10px;
  background: #ff9800;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}

.image-container img.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15%;
}

/* Label địa điểm */
.location-label {
  position: absolute;
  bottom: 0;      /* canh dưới */
  left: 0;        /* canh trái */
  width: 100%;    /* kéo ngang bằng ảnh */
  padding: 8px 10px 8px 25px; /* thêm padding-left lớn hơn */
  font-size: 1.3rem;
  font-weight: bold;
  text-transform: uppercase; /* luôn viết hoa */
  color: #fff;
  background: rgba(0,70,126,0.8);
  display: flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
}

.container-post {
  max-width: 100%; /* Đảm bảo không vượt quá chiều rộng của phần tử cha */
  box-sizing: border-box; /* Đảm bảo padding và border không làm thay đổi kích thước tổng thể */
  margin-top: 2em;
  padding-left: 15%;
  padding-right: 15%;  
  position: relative;
}

/* Cập nhật khoảng cách cho bài viết với ảnh bìa.  */
.row-post {
  margin-left: auto;
  margin-right: auto;
  /* padding-bottom: 10px;
  padding-top: 20px; */
}


/* Media query cho màn hình nhỏ (tối đa 768px) */
@media (max-width: 768px) {
  .container-post {
    padding-left: 5%;
    padding-right: 5%;  
  }
  .row-post {
    margin-left: auto;
    margin-right: auto;
    /* padding-bottom: 10px;
    padding-top: 20px; */
  }
}

/* Media query cho màn hình rất nhỏ (tối đa 480px) */
@media (max-width: 480px) {
  .container-post {
    padding-left: 2%;
    padding-right: 2%;  
  }
  .row-post {
    margin-left: auto;
    margin-right: auto;
    /* padding-bottom: 10px;
    padding-top: 20px; */
  }
}


.zalo-chat-widget {
  right: 25px !important;
  bottom: 80px !important;
}


.specification {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px;
}
.box-spec {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 15px;
  margin: 10px;
  width: 22%;
  min-width: 200px;
  font-size: 14px;
}
.icon-spec {
  font-size: 40px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.icon-spec img {
  display: block;
  margin: 0 auto;
}


.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio = 9/16 = 0.5625 */
  height: 0;
  overflow: hidden;
  border-radius: 12px; /* bo góc tùy thích */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  max-width: 800px;
  margin: 0 auto;
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Container chính */
.cliptiktok {
  display: flex;
  flex-wrap: wrap;               /* Cho phép xuống hàng khi không đủ chỗ */
  justify-content: center;       /* Canh giữa các item */
  gap: 16px;                     /* Khoảng cách giữa các video */
  max-width: 100%;               /* Không vượt quá màn hình */
  margin: 25px auto;                /* Canh giữa container */
  border-radius: 20px;           /* Bo tròn góc */
  overflow: hidden;              /* Ẩn phần thừa để giữ bo tròn */
  box-shadow: 
    -20px -20px 40px rgba(0, 211, 255, 0.7),   /* xanh neon góc trên trái */
    20px  20px 40px rgba(240, 10, 192, 0.7);  /* hồng neon góc dưới phải */

  box-sizing: border-box;
}

/* Các item bên trong */
.cliptiktok .tiktok-embed,
.cliptiktok blockquote,
.cliptiktok iframe,
.cliptiktok div {
  flex: 1 1 content;        /* Tối thiểu 300px, co giãn linh hoạt */
  border-radius: 20px;    /* Bo tròn cho từng item */
  overflow: hidden;
  box-sizing: border-box;
}


/* Zalo chat button custom */
/* Kiểu chung cho icon */
.social-icon {
  position: fixed;
  left: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  text-decoration: none;
  z-index: 9999;
}
.social-icon:hover {
  text-decoration: none;
  color: white;
  transform: scale(1.1);
}

/* Icon Zalo (màu xanh nhạt) */
.social-icon.zalo {
  bottom: 100px;
  background: #ffffff;
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.8);
  animation: ring 1.2s infinite, glow-lightblue 1.5s infinite alternate;
}

/* Icon điện thoại (màu vàng) */
.social-icon.phone {
  bottom: 20px;
  background: #ffc400;
  box-shadow: 0 0 15px rgba(255, 196, 0, 0.8);
  animation: ring 1.2s infinite, glow-yellow 1.5s infinite alternate;
}


/* Hiệu ứng rung lắc (lung lay) */
@keyframes ring {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(15deg); }
  20%  { transform: rotate(-15deg); }
  30%  { transform: rotate(10deg); }
  40%  { transform: rotate(-10deg); }
  50%  { transform: rotate(5deg); }
  60%  { transform: rotate(-5deg); }
  70%  { transform: rotate(0); }
  100% { transform: rotate(0); }
}

/* Hiệu ứng phát quang */
/* Glow vàng */
@keyframes glow-yellow {
  from {
    box-shadow: 0 0 10px rgba(255, 196, 0, 0.5),
                0 0 20px rgba(255, 196, 0, 0.5);
  }
  to {
    box-shadow: 0 0 20px rgba(255, 196, 0, 1),
                0 0 40px rgba(255, 196, 0, 1);
  }
}

/* Glow xanh đậm */
@keyframes glow-blue {
  from {
    box-shadow: 0 0 10px rgba(24, 119, 242, 0.5),
                0 0 20px rgba(24, 119, 242, 0.5);
  }
  to {
    box-shadow: 0 0 20px rgba(24, 119, 242, 1),
                0 0 40px rgba(24, 119, 242, 1);
  }
}

/* Glow xanh nhạt (Zalo) */
@keyframes glow-lightblue {
  from {
    box-shadow: 0 0 10px rgba(0, 128, 255, 0.5),
                0 0 20px rgba(0, 128, 255, 0.5);
  }
  to {
    box-shadow: 0 0 20px rgba(0, 128, 255, 1),
                0 0 40px rgba(0, 128, 255, 1);
  }
}