html {
   scroll-behavior: smooth;
}

* {
   box-sizing: border-box;
}

a {
   text-decoration: none;
}

.items-end {
   align-items: flex-end;
}

.items-start {
   align-items: flex-start;
}

.hidden {
   display: none;
}

.items-center {
   align-items: center;
}

.line-clamp-1 a {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
}

.line-clamp-2 a {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
}

.wp-block-post-excerpt__excerpt,
.line-clamp-3 a {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.text-end {
   text-align: end;
}

.justify-center {
   justify-content: center;
}

.flex {
   display: flex;
}

.flex-1 {
   flex: 1;
}

.whitespace-nowrap {
   white-space: nowrap;
}

.truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.top-0 {
   top: 0;
}

.bottom-0 {
   bottom: 0;
}

.absolute {
   position: absolute;
}

.relative {
   position: relative;
}

.overflow-hidden {
   overflow: hidden;
}

.z-0 {
   z-index: 0;
}

.z-1 {
   z-index: 1;
}

.opacity-40 {
   opacity: 0.4;
}

.right-0 {
   right: 0;
}

.h-fit {
   height: fit-content;
}

.h-full {
   height: 100%;
}

.col-span-full {
   grid-column: 1 / -1;
}

.w-fit {
   width: fit-content;
}

.block {
   display: block;
}

.inline-block {
   display: inline-block;
}

.shrink-0 {
   flex-shrink: 0;
}

.shadow-1 {
   box-shadow:
      0px 4px 6px -4px #0000001a,
      0px 10px 15px -3px #0000001a;
}

.shadow-2 {
   box-shadow:
      0px 2px 4px -2px #0000001a,
      0px 4px 6px -1px #0000001a;
}

.shadow-3 {
   box-shadow:
      0px 8px 10px -6px #0000001a,
      0px 20px 25px -5px #0000001a;
}

.shadow-4 {
   box-shadow: 0px 8px 30px 0px #0000000a;
}

.wp-tag {
   font-weight: 500;
   font-size: var(--wp--preset--font-size--custom-12);
   padding: 6px 12px;
   transition: all 100ms;
   background-color: #eff6ff;
   border-radius: 24px;
}

.wp-tag a {
   color: #155dfc;
}

.wp-tag:hover {
   background-color: #0044ff;
}

.wp-tag:hover > a {
   color: white;
   text-decoration: none;
}

.wp-tag:active {
   background-color: #0033bf;
}

.wp-tag:active > a {
   color: white;
}

.wp-block-image {
   display: flex;
}

.select-trigger,
input,
textarea,
select {
   font-size: var(--wp--preset--font-size--custom-7);
   outline: none;
   font-family: inherit;
   height: 42px;
   box-sizing: border-box;
   border: 1px solid #bebebe;
   border-radius: 8px;
   padding: 11px 16px;
   color: #2c2c2c;
   font-weight: 500;
}

/* 1. Global Autofill Fix */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
   -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
   box-shadow: 0 0 0px 1000px transparent inset !important;

   -webkit-text-fill-color: inherit !important;

   /* 🔥 Smooth out the transition so it doesn't flicker */
   transition:
      background-color 5000s ease-in-out 0s,
      color 5000s ease-in-out 0s;
}

/* 2. Specific field fix (if needed) */
#wpforms-19553-field_3:-webkit-autofill {
   -webkit-text-fill-color: white !important;
}

/* 3. Hover/Focus states */
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
   -webkit-text-fill-color: inherit !important;
}

/* 4. Firefox support */
input:autofill {
   filter: none; /* Removes the default highlight */
   -webkit-text-fill-color: inherit !important;
}

textarea {
   min-height: 300px;
}

select::placeholder,
textarea::placeholder,
input::placeholder {
   color: #bebebe;
}

select:focus,
textarea:focus,
input:focus {
   border-color: #b0c5ff;
}

/* ROOT */
.language-select {
   font-size: var(--wp--preset--font-size--custom-12);
   position: relative;
   width: fit-content;
}

