.hdk-genre-breadcrumb .breadcrumb-item,.hdk-genre-breadcrumb .breadcrumb-item a{align-items:center;gap:.25rem;display:flex}body.tim-the-loai{background-image:radial-gradient(at 40% 20%,rgba(84,207,214,.1) 0,transparent 50%),radial-gradient(at 80% 0,rgba(84,207,214,.05) 0,transparent 50%),radial-gradient(at 0 50%,rgba(84,207,214,.05) 0,transparent 50%),radial-gradient(at 80% 50%,rgba(84,207,214,.05) 0,transparent 50%),radial-gradient(at 0 100%,rgba(84,207,214,.1) 0,transparent 50%),radial-gradient(at 80% 100%,rgba(84,207,214,.05) 0,transparent 50%),radial-gradient(at 0 0,rgba(84,207,214,.05) 0,transparent 50%)}.hdk-genre-page{padding:1rem 0;min-height:calc(100svh - 200px);position:relative}.hdk-genre-content-wrapper{background:var(--hdk-background,#fff);border-radius:20px;border:1px solid var(--hdk-border,#e1eaef)}.dark .hdk-filter-bar,.dark .hdk-genre-content-wrapper,.dark .hdk-genre-search,.dark .hdk-genre-search-suggest,.dark .hdk-status-tabs{background:var(--hdk-card,#17181c);border-color:var(--hdk-border,#242628)}.hdk-genre-breadcrumb,.hdk-genre-header{margin-bottom:1rem;padding:0 .5rem}.hdk-genre-breadcrumb .breadcrumb{background:0 0;padding:0;margin:0;font-size:.8125rem}.hdk-genre-breadcrumb .breadcrumb-item a{color:var(--hdk-text-secondary,#536471);text-decoration:none;transition:color .2s}.hdk-genre-breadcrumb .breadcrumb-item a:hover,.hdk-genre-empty p strong{color:var(--hdk-primary,#54cfd6)}.hdk-genre-breadcrumb .breadcrumb-item a iconify-icon,.hdk-genre-pagination .page-link iconify-icon,.hdk-status-tab iconify-icon{font-size:1rem}.hdk-genre-breadcrumb .breadcrumb-item.active{color:var(--hdk-text-primary,#0f1419);font-weight:600}.dark .hdk-genre-breadcrumb .breadcrumb-item.active,.dark .hdk-genre-empty h3,.dark .hdk-genre-search input,.dark .hdk-genre-search-item,.dark .hdk-genre-suggest-title,.dark .hdk-genre-title-area h1,.dark .hdk-status-tab:hover{color:var(--hdk-text-primary,#e7e9ea)}.hdk-genre-breadcrumb .breadcrumb-item+.breadcrumb-item::before{content:"›";color:var(--hdk-text-muted,#8899a6);padding:0 .5rem}.hdk-genre-header-top{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.hdk-genre-icon-wrapper{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#54cfd6 0,#3a9ea5 100%);color:#fff;flex-shrink:0}.hdk-clear-btn,.hdk-genre-search{align-items:center;transition:.2s;display:flex}.hdk-genre-icon-wrapper iconify-icon{font-size:1.5rem}.hdk-genre-title-area h1{font-size:1.25rem;font-weight:700;color:var(--hdk-text-primary,#0f1419);margin:0}.hdk-clear-btn,.hdk-genre-search iconify-icon,.hdk-genre-subtitle{color:var(--hdk-text-secondary,#536471)}.hdk-genre-subtitle{font-size:.8125rem;margin:.125rem 0 0}.hdk-genre-search-wrapper{position:relative;margin:0 .5rem .75rem}.hdk-genre-search{gap:.5rem;padding:.625rem 1rem;background:var(--hdk-card,#f7f8f8);border:1px solid var(--hdk-border,#e1eaef);border-radius:.75rem}.hdk-genre-search:focus-within{border-color:var(--hdk-primary,#54cfd6);box-shadow:0 0 0 3px rgba(84,207,214,.1)}.hdk-genre-search iconify-icon{font-size:1.125rem;flex-shrink:0}.hdk-genre-search input{flex:1;border:none;background:0 0;font-size:.875rem;color:var(--hdk-text-primary,#0f1419);outline:0}.hdk-genre-search input::placeholder{color:var(--hdk-text-muted,#8899a6)}.hdk-clear-btn{justify-content:center;width:1.5rem;height:1.5rem;border:none;background:0 0;cursor:pointer;border-radius:50%}.hdk-clear-btn:hover{background:rgba(84,207,214,.1);color:var(--hdk-primary,#54cfd6)}.hdk-genre-search-suggest{position:absolute;left:0;right:0;top:calc(100% + .5rem);background:var(--hdk-background,#fff);border:1px solid var(--hdk-border,#e1eaef);border-radius:.75rem;box-shadow:var(--hdk-shadow-md,0 4px 10px rgba(0,0,0,.08));z-index:50;overflow:hidden}.hdk-genre-search-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border:none;background:0 0;text-align:left;cursor:pointer;color:var(--hdk-text-primary,#0f1419);transition:background .2s}.hdk-genre-search-item:hover{background:var(--hdk-primary-light,rgba(84,207,214,.1))}.hdk-genre-search-item-name{flex:1;font-size:.875rem;font-weight:600}.hdk-genre-search-item-count,.hdk-genre-suggest-count{font-size:.75rem;color:var(--hdk-text-secondary,#536471);white-space:nowrap}.hdk-genre-search-item-arrow,.hdk-genre-suggest-arrow{font-size:1rem;color:var(--hdk-text-muted,#8899a6);flex-shrink:0}.hdk-filter-label,.hdk-genre-suggest-empty,.hdk-status-tab{color:var(--hdk-text-secondary,#536471)}.hdk-genre-suggest-empty{padding:.75rem 1rem;font-size:.875rem}.hdk-status-tabs{display:flex;background:var(--hdk-card,#f7f8f8);border-radius:.75rem;padding:.25rem;gap:.25rem;border:1px solid var(--hdk-border,#e1eaef);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.hdk-status-tabs::-webkit-scrollbar{display:none}.hdk-status-tab{flex:1;min-width:90px;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.625rem .75rem;background:0 0;border:none;border-radius:.5rem;font-size:.8125rem;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap;text-decoration:none}.hdk-status-tab:hover{color:var(--hdk-text-primary,#0f1419);background:rgba(84,207,214,.1);text-decoration:none}.hdk-status-tab.active{color:#fff;background:var(--hdk-primary,#54cfd6);box-shadow:0 2px 8px rgba(84,207,214,.25)}.hdk-status-tab.success.active{background:linear-gradient(135deg,#10b981 0,#059669 100%);box-shadow:0 2px 8px rgba(16,185,129,.25)}.hdk-status-tab.ongoing.active{background:linear-gradient(135deg,#f59e0b 0,#d97706 100%);box-shadow:0 2px 8px rgba(245,158,11,.25)}.hdk-status-tab-count{font-size:.6875rem;padding:.125rem .375rem;border-radius:.25rem;background:rgba(0,0,0,.1)}.hdk-filter-bar,.hdk-filter-select{border:1px solid var(--hdk-border,#e1eaef)}.hdk-status-tab.active .hdk-status-tab-count{background:rgba(255,255,255,.2)}.hdk-filter-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem;background:var(--hdk-background,#fff);border-radius:.75rem}.hdk-filter-group{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.hdk-filter-item{display:flex;align-items:center;gap:.5rem}.hdk-filter-label{display:flex;align-items:center;gap:.25rem;font-size:.8125rem;font-weight:600;white-space:nowrap}.hdk-filter-label iconify-icon{font-size:1rem;color:var(--hdk-primary,#54cfd6)}.hdk-filter-select{padding:.5rem 2rem .5rem .75rem;font-size:.8125rem;font-weight:500;color:var(--hdk-text-primary,#0f1419);background:var(--hdk-input,#f7f9fa);border-radius:.5rem;cursor:pointer;transition:.2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23536471' d='m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center}.dark .hdk-filter-select{background-color:var(--hdk-input,#22303c);border-color:var(--hdk-border,#242628);color:var(--hdk-text-primary,#e7e9ea);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%238899a6' d='m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z'/%3E%3C/svg%3E")}.hdk-filter-select:focus{outline:0;border-color:var(--hdk-primary,#54cfd6);box-shadow:0 0 0 3px rgba(84,207,214,.15)}.hdk-filter-results{font-size:.8125rem;color:var(--hdk-text-secondary,#536471)}.hdk-genre-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;padding:.5rem}@media (min-width:576px){.hdk-genre-grid{grid-template-columns:repeat(3,1fr);gap:1rem}}@media (min-width:768px){.hdk-genre-grid{grid-template-columns:repeat(4,1fr)}}@media (min-width:992px){.hdk-genre-grid{grid-template-columns:repeat(5,1fr)}}@media (min-width:1200px){.hdk-genre-grid{grid-template-columns:repeat(6,1fr)}}.hdk-genre-pagination{margin-top:1.5rem;padding:0 .5rem}.hdk-genre-pagination .pagination{gap:.25rem}.hdk-genre-pagination .page-item .page-link{min-width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;padding:0 .5rem;font-size:.875rem;font-weight:500;color:var(--hdk-text-secondary,#536471);background:var(--hdk-background,#fff);border:1px solid var(--hdk-border,#e1eaef);border-radius:.5rem;transition:.2s}.dark .hdk-genre-pagination .page-item .page-link{background:var(--hdk-card,#17181c);border-color:var(--hdk-border,#242628);color:var(--hdk-text-secondary,#8899a6)}.hdk-btn-secondary:hover,.hdk-genre-empty-icon,.hdk-genre-pagination .page-item .page-link:hover{background:var(--hdk-primary-light,rgba(84,207,214,.1))}.hdk-genre-pagination .page-item .page-link:hover{border-color:var(--hdk-primary,#54cfd6);color:var(--hdk-primary,#54cfd6)}.hdk-genre-pagination .page-item.active .page-link{background:var(--hdk-primary,#54cfd6);border-color:var(--hdk-primary,#54cfd6);color:#fff;box-shadow:0 2px 8px rgba(84,207,214,.25)}.hdk-genre-pagination .page-item.disabled .page-link{background:var(--hdk-input,#f7f9fa);border-color:var(--hdk-border,#e1eaef);color:var(--hdk-text-muted,#8899a6);cursor:not-allowed}.dark .hdk-genre-pagination .page-item.disabled .page-link{background:var(--hdk-muted,#181818)}.hdk-genre-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1.5rem;min-height:300px}.hdk-genre-empty-grid{grid-column:1/-1}.hdk-genre-empty-icon{width:5rem;height:5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}.hdk-genre-empty-icon iconify-icon{font-size:2.5rem;color:var(--hdk-primary,#54cfd6)}.hdk-genre-empty h3{font-size:1.25rem;font-weight:700;color:var(--hdk-text-primary,#0f1419);margin:0 0 .5rem}.hdk-genre-empty p{font-size:.9375rem;color:var(--hdk-text-secondary,#536471);margin:0 0 1.5rem;max-width:400px}.hdk-genre-empty-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-bottom:1.5rem}.hdk-btn-secondary{background:0 0;color:var(--hdk-primary,#54cfd6);border:2px solid var(--hdk-primary,#54cfd6);box-shadow:none}.hdk-btn-secondary:hover{color:var(--hdk-primary,#54cfd6);transform:translateY(-1px);text-decoration:none}.hdk-genre-suggest{width:100%;max-width:560px;margin:0 auto}.hdk-genre-suggest-title{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9375rem;font-weight:700;color:var(--hdk-text-primary,#0f1419);margin:0 0 .75rem}.hdk-genre-suggest-title iconify-icon{font-size:1.125rem;color:var(--hdk-primary,#54cfd6)}.hdk-genre-suggest-grid{display:grid;grid-template-columns:1fr;gap:.5rem}@media (min-width:576px){.hdk-genre-suggest-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}.hdk-btn,.hdk-genre-suggest-card{gap:.5rem;transition:.2s;text-decoration:none}.hdk-genre-suggest-card{display:flex;align-items:center;padding:.75rem;background:var(--hdk-card,#f7f8f8);border:1px solid var(--hdk-border,#e1eaef);border-radius:.75rem;color:var(--hdk-text-primary,#0f1419)}.dark .hdk-genre-suggest-card{background:var(--hdk-card,#17181c);border-color:var(--hdk-border,#242628);color:var(--hdk-text-primary,#e7e9ea)}.hdk-genre-suggest-card:hover{border-color:var(--hdk-primary,#54cfd6);box-shadow:0 4px 12px rgba(84,207,214,.15);transform:translateY(-1px);text-decoration:none;color:inherit}.hdk-genre-suggest-name{flex:1;font-size:.875rem;font-weight:700;min-width:0}.hdk-btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;border-radius:.75rem;border:none;cursor:pointer}.hdk-btn-primary{background:linear-gradient(135deg,#54cfd6 0,#3a9ea5 100%);color:#fff;box-shadow:0 2px 8px rgba(84,207,214,.25)}.hdk-btn-primary:hover{background:linear-gradient(135deg,#48b8be 0,#2e8a91 100%);box-shadow:0 4px 12px rgba(84,207,214,.35);transform:translateY(-1px);color:#fff;text-decoration:none}.hdk-btn iconify-icon{font-size:1.125rem}@media (max-width:575.98px){.hdk-genre-content-wrapper{border-radius:12px;padding:.75rem!important}.hdk-genre-grid,.hdk-genre-header-top{gap:.5rem}.hdk-genre-icon-wrapper{width:2.5rem;height:2.5rem}.hdk-genre-icon-wrapper iconify-icon{font-size:1.25rem}.hdk-genre-empty h3,.hdk-genre-title-area h1{font-size:1.125rem}.hdk-status-tabs{padding:.125rem}.hdk-status-tab{padding:.5rem .625rem;font-size:.75rem;min-width:80px}.hdk-genre-empty p,.hdk-status-tab iconify-icon{font-size:.875rem}.hdk-filter-label,.hdk-status-tab span:not(.hdk-status-tab-count){display:none}.hdk-filter-bar{padding:.5rem;gap:.5rem}.hdk-filter-select{padding:12px 20px;font-size:.75rem;width:100%}.hdk-filter-results{font-size:.75rem;width:100%;text-align:center}.hdk-genre-pagination .page-item .page-link{min-width:2rem;height:2rem;font-size:.8125rem}.hdk-genre-empty{padding:2rem 1rem}.hdk-genre-empty-icon{width:4rem;height:4rem}.hdk-genre-empty-icon iconify-icon{font-size:2rem}.hdk-filter-group,.hdk-filter-item{width:100%}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hdk-genre-grid article{animation:.3s forwards fadeIn}.hdk-genre-grid article:first-child{animation-delay:50ms}.hdk-genre-grid article:nth-child(2){animation-delay:.1s}.hdk-genre-grid article:nth-child(3){animation-delay:.15s}.hdk-genre-grid article:nth-child(4){animation-delay:.2s}.hdk-genre-grid article:nth-child(5){animation-delay:.25s}.hdk-genre-grid article:nth-child(6){animation-delay:.3s}

/* ===== DARK MODE (Đen-Trắng-Xám Pattern) ===== */
html.dark .hdk-genre-page {
    background: var(--hdk-background);
}

html.dark .hdk-genre-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
}

html.dark .hdk-genre-breadcrumb .breadcrumb-item a:hover {
    color: var(--white-color);
}

html.dark .hdk-genre-breadcrumb .breadcrumb-item.active {
    color: var(--white-color);
}

html.dark .hdk-genre-icon-wrapper {
    background: var(--black-color) !important;
    box-shadow: none;
}

html.dark .hdk-genre-icon-wrapper iconify-icon {
    color: var(--white-color) !important;
}

html.dark .hdk-genre-title-area h1 {
    color: var(--white-color);
}

html.dark .hdk-genre-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .hdk-genre-search {
    background: var(--black-color);
    border-color: var(--border-dark);
}

html.dark .hdk-genre-search:focus-within {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

html.dark .hdk-genre-search iconify-icon {
    color: var(--white-color) !important;
}

html.dark .hdk-genre-search input {
    color: var(--white-color);
}

html.dark .hdk-genre-search input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .hdk-clear-btn {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .hdk-clear-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white-color);
}

html.dark .hdk-status-tabs {
    background: var(--hdk-card);
    border-color: var(--border-dark);
}

html.dark .hdk-status-tab {
    color: rgba(255, 255, 255, 0.7);
}

html.dark .hdk-status-tab iconify-icon {
    color: var(--white-color) !important;
}

html.dark .hdk-status-tab:hover {
    color: var(--white-color);
    background: rgba(255, 255, 255, 0.05);
}

html.dark .hdk-status-tab.active {
    background: var(--white-color) !important;
    color: var(--black-color) !important;
    box-shadow: none !important;
}

html.dark .hdk-status-tab.active iconify-icon {
    color: var(--black-color) !important;
}

html.dark .hdk-status-tab.success.active,
html.dark .hdk-status-tab.ongoing.active {
    background: var(--white-color) !important;
    color: var(--black-color) !important;
    box-shadow: none !important;
}

html.dark .hdk-status-tab-count {
    background: rgba(255, 255, 255, 0.1);
}

html.dark .hdk-status-tab.active .hdk-status-tab-count {
    background: rgba(0, 0, 0, 0.2);
}

html.dark .hdk-filter-bar {
    background: var(--hdk-card);
    border-color: var(--border-dark);
}

html.dark .hdk-filter-label {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .hdk-filter-label iconify-icon {
    color: var(--white-color) !important;
}

html.dark .hdk-filter-select {
    background: var(--black-color);
    border-color: var(--border-dark);
    color: var(--white-color);
}

html.dark .hdk-filter-select:focus {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

html.dark .hdk-filter-results {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .hdk-genre-pagination .page-item .page-link {
    background: var(--black-color);
    border-color: var(--border-dark);
    color: rgba(255, 255, 255, 0.7);
}

html.dark .hdk-genre-pagination .page-item .page-link:hover {
    background: var(--hdk-card);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white-color);
}

html.dark .hdk-genre-pagination .page-item.active .page-link {
    background: var(--white-color) !important;
    border-color: var(--white-color) !important;
    color: var(--black-color) !important;
    box-shadow: none !important;
}

html.dark .hdk-genre-pagination .page-item.disabled .page-link {
    background: var(--black-color);
    border-color: var(--border-dark);
    color: rgba(255, 255, 255, 0.3);
}

html.dark .hdk-genre-empty-icon {
    background: var(--black-color);
}

html.dark .hdk-genre-empty-icon iconify-icon {
    color: var(--white-color) !important;
}

html.dark .hdk-genre-empty h3 {
    color: var(--white-color);
}

html.dark .hdk-genre-empty p {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .hdk-genre-empty p strong {
    color: var(--white-color);
}

html.dark .hdk-btn-primary {
    background: var(--white-color) !important;
    color: var(--black-color) !important;
    box-shadow: none !important;
}

html.dark .hdk-btn-primary:hover {
    background: var(--hdk-card) !important;
    color: var(--white-color) !important;
}

html.dark .hdk-btn-secondary {
    border-color: var(--white-color);
    color: var(--white-color);
}

html.dark .hdk-btn-secondary:hover {
    background: var(--white-color);
    color: var(--black-color);
}

html.dark .hdk-genre-suggest-title {
    color: var(--white-color);
}

html.dark .hdk-genre-suggest-title iconify-icon {
    color: var(--white-color) !important;
}

html.dark .hdk-genre-suggest-card {
    background: var(--hdk-card);
    border-color: var(--border-dark);
    color: var(--white-color);
}

html.dark .hdk-genre-suggest-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

html.dark .hdk-genre-suggest-name {
    color: var(--white-color);
}

html.dark .hdk-genre-suggest-count {
    color: rgba(255, 255, 255, 0.5);
}

html.dark .hdk-genre-search-suggest {
    background: var(--hdk-card);
    border-color: var(--border-dark);
    box-shadow: none;
}

html.dark .hdk-genre-search-item {
    color: var(--white-color);
}

html.dark .hdk-genre-search-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

html.dark .hdk-genre-search-item-count {
    color: rgba(255, 255, 255, 0.5);
}

html.dark iconify-icon {
    color: var(--white-color) !important;
}