/*
Theme Name: Init HTML
Author: Init HTML
Author URI: https://inithtml.com/
Description: Giao diện Blog cá nhân Init HTML.
Version: 3.8
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Tags: blog, sidebar
Text Domain: init-html
License: GNU General Public License
License URI: license.txt
*/

:root {
    --theme-color: #1463f3;
}

.theme-color {
    color: var(--theme-color) !important;
}

em {
    color: currentColor;
}

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

.uk-text-initcase {
    text-transform: initial;
}

.uk-margin-xmedium-right {
    margin-right: 25px;
}

.uk-breadcrumb {
    line-height: 20px;
}

/* Scrollbar for code blocks */
pre[class*=language-]::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
pre[class*=language-]::-webkit-scrollbar-thumb {
    background-color: var(--theme-color);
    outline: 0;
}

.uk-overflow-x-auto {
    overflow-y: auto;
    overflow-y: hidden;
}

/* Disable scrollbar */
.disable-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.uk-offcanvas-page #wpadminbar {
    position: fixed;
    z-index: 999 !important;
}

@media (max-width: 639px) {
    .uk-offcanvas-bar {
        width: 310px;
    }
}

.image-16-9 {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.image-1-1 {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.image-3-4 {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.image-4-3 {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.video-16-9 {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    display: block;
}

/* Logo */
h1.site-title {
    text-indent: -9999px;
    overflow: hidden;
    white-space: normal;
}

h1.site-title .visually-hidden {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.uk-logo img {
    max-height: 45px;
    width: auto;
}

/* Slider */
.uk-slider-items.uk-grid-small {
    margin-left: -15px !important;
}

.slider-card-thumb {
    width: 100%;
    height: 315px;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}

/* Index */
.latest-post-thumb {
    width: 115px;
    height: 115px;
    object-fit: cover;
}

@media (max-width: 640px) {
    .latest-post-thumb {
        width: 95px;
        height: 95px;
    }
}

/* Sidebar */
.recent-post-thumbnail img {
    width: 85px;
    height: 85px;
    object-fit: cover;
}

.widget-title {
    letter-spacing: 0.7px;
}

.recent-comment-max-height {
    max-height: 650px;
}

#recent-comments-page .recent-comment-max-height {
    max-height: none !important;
}

/* Nội dung bài viết */
.uk-text-lead {
    font-size: 1.3rem;
}

.uk-article-content h1,
.uk-article-content h2,
.uk-article-content h3,
.uk-article-content h4,
.uk-article-content h5,
.uk-article-content h6 {
    font-weight: 700;
    margin-top: 0;
}

.uk-article-content h1 code,
.uk-article-content h2 code,
.uk-article-content h3 code,
.uk-article-content h4 code,
.uk-article-content h5 code,
.uk-article-content h6 code,
.uk-text-lead code {
    font-size: unset;
}

.uk-article-content img {
    border-radius: 5px;
}

#recent-comments-page .uk-article-content img.avatar {
    border-radius: 50% !important;
}

.uk-article-content .aligncenter {
    display: block;
    margin-inline: auto;
}

.code-toolbar,
.wp-video {
    margin-bottom: 20px;
}

.wp-caption {
    max-width: 100%;
}

:not(pre)>code, :not(pre)>kbd, :not(pre)>samp {
    white-space: wrap;
    overflow-wrap: break-word;
}

.uk-article-content .uk-responsive-width {
    width: 100%;
}

#code-content {
    font-family: Consolas, monaco, monospace;
}

.heart-beat {
  animation: heartbeat 1.5s infinite;
  transform-origin: center;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.15);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(1);
  }
}

/* Bình luận */
.uk-comment-list > :nth-child(n+2),
.uk-comment-list .uk-comment~ul>:nth-child(n+2),
.uk-comment-list .uk-comment ~ ul {
    margin-top: 40px;
}

/* Chế độ tối */

.uk-light .uk-navbar-dropdown-nav .uk-nav-header {
    color: rgba(255,255,255,.9);
}

.uk-light .uk-navbar-dropdown-nav>li.uk-active>a {
    color: #fff;
}

.uk-light .uk-section-default,
.uk-light .uk-navbar-dropdown,
.uk-light .uk-section-muted,
.uk-light .uk-comment-primary,
.uk-light .uk-card-default,
.uk-light .uk-navbar-container:not(.uk-navbar-transparent),
.uk-light .uk-background-muted,
.uk-light .uk-card-secondary,
.uk-light .uk-card-secondary.uk-card-hover:hover,
.uk-light .uk-modal-dialog,
.uk-light .uk-modal-header,
.uk-light .uk-modal-footer {
    background-color: #272727;
}

.uk-light pre {
    border-color: rgba(255,255,255,.2);
}