/* TRIGGER */
.language-select-trigger {
   display: flex;
   align-items: center;
   cursor: pointer;
   position: relative;
   gap: 12px;
}

/* VALUE */
.language-select-value {
   font-size: inherit;
   font-weight: 500;
   color: inherit;
}

.language-select-value.placeholder {
   color: #bebebe;
}

/* ARROW (SVG container) */
.language-select-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.3s ease;
}

/* SVG itself */
.language-select-arrow svg {
   width: 18px;
   height: 18px;
}

/* DROPDOWN */
.language-select-dropdown {
   position: absolute;
   right: 0;
   bottom: 100%;

   background: #fff;
   border-radius: 12px;
   padding: 8px;
   color: #2c2c2c;
   border: 1px solid #c4c5da33;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);

   transition: 0.2s ease;
   z-index: 1000;
}

.language-select a {
   color: inherit;
}

.language-flag {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   object-fit: cover;
}

/* OPEN STATE */
.language-select.open .language-select-dropdown {
   opacity: 1;
   visibility: visible;
   display: flex;
   flex-direction: column;
   gap: 4px;
   width: 254px;
   transform: translateY(0);
}

/* ROTATE SVG */
.language-select.open .language-select-arrow {
   transform: rotate(180deg);
}

/* OPTION */
.language-select-option {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px;
   border-radius: 8px;

   font-size: var(--wp--preset--font-size--custom-12);
   font-weight: 500;

   color: #2c2c2c;
   text-decoration: none;

   position: relative;
   cursor: pointer;
}

/* HOVER */
.language-select-option.active,
.language-select-option:hover {
   background: #f3f9ff;
   color: #0044ff;
}

/* ACTIVE CHECK ICON */
.language-select-option.active::after {
   content: '';
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   width: 16px;
   height: 16px;

   background: url('data:image/svg+xml;utf8,<svg fill="%230044ff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7.629 13.233L4.4 10.004l-1.4 1.4 4.629 4.629L17 6.662l-1.4-1.4z"/></svg>')
      no-repeat center;
   background-size: contain;
}

/* SEARCH */
.search-field {
   position: relative;
}

.search-field .wp-block-search {
   width: 100%;
}

.search-field input {
   padding-left: 44px;
}

.search-icon {
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
}

.wp-block-categories-list {
   display: grid;
   gap: 8px;
   list-style: none;
}

.text-center {
   text-align: center;
}

.sidebar {
   top: 16px !important;
   position: sticky;
   gap: 32px;
   display: flex;
   flex-direction: column;
}

.sidebar .recent-post:hover {
   background-color: #e6ecff;
}

.sidebar .recent-post:hover h2 a {
   color: #003de6;
}

/* COOKIE CONSENT */
.cc-banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   padding: 1%;
   position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 99999;
   background-color: white;
   line-height: 1.5;
}

.cc-modal button,
.cc-banner button {
   border: none;
   padding: 10px;
   height: 48px;
   font-size: 15px;
   font-weight: 500;
   border-radius: 10px;
   color: #0044ff;
   cursor: pointer;
   font-family: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
}

.cc-modal button {
   padding: 16px;
}

.cc-modal .btn-primary,
.cc-banner .btn-primary {
   color: white;
}

.cc-modal button:not(.btn-primary),
.cc-banner button:not(.btn-primary) {
   background-color: white;
   border: 1px solid #0044ff;
}

.cc-banner-content {
   flex: 1;
}

.cc-banner-content p {
   margin: 0px;
}

.cc-banner-button {
   display: flex;
   gap: 8px;
   align-items: stretch;
   flex-direction: column;
}

.cc-modal {
   position: fixed;
   inset: 0;
   display: flex;
   visibility: hidden;
   opacity: 0;
   transition: all ease 0.1s;
   background-color: #0000006c;
   z-index: 999999;
   line-height: 1.5;
}

.cc-modal h3,
.cc-modal p {
   margin: 0px;
}

.cc-modal-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0px 16px 16px;
   border-bottom: 1px solid #00000048;
   margin: 0px -1rem;
}

.cc-modal-title h3 {
   font-size: 18px;
   font-weight: bold;
}

.cc-modal[data-state='open'] {
   visibility: visible;
   opacity: 100;
}

.cc-modal-content {
   max-width: 90%;
   display: flex;
   margin: auto;
   flex-direction: column;
   position: relative;
   z-index: 1;
   background-color: white;
   border-radius: 10px;
   padding: 1rem;
   max-height: 90vh;
}

#cc-close {
   background-color: transparent;
   height: unset !important;
   color: inherit !important;
   border: none !important;
   padding: 0px !important;
}

.cc-modal-form {
   padding: 1rem 0px;
   display: flex;
   flex-direction: column;
   gap: 30px;
   overflow: auto;
}

.cc-modal-group {
   display: flex;
   align-items: center;
   gap: 40px;
}

.cc-modal-group-label {
   flex: 1;
}

.cc-modal-group-label label {
   font-weight: bold;
}

.cc-modal-group-label p {
   font-size: 15px;
}

.cc-modal-button {
   padding: 1rem 1rem 0px;
   margin: 0px -1rem;
   border-top: 1px solid #00000048;
   display: flex;
   justify-content: end;
   align-items: center;
   gap: 8px;
}

.cc-switch {
   display: inline-block;
   cursor: pointer;
}

.cc-switch input {
   display: none;
}

.cc-slider {
   display: block;
   width: 42px;
   height: 22px;
   background: #ccc;
   border-radius: 999px;
   position: relative;
   transition: 0.25s;
}

.cc-slider::before {
   content: '';
   position: absolute;
   width: 18px;
   height: 18px;
   top: 2px;
   left: 2px;
   background: #fff;
   border-radius: 50%;
   transition: 0.25s;
}

#cc-consent-btn {
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 56px;
   border: none;
   background-color: white;
   position: fixed;
   left: 40px;
   bottom: 40px;
   cursor: pointer;
   z-index: 99999;
}

/* ON */
.cc-switch input:checked + .cc-slider {
   background: #0044ff;
}

.cc-switch input:checked + .cc-slider::before {
   transform: translateX(20px);
}

/* Disabled */
.cc-switch input:disabled + .cc-slider {
   background: #999;
   opacity: 0.6;
   cursor: not-allowed;
}

/* SCROLL TO TOP */
#back-to-top {
   position: fixed;
   right: 40px;
   bottom: 40px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   background: #0044ff;
   color: #fff;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: all 0.3s ease;
   z-index: 999;
}

#back-to-top.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

/* FORM */
.custom-form {
   font-size: var(--wp--preset--font-size--custom-11) !important;
}

.custom-form p {
   margin: 0px;
}

.custom-form .form-field {
   position: relative;
}

.custom-form .form-field::before {
   content: '';
   width: 20px;
   height: 20px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 16px;
   background: url('https://blog.mobile-id.vn/wp-content/uploads/2026/04/Vector-1.svg') no-repeat center;
   background-size: contain;
}

.custom-form input {
   width: 100%;
   color: #f3f9ff;
   height: 42px;
   padding: 0px 16px 0 44px;
   background-color: transparent;
   border: 1px solid #f3f9ff;
   border-radius: 8px;
}

.custom-form input::placeholder {
   color: #f3f9ff;
}

.custom-form .button-submit {
   width: 100%;
   border: none;
   font-family: inherit;
   color: #0044ff;
   font-weight: 700;
   background-color: white;
   padding: 8px;
   border-radius: 8px;
   cursor: pointer;
   font-size: var(--wp--preset--font-size--custom-12);
}

.custom-form .button-submit {
   margin-top: 16px;
}

.custom-form .button-submit:hover {
   color: #002999;
}

.btn-primary {
   background-color: #0044ff;
}

.btn-primary:hover {
   background-color: #002999;
}

.btn-primary:disabled {
   background-color: #b0c5ff;
}

.btn-text {
   color: #0044ff;
}