.mode-checkbox {
    opacity: 0;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

.mode-checkbox-label {
    width: 44px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    padding: 0 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.curr-dark {
    background: linear-gradient(to right, #2c3e50, #2980b9);
}

.curr-dark:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: 2px;
    left: 15px;
    background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="%23fff" xmlns="http://www.w3.org/2000/svg"><path d="M7.45 2.71a1.13 1.13 0 0 1 2.1 0l1.16 2.95q.18.45.63.63l2.95 1.16c.95.38.95 1.72 0 2.1l-2.95 1.16q-.45.18-.63.63L9.55 14.3c-.38.95-1.72.95-2.1 0L6.3 11.34a1.1 1.1 0 0 0-.63-.63L2.7 9.55a1.13 1.13 0 0 1 0-2.1L5.66 6.3q.45-.18.63-.63zm9.47 10.69a.62.62 0 0 1 1.16 0l.9 2.28q.1.24.34.34l2.29.9c.52.21.52.95 0 1.16l-2.29.9a.6.6 0 0 0-.34.34l-.9 2.29a.62.62 0 0 1-1.16 0l-.9-2.29a.6.6 0 0 0-.34-.34l-2.29-.9a.62.62 0 0 1 0-1.16l2.29-.9a.6.6 0 0 0 .34-.34z" /></svg>');
    animation: fade-stars 3s ease infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes fade-stars {
    0% { opacity: 1;}
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.curr-light {
    background: linear-gradient(to left, #0052d4, #65c7f7, #9cecfb);
}

.curr-light:after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    top: 8px;
    left: -32px;
    background: url('data:image/svg+xml,<svg viewBox="0 -4 32 32" fill="%23fff" xmlns="http://www.w3.org/2000/svg"><path d="M23.07 5.03A9 9 0 0 0 6.03 8.35 8.1 8.1 0 0 0 0 16c0 4.26 3.54 7.75 8 8h15c4.97 0 9-4.25 9-9.5a9.5 9.5 0 0 0-8.93-9.47" fill-rule="evenodd"/></svg>');
    animation: chillin-cloud 10s ease-in infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes chillin-cloud {
    0% { left: -32px; }
    100% { left: 54px; }
}

.light-mode-icon {
    color: #f3c612;
}

.dark-mode-icon {
    color: #f1c40f;
}

.mode-checkbox-label .ball {
    background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
    z-index: 0;
}

.mode-checkbox:checked + .mode-checkbox-label .ball {
    transform: translateX(28px);
}

.submit-preset-button {
    width: 60px;
    height: 60px;
    line-height: 60px;
}

#web-tools .uk-card .uk-card-title {
    font-size: 1.2rem;
}

/* ========== KEYFRAMES ========== */

/* Hiệu ứng 1: Data Stream (trôi ngang liên tục) */
@keyframes dataStream {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Hiệu ứng 2: Breathing Pulse (nhịp thở) */
@keyframes breathingPulse {
  0%, 100% { background-position: 50% 0%; }
  50%      { background-position: 50% 100%; }
}

/* Hiệu ứng 3: Diagonal Flow (trôi chéo êm) */
@keyframes diagonalFlow {
  0%   { background-position: 0%   0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0%   0%; }
}

/* Hiệu ứng 4: Spectrum Cycle (quét nhiều màu như rainbow AI) */
@keyframes spectrumCycle {
  0%   { background-position: 0%   50%; }
  25%  { background-position: 50%  100%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50%  0%; }
  100% { background-position: 0%   50%; }
}

/* ========== BASE STYLE ========== */
.init-badge-left,
.init-badge-theme,
.init-badge-plugin,
.init-badge-tool {
  position: relative;
  color: #fff !important;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
  overflow: hidden;
  background-size: 400% 400%;
  background-repeat: no-repeat;
}

.init-badge-small {
    padding: 1px 5px;
    font-size: 0.775rem;
    border-radius: 5px;
}

.init-badge-tool-offcanvas {
    width: 15px;
    height: 15px;
    padding: 0;
    text-align: center;
    line-height: 1.1;
    font-size: 12px;
    border-radius: 50%;
    top: -3px;
    left: -3px;
}

/* ========== 4 BADGES ========== */

/* Badge Left → Data Stream */
.init-badge-left {
  background-image: linear-gradient(
    120deg,
    #00f5a0,
    #1ef2b5,
    #3cecb8,
    #00d9f5,
    #2bc9ff,
    #55b9ff,
    #7ba9ff,
    #9d88ff,
    #7b2ff7
  );
  animation: spectrumCycle 8s linear infinite;
}

/* Theme Badge → Breathing Pulse */
.init-badge-theme {
  background-image: linear-gradient(
    180deg,
    #a8ff78,
    #d4fc79,
    #f9f586,
    #ffe29f,
    #fbc2eb,
    #fad0c4,
    #ffd1ff,
    #c2ffd8,
    #78ffd6
  );
  animation: breathingPulse 10s ease-in-out infinite;
}

/* Plugin Badge → Diagonal Flow */
.init-badge-plugin {
  background-image: linear-gradient(
    135deg,
    #00c6ff,
    #0072ff,
    #6a11cb,
    #2575fc,
    #5f72bd,
    #805ad5,
    #9d50bb,
    #4facfe,
    #00f2fe
  );
  animation: diagonalFlow 12s ease-in-out infinite;
}

/* Tool Badge → Spectrum Cycle */
.init-badge-tool {
  background-image: linear-gradient(
    135deg,
    #ff512f,
    #f09819,
    #ff5858,
    #ff416c,
    #dd2476,
    #ff0844,
    #f00000,
    #fd746c,
    #f7971e
  );
  animation: spectrumCycle 14s ease-in-out infinite;
}

.init-slogan {
    font-size: 1.3rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

@media (max-width: 640px) {
    .init-slogan {
        font-size: 1.1rem;
    }
}