.btn-text:hover {
   color: #002999;
}

.btn-text:disabled {
   color: #b0c5ff;
}

.btn-text a,
.btn-primary a {
   color: inherit;
}

/* PAGINATION */
.wp-block-query-pagination {
   gap: 8px;
   margin-top: 48px;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
   font-weight: 500;
   font-size: 1rem;
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--wp--preset--color--contrast);
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
   width: 42px;
   height: 42px;
   display: block;
   text-align: center;
   align-content: center;
   border: 1px solid #dfdfdf;
   border-radius: 10px;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current {
   border-color: #0044ff;
   background-color: #0044ff;
   color: white;
}

.wp-block-query-pagination .wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination .wp-block-query-pagination-next-arrow {
   margin: unset;
   font-size: 0; /* ẩn chữ */
}

.wp-block-query-pagination-next::after {
   content: '';
   display: inline-block;
   width: 5px;
   height: 10px;

   background: url('https://blog.mobile-id.vn/wp-content/uploads/2026/04/Vector.svg') no-repeat center;
   background-size: contain;
}

.wp-block-query-pagination-previous::before {
   content: '';
   display: inline-block;
   width: 5px;
   height: 10px;

   background: url('https://blog.mobile-id.vn/wp-content/uploads/2026/04/Vector.svg') no-repeat center;
   background-size: contain;

   transform: rotate(180deg);
}

/* CATEGORIES */
.wp-block-categories-list .cat-item {
   display: flex;
   align-items: center;
   gap: 4px;
}

.cat-item.current-cat a,
.cat-item.current-cat {
   color: #0044ff;
}

.wp-block-categories-list .cat-item::after {
   margin-left: auto;
   content: '';
   width: 14px;
   height: 20px;
   display: block;
   left: 16px;
   background: url('https://blog.mobile-id.vn/wp-content/uploads/2026/04/→.svg') no-repeat center;
   background-size: contain;
}

/* COMMENTS */

.wp-block-comments {
   padding: 16px 0px;
}

.wp-block-comments p {
   margin: unset;
}

.wp-block-comment-template ol {
   margin-left: 1.5rem;
   padding-left: 1.5rem;
   border-left: 2px solid #c4c5da4d;
}

.wp-block-comments .form-group {
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
}

.wp-block-comments .form-group label {
   font-size: var(--wp--preset--font-size--custom-12) !important;
}

.wp-block-comments .form-submit.wp-block-button {
   grid-column: 1 / -1;
   text-align: end;
}

.wp-block-comments .wp-element-button {
   font-weight: 700;
   border-radius: 8px;
   font-size: 14px;
   color: white;
   padding: 12px 24px;
}

.wp-block-comments .wp-element-button:hover {
   background-color: #002999;
}

.wp-block-comments .wp-element-button:disabled {
   background-color: #b0c5ff;
}

.logged-in-as {
   display: flex;
   align-items: center;
   gap: 8px;
}

.logged-in-as img {
   border-radius: 100%;
}

.logged-in-as .logged-in-as-user {
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
}

/* SLIDER */

/* Container Spacing */
.recent-posts-slider {
   width: 100%;
   gap: 32px;
}

.recent-posts-slider .swiper-wrapper {
   align-self: stretch;
}

/* Card Styling */
.recent-posts-slider .post-card {
   background: #fff;
   border-radius: 10px;
   overflow: hidden;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.recent-posts-slider .swiper-slide {
   height: auto;
}
/* Image & Category Badge */
.recent-posts-slider .post-image {
   overflow: hidden;
}

.recent-posts-slider .swiper-pagination {
   margin-top: 16px;
   position: unset;
   height: fit-content;
   display: flex;
   gap: 16px;
   align-items: center;
   justify-content: center;
}

.recent-posts-slider .swiper-pagination .swiper-pagination-bullet {
   margin: 0;
   width: 12px;
   height: 12px;
   background-color: #7897ff;
}

.recent-posts-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
   background-color: #0044ff;
}

.recent-posts-slider .post-image img {
   width: 100%;
   height: auto;
   /* object-fit: cover; */
   display: block;
}

/* Content Area */
.recent-posts-slider .post-content {
   padding: 24px;
   flex: 1;
}

.recent-posts-slider .post-title {
   font-size: var(--wp--preset--font-size--custom-7);
   font-weight: 700;
   color: #2c2c2c;
   margin: 16px 0;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
}

.recent-posts-slider .post-title a {
   color: inherit;
}

.recent-posts-slider .post-title a:hover {
   text-decoration: none;
   color: #003de6;
}

.recent-posts-slider .excerpt {
   font-size: var(--wp--preset--font-size--custom-8);
   color: #2c2c2c;
   margin: 16px 0;
   font-weight: 500;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
}

.recent-posts-slider .post-date {
   display: flex;
   gap: 6px;
   align-items: center;
   font-size: 0.75rem;
   color: #6a7282;
   font-weight: 500;
}

/* CONTACT FORM */

#contact-form {
   font-size: var(--wp--preset--font-size--custom-7);
   display: grid;
   grid-template-columns: 1;
   padding: 16px;
   gap: 32px;
}

#contact-form .form-group {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

#contact-form .form-group label {
   font-weight: 500;
   font-size: var(--wp--preset--font-size--custom-12) !important;
}

#contact-form .form-group .required {
   color: #ff0000;
}

.form-message {
   font-weight: 500;
}

.form-message.success {
   color: #00bb1fe7;
}

.form-message.error {
   color: #ff0000;
}

#contact-form .button-submit {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   border-radius: 8px;
   color: white;
   padding: 12px 24px;
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 700;
   font-family: inherit;
   border: none;
   outline: none;
   cursor: pointer;
}

.wpforms-submit-container .wpforms-submit-spinner {
   display: none !important;
}

.wp-block-categories-list .cat-item:hover {
   color: #0044ff;
}

.wp-block-categories-list .cat-item:hover a {
   color: #0044ff;
}

/* Switch Language */
.lang-select {
   position: relative;
}

.lang-select__trigger {
   cursor: pointer;
}

.lang-select__dropdown {
   display: none;
   position: absolute;
   background: #fff;
   border: 1px solid #ddd;
}

.lang-select.active .lang-select__dropdown {
   display: block;
}

/* RESPONSIVE */

/* Mobile */
.container {
   width: 100%;
   margin: auto;
   padding: 0px 16px;
}

.container .content {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

body .hero {
   align-content: center;
   padding: 16px;
}

footer .container {
   display: flex;
   flex-direction: column;
}

.wp-block-comments .comment-form {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

#cancel-comment-reply-link {
   color: #ff0000;
   font-weight: 500;
   padding: 8px 0px;
   display: inline-block;
}

textarea {
   resize: none !important;
}

.hero-background {
   bottom: 0;
   top: unset;
}

/* Tablet */
@media (min-width: 768px) {
   .container {
      max-width: 720px;
      padding: 0px;
   }

   footer .container {
      display: grid;
      flex-direction: unset;
   }

   .wp-block-comments {
      padding: 32px;
   }

   .wp-block-comment-template ol {
      margin-left: 4.5rem;
   }

   .wp-block-comment-template ol {
      padding-left: 2rem;
   }

   #contact-form {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 32px;
   }

   .cc-banner {
      flex-direction: row;
   }

   .cc-modal-content {
      max-width: min(90%, 800px);
   }

   .cc-banner-button {
      align-items: center;
      flex-direction: row;
   }
}

/* Desktop */
@media (min-width: 1024px) {
   .container {
      max-width: 1000px;
   }

   .container .content {
      display: grid;
      gap: 32px;
      grid-template-columns: repeat(12, minmax(0, 1fr));
   }

   .wp-block-comments .comment-form {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .hero-background {
      top: 0;
      bottom: unset;
   }
}

/* Large Desktop */
@media (min-width: 1240px) {
   .container {
      max-width: 1200px;
   }
}