.girlkun-bg {
    background: #000000 url(../images/bg/banner/4.png);
    background-size: cover;
    background-attachment: fixed;
}

.modal-footer {
    border-top: 0px;
}

.white-bg {
    background-color: #FFFFFF;
}

.avatar {
    background: #b3afaf url(./images/logo/logo10.png);
    background-size: cover;
    padding: 2px;
    border-radius: 15%;
    border: rgb(255, 0, 119) 1px solid;
}

.btn-border {
    border-radius: 20% !important;
}

.btn-ghimbai {
    color: #FFF;
    background-color: #0ac2f5 !important;
    border-color: #046c89 !important;
}

.btn-info {
    color: #fff;
    background-color: #88c33d !important;
    border-color: #6b9733 !important;
}

.btn-info:hover {
    color: #fff;
    background-color: #6b9733 !important;
    border-color: #7ea949 !important;
}

.btn-primary {
    color: #fff;
    background-color: #8f34f5 !important;
    border-color: #6518bb !important;
}

.page-heading {
    border-top: 0;
    padding: 0 10px 20px 10px;
}

.forum-post-container .media {
    margin: 10px 10px 10px 10px;
    padding: 20px 10px 20px 10px;
    border-bottom: 1px solid #f1f1f1;
}

.forum-avatar {
    float: left;
    margin-right: 20px;
    text-align: center;
    width: 110px;
}

.forum-avatar .img-circle {
    height: 48px;
    width: 48px;
}

.author-info {
    color: #676a6c;
    font-size: 11px;
    margin-top: 5px;
    text-align: center;
}

.forum-post-info {
    padding: 9px 12px 6px 12px;
    background: #f9f9f9;
    border: 1px solid #f1f1f1;
}

.media-body>.media {
    background: #f9f9f9;
    border-radius: 3px;
    border: 1px solid #f1f1f1;
}

.forum-post-container .media-body .photos {
    margin: 10px 0;
}

.forum-photo {
    max-width: 140px;
    border-radius: 3px;
}

.media-body>.media .forum-avatar {
    width: 70px;
    margin-right: 10px;
}

.media-body>.media .forum-avatar .img-circle {
    height: 38px;
    width: 38px;
}

.mid-icon {
    font-size: 66px;
}

.forum-item {
    margin: 10px 0;
    padding: 10px 0 20px;
    border-bottom: 1px solid #f1f1f1;
}

.views-number {
    font-size: 24px;
    line-height: 18px;
    font-weight: 400;
}

.forum-container,
.forum-post-container {
    padding: 5px !important;
}

.forum-item small {
    color: #999;
}

.forum-item .forum-sub-title {
    color: #999;
    margin-left: 50px;
}

.forum-title {
    margin: 15px 0px 15px 5px;
}

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

.forum-desc {
    color: #999;
}

.forum-icon {
    float: left;
    width: 30px;
    margin-right: 20px;
    text-align: center;
}

a.forum-item-title {
    color: inherit;
    display: block;
    font-size: 18px;
    font-weight: 600;
}

a.forum-item-title:hover {
    color: inherit;
}

.forum-icon .fa {
    font-size: 30px;
    margin-top: 8px;
    color: #9b9b9b;
}

.forum-item.active .fa {
    color: #000000;
}

.forum-item.active a.forum-item-title {
    color: #000000;
}

@media (max-width: 992px) {
    .forum-info {
        margin: 15px 0 10px 0;
        /* Comment this is you want to show forum info in small devices */
        display: none;
    }

    .forum-desc {
        float: none !important;
    }
}





.ibox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
}

.ibox.collapsed .ibox-content {
    display: none;
}

.ibox.collapsed .fa.fa-chevron-up:before {
    content: "\f078";
}

.ibox.collapsed .fa.fa-chevron-down:before {
    content: "\f077";
}

.ibox:after,
.ibox:before {
    display: table;
}

.ibox-title {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 3px 0 0;
    color: inherit;
    margin-bottom: 0;
    padding: 14px 15px 7px;
    min-height: 48px;
}

.ibox-content {
    background-color: #ffd8a4;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: rgb(207 149 89 / 0%);
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
    border-radius: 10px;
}

.ibox-footer {
    color: inherit;
    border-top: 1px solid #e7eaec;
    font-size: 90%;
    background: #FFFFFF;
    padding: 10px 15px;
}

.message-input {
    height: 90px !important;
}

.form-control,
.single-line {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    font-size: 14px;
}

.text-navy {
    color: #1ab394;
}

.mid-icon {
    font-size: 66px !important;
}

.m-b-sm {
    margin-bottom: 3px;
}



.job-box-filter label {
    width: 100%;
}

.job-box-filter select.input-sm {
    display: inline-block;
    max-width: 120px;
    margin: 0 5px;
    border: 1px solid #e8eef1;
    border-radius: 2px;
    height: 34px;
    font-size: 15px;
}

.job-box-filter label input.form-control {
    max-width: 200px;
    display: inline-block;
    border: 1px solid #e8eef1;
    border-radius: 2px;
    height: 34px;
    margin-left: 5px;
    font-size: 15px;
}

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

.job-box-filter {
    padding: 12px 15px;
    background: #FFFFFF;
    border-bottom: 1px solid #e8eef1;
    margin-bottom: 20px;
}

.job-box {
    background: #FFFFFF;
    display: inline-block;
    width: 100%;
    padding: 0 0px 40px 0px;
    border: 1px solid #e8eef1;
}

.job-box-filter a.filtsec {
    margin-top: 8px;
    display: inline-block;
    margin-right: 15px;
    padding: 4px 10px;
    font-family: 'Quicksand', sans-serif;
    transition: all ease 0.4s;
    background: #edf0f3;
    border-radius: 50px;
    font-size: 13px;
    color: #81a0b1;
    border: 1px solid #e2e8ef;
}

.job-box-filter a.filtsec.active {
    color: #FFFFFF;
    background: #16262c;
    border-color: #16262c;
}

.job-box-filter a.filtsec i {
    color: #03A9F4;
    margin-right: 5px;
}

.job-box-filter a.filtsec:hover,
.job-box-filter a.filtsec:focus {
    color: #FFFFFF;
    background: #07b107;
    border-color: #07b107;
}

.job-box-filter a.filtsec:hover i,
.job-box-filter a.filtsec:focus i {
    color: #FFFFFF;
}

.job-box-filter h4 i {
    margin-right: 10px;
}

/*=====================================
Inbox Message Style
=======================================*/
.inbox-message ul {
    padding: 0;
    margin: 0;
}

.inbox-message ul li {
    background: #fff;
    list-style: none;
    position: relative;
    padding: 15px 20px;
    border-bottom: 1px solid #fff3cd;
}

.inbox-message ul li:hover,
.inbox-message ul li:focus {
    background: #fff;
}

.inbox-message .message-avatar {
    position: absolute;
    left: 5px;
    width: 80px;
    top: 70px;
    transform: translateY(-50%);
}

.message-avatar img {
    display: inline-block;
    height: 54px;
}

.inbox-message .message-body {
    padding-top: 18px;
    margin-left: 85px;
    font-size: 15px;
    color: #323232;
}

.message-body-heading h5 {
    font-weight: 600;
    display: inline-block;
    color: #62748F;
    margin: 0 0 7px 0;
    padding: 0;
}

.message-body h5 span {
    border-radius: 50px;
    line-height: 14px;
    font-size: 12px;
    color: #fff;
    font-style: normal;
    padding: 4px 10px;
    margin-left: 5px;
    margin-top: -5px;
}

.message-body h5 span.unread {
    background: #07b107;
}

.message-body h5 span.important {
    background: #dd2027;
}

.message-body h5 span.pending {
    background: #2196f3;
}

.message-body-heading span {
    float: right;
    color: #62748F;
    font-size: 14px;
}

.messages-inbox .message-body p {
    margin: 0;
    padding: 0;
    line-height: 27px;
    font-size: 15px;
}

.box_name_eman {
    padding-top: 5px;
    font-size: small;
}

a:hover {
    text-decoration: none;
}


.btn {
  border-radius: 0;
  border: 0;
  border-bottom: 4px solid #000000;
  margin: 0;
  -webkit-box-shadow: 0 5px 5px -6px rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 5px 5px -6px rgba(0, 0, 0, .3);
  box-shadow: 0 5px 5px -6px rgb(0 0 0 / 30%);
  height: cen;
  text-align: center;
}

.btn .btn-block:active,
.btn .btn-lg:active {
    -webkit-box-shadow: inset 0 3px 3px -5px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0 3px 3px -5px rgba(0, 0, 0, .3);
    box-shadow: inset 0 3px 3px -5px rgba(0, 0, 0, .3);
}

.btn-default {
    color: #555;
    background-color: #f9f9f9;
    border-color: #cacaca;
    text-shadow: 1px 1px 0 #f5f5f5;
}

.btn-default:hover,
.btn-default:focus {
    background-color: #f4f4f4;
    border-color: #bebebe;
}

.btn-success {
    background-color: #80d752;
    border-color: #61be26;
    text-shadow: 1px 1px 0 #5fdb34;
    border-radius: 15px;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #75cd53;
    border-color: #53aa27;
}

.btn-info {
    background-color: #39b3d7;
    border-color: #348fd2;
    /* text-shadow: 1px 1px 0 #dba93d; */
}

.btn-info:hover,
.btn-info:focus {
    background-color: #45abcd;
    border-color: #347abe;
}


.btn-diendan {
    background-color: #3e598a;
    border-color: #283b5c;
    text-shadow: 1px 1px 0 #699cfa;
}


.btn-diendan:hover,
.btn-diendan:focus {
    background-color: #337bff;
    border-color: 1px solid #283b5c;
    font-weight: bold;
}



.btn-warning {
    background-color: #FEAF20;
    border-color: #d79a34;
    text-shadow: 1px 1px 0 #db9e34;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #f5a620;
    border-color: #cd9034;
}

.btn-dark {
    background-color: #464646;
    border-color: #000000;
    text-shadow: 1px 1px 0 #000000;
}

.btn-danger {
    background-color: #d73814;
    border-color: #be0000;
    text-shadow: 1px 1px 0 #ac2925;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #000000;
    border-color: #000000;
}

.btn-navbar {
    background-color: #9d5331;
    border: 1px solid #6e3a21;
    font-weight: bold;
}

.btn-navbar:hover,
.btn-navbar:focus {
    background-color: #337bff;
    border-color: #337bff;
    box-shadow: 0px 0px 15px #337bff;
    text-shadow: 1px 1px 0 #ac2925;
    font-weight: bold;
    font-size: 18px;
}

.active {
    background: #9d5331;
    box-shadow: #6e3a21;
    font-size: 18px;
}

.btn-primary {
    background-color: #020005;
    border-color: #020005;
    text-shadow: 1px 1px 0 #020005;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #000000;
    border-color: #000000;
}

.btn-magick {
    color: #fff;
    background-color: #9d5331;
    border-color: #6e3a21;
    text-shadow: 1px 1px 0 #9d5331;
}

.btn-magick:hover,
.btn-magick:focus {
    color: #fff;
    background-color: #337bff;
    border-color: #a55f3e;
}

.btn-pressure {
    position: relative;
    margin-bottom: 0;
}

.btn-pressure:focus {
    -moz-outline-style: none;
    outline: medium none;
}

.btn-pressure:active,
.btn-pressure.active {
    top: 4px;
    border: 0;
    position: relative;
}

.btn-sensitive:active,
.btn-sensitive.active {
    top: 1px;
    margin-top: 4px;
}

.title-topic {
    font-size: 24px;
    font-weight: bold;
    color: red;
}

.img-gk {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 5px black;
}

.vvvv {
    border-radius: 7px;
    box-shadow: 0px 0px 5px red;
}

/* Hiệp Sĩ Mobile theme */
:root{--knight-brown:#663019;--knight-dark:#3d170b;--knight-gold:#e0ad50;--knight-paper:#eee5cd;--knight-light:#fff7df;--knight-ink:#2f1a10}
html{min-height:100%;scroll-behavior:smooth}
body.girlkun-bg{min-height:100vh;margin:0;padding:0 8px 28px;color:var(--knight-ink);background:linear-gradient(rgba(26,15,10,.52),rgba(26,15,10,.72)),#514943 url("../images/bg/banner/4.png") center top/cover fixed no-repeat!important;font-family:Arial,Helvetica,sans-serif;font-size:13px}
.knight-shell{width:100%;max-width:630px;margin:0 auto;background:#a46c54;border-right:2px solid var(--knight-brown);border-left:2px solid var(--knight-brown);box-shadow:0 0 26px rgba(0,0,0,.75)}
.health-note{min-height:24px;padding:6px 9px 4px;color:#fff;font-size:10px;line-height:14px;text-align:center;text-shadow:1px 1px #111;background:rgba(38,24,18,.85)}
.health-note__icon{display:inline-grid;place-items:center;width:21px;height:21px;margin-right:5px;color:#fff;font-size:8px;font-weight:800;border:2px solid #fff;border-radius:50%;vertical-align:middle}
.knight-header{position:relative;padding:0 8px 8px;background:#a46c54}
.knight-header__top{height:42px;margin:0 -8px;border-radius:0 0 7px 7px;background:radial-gradient(ellipse at 50% 100%,rgba(255,219,129,.55),transparent 55%),linear-gradient(#8b4c2d,#5a2716 70%,#3f170c);border-bottom:2px solid #2f1209}
.knight-logo{position:relative;z-index:2;display:block;width:184px;height:60px;margin:-31px auto 0}
.knight-logo img{display:block;width:184px;max-width:100%;height:auto;filter:drop-shadow(0 3px 2px rgba(0,0,0,.75));transition:transform .2s ease}
.knight-logo:hover img{transform:translateY(-2px) scale(1.03)}
.knight-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 0 6px;padding:4px;background:#561d00;border:1px solid #341103;box-shadow:inset 0 1px rgba(255,255,255,.12)}
.knight-nav a{min-width:0;padding:7px 3px;color:#ffe3aa;font-size:12px;font-weight:700;text-align:center;text-decoration:none;border:1px solid transparent;background:linear-gradient(#a85c2b,#7d3518);text-shadow:1px 1px #3a1103}
.knight-nav a:hover,.knight-nav a:focus-visible{color:#561d00;background:linear-gradient(#f4cf77,#e0ad50);border-color:#ffeca8;outline:none}.knight-nav i{margin-right:4px}
.knight-hero{position:relative;height:220px;overflow:hidden;border:2px solid #4b210f;background:#38170d;box-shadow:inset 0 0 25px rgba(0,0,0,.5)}
.knight-slider,.knight-slide,.knight-slide__link{position:absolute;inset:0;display:block}
.knight-slide{z-index:0;visibility:hidden;opacity:0;transform:translateX(3%);transition:opacity .55s ease,transform .55s ease,visibility .55s}
.knight-slide.is-active{z-index:1;visibility:visible;opacity:1;transform:translateX(0)}
.knight-slide__link{overflow:hidden;color:inherit;text-decoration:none}
.knight-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 41%;user-select:none;-webkit-user-drag:none}
.knight-slide__link::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(34,13,6,.82));pointer-events:none}
.knight-hero__glow{position:absolute;right:14%;bottom:24px;left:14%;z-index:2;height:40px;opacity:.6;background:radial-gradient(ellipse,#ffd76a,transparent 68%);pointer-events:none}
.knight-hero__caption{position:absolute;right:42px;bottom:8px;left:42px;z-index:3;color:#ffe5a6;font-size:11px;font-weight:800;letter-spacing:.8px;text-align:center;text-shadow:0 2px 2px #2b0e05,0 0 6px #000}
.knight-slider__arrow{position:absolute;top:50%;z-index:4;width:32px;height:48px;padding:0;color:#ffe5a6;font:700 34px/42px Georgia,serif;background:rgba(54,19,7,.58);border:1px solid rgba(255,221,151,.55);opacity:0;transform:translateY(-50%);transition:opacity .2s ease,background .2s ease}
.knight-hero:hover .knight-slider__arrow,.knight-slider__arrow:focus-visible{opacity:1}
.knight-slider__arrow:hover{background:rgba(113,47,18,.88)}
.knight-slider__arrow--prev{left:7px}.knight-slider__arrow--next{right:7px}
.knight-slider__dots{position:absolute;right:0;bottom:28px;left:0;z-index:5;display:flex;justify-content:center;gap:6px;pointer-events:none}
.knight-slider__dot{width:9px;height:9px;padding:0;background:rgba(255,243,210,.6);border:1px solid #4d1b0b;border-radius:50%;box-shadow:0 1px 2px #000;pointer-events:auto;transition:width .2s ease,background .2s ease}
.knight-slider__dot.is-active{width:22px;background:#e0ad50;border-radius:7px}
.download-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:9px 5px 3px;background:var(--knight-paper);border:2px solid var(--knight-brown);border-top:0}
.download-strip a{width:100px;color:#ad4105;font-size:10px;text-align:center;text-decoration:none}.download-strip img{display:block;width:100px;height:45px;margin-bottom:2px;object-fit:contain;transition:transform .18s ease,filter .18s ease}.download-strip a:hover img{transform:translateY(-2px);filter:brightness(1.08)}
.account-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 8px 6px;padding:7px 9px;color:#3c1b0d;background:#f9f0da;border:2px solid var(--knight-brown);border-radius:4px}.account-bar__welcome strong{color:#a62415}.account-bar__coin{margin-left:7px;color:#8c5800;font-weight:700;white-space:nowrap}.account-bar__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.account-bar__actions a{padding:4px 8px;color:#fff8dc;font-size:11px;font-weight:700;text-decoration:none;border:1px solid #3c1306;border-radius:3px;background:linear-gradient(#9d4d25,#632009)}.account-bar__actions a:hover{color:#561d00;background:var(--knight-gold)}
.knight-content{margin:0 8px;padding:4px;color:var(--knight-ink);background:var(--knight-paper);border:2px solid var(--knight-brown);border-radius:3px}.knight-content main{display:block;margin:0}
.knight-content .ibox-content,.knight-content main>div[style*="background-color"]{margin:0 0 6px!important;padding:5px!important;color:var(--knight-ink)!important;background:var(--knight-light)!important;border:1px solid #d2b087!important;border-radius:3px!important;box-shadow:none!important}
.knight-content .text-white,.knight-content .text-black,.knight-content .text-black1{color:var(--knight-ink)!important}
.knight-content h1,.knight-content h2,.knight-content h3,.knight-content h4,.knight-content h5,.knight-content .h3{margin:0 0 7px!important;padding:5px 7px!important;color:#8f3a20!important;font-size:16px!important;font-weight:700!important;text-align:left!important;text-shadow:none!important;border-bottom:1px solid #d2b087}
.knight-content .announcement{margin:0 0 6px!important;padding:4px 7px!important;color:var(--knight-ink)!important;background:#f9f0da!important;border:1px solid #d2b087!important;border-radius:3px!important;cursor:pointer}.knight-content .announcement:hover{background:#fff8e6!important;border-color:#b77b43!important}.knight-content .announcement a{color:#ad4105!important;font-weight:700}.knight-content .announcement-info,.knight-content .ent-info{color:var(--knight-ink)!important;background:#fffdf3!important;border-color:#d2b087!important}.knight-content a{color:#ad4105}
.knight-content .btn,.knight-content button,.knight-content input[type="submit"]{color:#fff8dc!important;background:linear-gradient(#a75528,#66230d)!important;border:1px solid #421506!important;border-radius:4px!important;box-shadow:inset 0 1px rgba(255,255,255,.18)!important}.knight-content .btn:hover,.knight-content button:hover,.knight-content input[type="submit"]:hover{color:#561d00!important;background:var(--knight-gold)!important}
.knight-content table,.knight-content .table{width:100%;margin-bottom:5px;color:var(--knight-ink)!important;background:#fffaf0;border-color:#d7bc91}.knight-content table thead th,.knight-content .table thead th{color:#fff3d1;background:#793316;border-color:#5a230e}.knight-content .table>:not(caption)>*>*{padding:.45rem .35rem;border-bottom-color:#d7bc91}.knight-content .table-hover>tbody>tr:hover>*{color:var(--knight-ink);background:#f6dfb4}
.knight-content input[type="text"],.knight-content input[type="password"],.knight-content input[type="email"],.knight-content input[type="number"],.knight-content select,.knight-content textarea{max-width:100%;color:var(--knight-ink);background:#fffdf6;border:1px solid #a7764e;border-radius:3px}.knight-content input:focus,.knight-content select:focus,.knight-content textarea:focus{border-color:#8c3b1b;box-shadow:0 0 0 2px rgba(140,59,27,.16);outline:0}
.knight-footer{position:relative;min-height:100px;margin-top:-1px;padding:44px 12px 16px;color:#fff1d0;font-size:11px;text-align:center;background:radial-gradient(ellipse at center top,rgba(231,170,86,.35),transparent 45%),linear-gradient(#874928,#4b1e10 72%,#2e1109);border-top:2px solid var(--knight-brown)}.knight-footer__ornament{position:absolute;top:10px;left:50%;width:180px;height:24px;transform:translateX(-50%);background:radial-gradient(circle,#e4b45f 0 3px,transparent 4px) center/18px 18px repeat-x;opacity:.65}.knight-footer a{color:#ffd77e;font-weight:700;text-decoration:none}.knight-footer p{margin:7px 0 0}
.back-to-top{position:fixed;right:14px;bottom:14px;z-index:20;display:grid;place-items:center;width:34px;height:34px;color:#fff1ce;text-decoration:none;background:#64230e;border:2px solid #d9a24c;border-radius:50%;box-shadow:0 3px 8px rgba(0,0,0,.45)}.back-to-top:hover{color:#561d00;background:#e0ad50}
@media(max-width:575.98px){body.girlkun-bg{padding:0;background:#514943!important}.knight-shell{border-right:0;border-left:0}.knight-hero{height:170px}.download-strip{gap:5px}.download-strip a,.download-strip img{width:82px}.download-strip img{height:38px}.account-bar{display:block;text-align:center}.account-bar__actions{justify-content:center;margin-top:6px}.knight-nav a{font-size:11px}.knight-slider__arrow{opacity:.9}.knight-hero__caption{right:30px;left:30px;font-size:9px}.knight-slider__dots{bottom:25px}}
@media(prefers-reduced-motion:reduce){.knight-slide{transition:none}}

/* ===== HSO360 OFFLINE V1 ===== */
.hso360-nav{position:relative;flex-wrap:wrap!important;gap:6px!important;padding:7px 8px!important;background:#512b10!important;border-top:3px solid #f18420;border-bottom:3px solid #f18420}
.hso360-nav a{position:relative;background:linear-gradient(#ffcf70,#ff9c30)!important;color:#fff!important;border:2px solid #ffd18a!important;border-radius:9px!important;padding:4px 13px!important;text-shadow:1px 1px #8a4300;box-shadow:inset 0 0 0 1px #e37b17;font-weight:700}
.nav-new,.nav-hot{position:absolute;right:-7px;top:-12px;border-radius:10px;padding:1px 5px;font-size:8px;color:#fff}.nav-new{background:#00a979}.nav-hot{background:#f0442f}
.portal-page{background:#f2cfa1;padding:22px 20px;min-height:440px;color:#3b281b}.portal-title{text-align:center;font-size:22px;font-weight:800;margin:0 0 4px}.portal-sub{text-align:center;color:#8c5f3b;margin-bottom:20px}.portal-card{background:#fff;border:1px solid #e1c5a7;border-radius:10px;padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(90,45,10,.12)}
.portal-section-title{font-size:15px;font-weight:800;border-left:5px solid #ff7d18;padding-left:9px;margin-bottom:12px}.portal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.portal-btn{border:0;border-radius:9px;background:linear-gradient(#ffc867,#ff982e);border:2px solid #ffd18a;color:#fff;text-shadow:1px 1px #a85b16;font-weight:800;padding:8px 15px}.portal-input{width:100%;border:1px solid #dccbc3;border-radius:8px;padding:10px 12px;background:#fffafa}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.package{background:#fff;border:1px solid #e3d2c2;border-radius:9px;overflow:hidden;text-align:center}.package .pic{height:100px;background:linear-gradient(#fff,#fff8eb);display:flex;align-items:center;justify-content:center;font-size:52px}.package h3{font-size:14px;margin:10px 4px}.package .meta{padding:0 8px 8px;font-size:11px;text-align:left}.package .price{font-weight:800;color:#b44d00;margin:8px}.package .buy{margin:0 8px 10px;width:calc(100% - 16px)}.reward-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}.reward-box{min-width:155px;background:#fff;border:1px solid #e0c5a8;border-radius:9px;padding:12px;text-align:center}.gift-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gift-card{background:#fff;border:1px solid #e1c9b2;border-radius:8px;padding:10px;text-align:center}.rank-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.rank-podium>div{background:#fff;border-radius:10px;padding:12px;text-align:center;border:1px solid #e4c8a8}.rank-num{width:45px;height:45px;line-height:45px;border-radius:50%;margin:auto;background:#ffad00;color:#fff;font-size:20px;font-weight:900}.offline-note{background:#fff5cc;border:1px solid #e9c76c;border-radius:8px;padding:10px;margin-bottom:14px;color:#704f00}
@media(max-width:575px){.portal-page{padding:14px 10px}.package-grid,.gift-list{grid-template-columns:repeat(2,1fr)}.portal-grid{grid-template-columns:1fr}.hso360-nav a{padding:4px 8px!important;font-size:10px!important}}

/* ===== HSO360 3D OFFICIAL THEME ===== */
body.girlkun-bg{
  background:
    linear-gradient(rgba(16,25,20,.40),rgba(20,12,7,.68)),
    url("../images/bg/banner/hso360_3d.png") center top/cover fixed no-repeat!important;
}
.knight-shell{max-width:1100px;background:#8c4d24;border-color:#5d2a10;box-shadow:0 0 38px rgba(0,0,0,.75)}
.health-note{background:rgba(48,24,10,.94);font-size:11px}
.knight-header{padding:0 10px 10px;background:linear-gradient(#8b4b23,#5c280f)}
.knight-header__top{height:18px;background:linear-gradient(#7d401d,#4d200d);border-bottom-color:#321207}
.knight-logo{display:none}
.knight-nav{grid-template-columns:repeat(7,1fr);gap:7px;margin:7px 0;padding:8px;background:#55250d;border:2px solid #f28b23;border-radius:8px}
.knight-nav a{padding:9px 4px!important;border-radius:10px!important;font-size:13px!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 2px 3px rgba(0,0,0,.28)!important}
.knight-hero{height:auto;aspect-ratio:1536/531;border:3px solid #6a2d10;border-radius:10px;box-shadow:0 5px 16px rgba(0,0,0,.45)}
.knight-slide img{object-fit:cover;object-position:center}
.knight-slide__link::after,.knight-hero__glow,.knight-hero__caption{display:none}
.download-strip{display:none}
.account-bar{margin:8px 10px;padding:9px 12px;border-radius:8px;background:linear-gradient(#fff5d7,#f2d397);border-color:#7a3817}
.knight-content{margin:0 10px 10px;padding:0;border-radius:9px;background:#f0c78e;border-color:#6c3012;overflow:hidden}
.portal-page{background:linear-gradient(#f4d5a8,#edc083);padding:26px 24px}
.portal-card{border:2px solid #e0b474;box-shadow:0 4px 10px rgba(91,48,16,.12)}
.knight-footer{background:linear-gradient(#7d401d,#351408)}
@media(max-width:900px){.knight-nav{grid-template-columns:repeat(4,1fr)}.knight-shell{max-width:100%}}
@media(max-width:575.98px){.knight-nav{grid-template-columns:repeat(2,1fr)}.knight-hero{aspect-ratio:1536/531}.portal-page{padding:15px 10px}}

/* HSO360: menu 3D nam trong banner */
.hso360-nav{display:none!important}
.knight-hero{position:relative!important}
.hero-hotspots{
  position:absolute;
  left:4.8%; right:4.8%;
  bottom:4.5%;
  height:15.5%;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:.35%;
  z-index:20;
}
.hero-hotspots a{display:block;border-radius:12px;cursor:pointer}
.hero-hotspots a:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px rgba(255,223,128,.22)}
@media(max-width:768px){
  .hero-hotspots{left:4%;right:4%;bottom:4%;height:16%;gap:0}
  .hero-hotspots a{border-radius:5px}
}

/* ===== HSO360 HOME DEMO 3D - news / download / top ===== */
.home3d{padding:14px;background:linear-gradient(#f3cf94,#eab979);min-height:460px}
.home3d-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.95fr);gap:14px;align-items:start}
.wood-panel{overflow:hidden;border:3px solid #6e310f;border-radius:12px;background:#f8dfad;box-shadow:0 5px 12px rgba(67,31,8,.28),inset 0 0 0 1px #d99a45;margin-bottom:14px}
.wood-title{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 14px;color:#fff1c6;font-size:18px;font-weight:900;letter-spacing:.2px;text-shadow:0 2px 1px #3b1605;background:linear-gradient(#a95b24,#6f310f 55%,#522007);border-bottom:2px solid #3f1706;box-shadow:inset 0 2px rgba(255,218,135,.28)}
.wood-title:before{content:"";position:absolute;inset:3px;border:1px solid rgba(255,211,120,.24);border-radius:7px;pointer-events:none}
.wood-title>a{margin-left:auto;padding:6px 10px;color:#6c2b0d!important;font-size:11px;text-shadow:none;text-decoration:none;background:linear-gradient(#fff4d0,#e7b86c);border:1px solid #8e4b1c;border-radius:7px;box-shadow:inset 0 1px #fff}
.wood-chevron{margin-left:auto;font-size:30px;color:#ffd66c}.paper-body{background:linear-gradient(#fff5d8,#f5d8a4);padding:10px}
.news-list{padding:8px 10px}.news-item{position:relative;display:grid;grid-template-columns:115px 1fr 22px;gap:12px;align-items:center;min-height:82px;padding:9px 4px;border-bottom:1px solid #dfbd82}.news-item:last-child{border-bottom:0}.news-item--lead{grid-template-columns:190px 1fr 22px;min-height:142px}.news-thumb{height:68px;border:2px solid #e5b96f;border-radius:8px;background-image:url("../images/bg/banner/hso360_3d.png");background-size:360%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 2px 5px rgba(80,35,5,.2)}.news-item--lead .news-thumb{height:122px;background-size:250%}.news-copy{min-width:0}.news-copy h3{margin:4px 0 2px!important;padding:0!important;border:0!important;color:#32190d!important;font-size:15px!important;line-height:1.25}.news-item--lead .news-copy h3{font-size:18px!important}.news-copy p{margin:4px 0 0;font-size:11px;line-height:1.45;color:#6b4a30}.news-date{font-size:10px;color:#9b5e2d}.news-tag{display:inline-block;padding:3px 8px;border-radius:5px;color:#fff;font-size:9px;font-weight:900}.news-tag.event{background:#d83c2f}.news-tag.notice{background:#ed8d16}.news-tag.update{background:#278bd7}.news-tag.guide{background:#28a247}.news-arrow{font:700 38px/1 Georgia;color:#9b4d18;text-align:center}
.download3d-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.download-tile{min-height:72px;display:grid;grid-template-columns:52px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:7px 10px;color:#fff!important;text-decoration:none!important;border:2px solid rgba(61,28,5,.55);border-radius:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 5px rgba(70,31,6,.25);text-shadow:0 2px 1px rgba(0,0,0,.45);transition:.15s}.download-tile:hover{transform:translateY(-2px);filter:brightness(1.08)}.download-tile b{grid-row:1/3;font-size:36px;text-align:center}.download-tile strong{align-self:end;font-size:14px}.download-tile small{align-self:start;font-size:9px}.download-tile.android{background:linear-gradient(#54d529,#16980c)}.download-tile.pc{background:linear-gradient(#32aef3,#0871d1)}.download-tile.ios{background:linear-gradient(#777,#252525)}.download-tile.java{background:linear-gradient(#d87713,#7f2c03)}
.podium3d{display:flex;align-items:flex-end;justify-content:center;gap:5px;min-height:205px;padding:18px 8px 10px;background:radial-gradient(circle at 50% 15%,#fff7cf,#f2cc8b 60%,#dba35e)}.podium-player{position:relative;width:31%;padding-top:5px;text-align:center;color:#4c220d}.avatar3d{display:grid;place-items:center;width:70px;height:70px;margin:0 auto -8px;border:3px solid #6e310f;border-radius:50% 50% 42% 42%;font-size:35px;color:#fff3a7;text-shadow:0 2px 2px #5c1d0b;background:linear-gradient(145deg,#e24d2b,#7e1e10);box-shadow:0 3px 7px rgba(70,28,4,.35)}.place-1 .avatar3d{width:82px;height:82px;background:linear-gradient(145deg,#fff1a2,#f49a17);color:#7a3000}.place-3 .avatar3d{background:linear-gradient(145deg,#42c77b,#146b40)}.medal3d{position:relative;z-index:2;width:34px;height:34px;line-height:30px;margin:0 auto 3px;border:3px solid #fff2bd;border-radius:50%;color:#fff;font-size:16px;font-weight:900;background:#b7b9bd;box-shadow:0 2px 4px rgba(0,0,0,.25)}.place-1 .medal3d{width:42px;height:42px;line-height:36px;background:#f3a500;font-size:20px}.place-3 .medal3d{background:#d66b28}.podium-player strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.podium-player small{display:block;color:#8b552d;font-weight:700}.place-1{transform:translateY(-16px)}
@media(max-width:800px){.home3d-grid{grid-template-columns:1fr}.news-item--lead{grid-template-columns:135px 1fr 18px}.news-item--lead .news-thumb{height:95px}.home3d-side{display:grid;grid-template-columns:1fr 1fr;gap:10px}.home3d-side .wood-panel{margin-bottom:0}}
@media(max-width:575px){.home3d{padding:8px}.wood-title{font-size:14px;min-height:42px}.news-item,.news-item--lead{grid-template-columns:92px 1fr 14px;gap:7px}.news-item--lead .news-thumb,.news-thumb{height:68px}.news-copy p{display:none}.news-item--lead .news-copy h3,.news-copy h3{font-size:12px!important}.home3d-side{grid-template-columns:1fr}.download-tile{min-height:62px;grid-template-columns:42px 1fr}.download-tile b{font-size:28px}.podium3d{min-height:180px}.avatar3d{width:58px;height:58px}.place-1 .avatar3d{width:68px;height:68px}}
/* HSO360 V2 account + history */
.account-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.account-info-grid>div{background:#fff7e7;border:1px solid #e1b66c;border-radius:10px;padding:14px;display:flex;flex-direction:column}.account-info-grid small{color:#8b613d}.account-info-grid b{font-size:17px;color:#6c3216}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.character-card{background:linear-gradient(#fff8e8,#f4d39e);border:2px solid #c7812c;border-radius:12px;padding:14px;text-align:center;box-shadow:0 3px 8px #0002}.character-card h3{font-size:17px;margin:5px}.character-card small{display:block}.character-avatar{font-size:38px}.claim-line{display:flex;justify-content:space-between;border-bottom:1px dashed #d9b47a;padding:9px 4px}.portal-btn:disabled{opacity:.45;cursor:not-allowed}@media(max-width:700px){.account-info-grid,.character-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.account-info-grid,.character-grid{grid-template-columns:1fr}}

/* ===== HSO360 SHOP COIN V3 ===== */
.shop360-wallet{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center;margin:0 0 18px;padding:12px 14px;background:linear-gradient(#fff7dc,#edc87f);border:2px solid #9b5520;border-radius:11px;box-shadow:inset 0 1px #fff,0 3px 8px #6b32152b}.shop360-wallet>div{display:flex;flex-direction:column}.shop360-wallet span{font-size:11px;color:#8b5a31}.shop360-wallet b{color:#6b2d10;font-size:16px}.shop360-wallet a{padding:7px 10px;color:#fff!important;text-decoration:none;font-size:11px;font-weight:800;background:linear-gradient(#a95728,#6b260e);border:1px solid #431606;border-radius:6px}.shop360-title{margin-top:4px}.shop360-grid{grid-template-columns:repeat(3,1fr);gap:13px}.shop360-pack{border:2px solid #c47b2a;border-radius:12px;background:linear-gradient(#fffaf0,#f3d39c);box-shadow:0 4px 9px #66300f25}.shop360-chest{height:105px;display:grid;place-items:center;font-size:64px;background:radial-gradient(circle,#fff8d2,#edc879);border-bottom:1px solid #ddb16b}.shop360-pack h3{margin:9px 7px!important;padding:0!important;border:0!important;text-align:center!important;color:#57240e!important}.shop360-rewards{margin:0 9px;padding:8px;background:#fff9e9;border:1px solid #e0bd82;border-radius:8px}.shop360-rewards>div{display:flex;justify-content:space-between;gap:6px;padding:4px 0;border-bottom:1px dashed #e5c99c;font-size:11px}.shop360-rewards>div:last-child{border:0}.shop360-rewards b{color:#b84c0b}.shop360-pack .price{font-size:15px}.shop360-flash.is-ok{background:#ecffd9;border-color:#68ad36;color:#346214}.shop360-flash.is-error{background:#ffe7df;border-color:#d15a3d;color:#8b2817}.shop360-history{margin-top:18px}.shop360-history-row{display:grid;grid-template-columns:1fr auto 82px;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px dashed #dab77d}.shop360-history-row:last-child{border-bottom:0}.shop360-history-row div{display:flex;flex-direction:column}.shop360-history-row small{color:#95663d}.shop360-history-row strong{color:#a84309}.shop360-status{padding:4px 7px;text-align:center;border-radius:12px;font-size:10px;font-weight:900}.shop360-status.done{color:#176534;background:#d9f7df}.shop360-status.pending{color:#8a5700;background:#fff0b8}@media(max-width:700px){.shop360-grid{grid-template-columns:1fr 1fr}.shop360-wallet{grid-template-columns:1fr 1fr}.shop360-wallet a{grid-column:1/-1;text-align:center}}@media(max-width:480px){.shop360-grid{grid-template-columns:1fr}.shop360-history-row{grid-template-columns:1fr auto}.shop360-status{grid-column:1/-1}.shop360-wallet{grid-template-columns:1fr}}


/* ===== HSO360 GIFTCODE SERVER TABLE V3 ===== */
.gift360-note{margin:-3px 0 12px;color:#8b613d;font-size:11px}.gift360-table-wrap{overflow-x:auto;border:1px solid #dfbd82;border-radius:9px}.gift360-table{width:100%;min-width:760px;margin:0!important;border-collapse:collapse;background:#fffaf0}.gift360-table th{padding:9px 8px!important;color:#fff4d4!important;font-size:11px;text-align:center;background:linear-gradient(#9b4b20,#6d2a0d)!important;border:0!important}.gift360-table td{padding:10px 8px!important;font-size:11px;vertical-align:middle;text-align:center;border-bottom:1px solid #ead2aa}.gift360-table tbody tr:last-child td{border-bottom:0}.gift360-table tbody tr:hover td{background:#fff3d3}.gift360-code{display:inline-block;padding:5px 9px;color:#8a310d;background:#ffe9ad;border:1px solid #d99b3c;border-radius:7px;letter-spacing:.3px}.gift360-status{display:inline-block;min-width:70px;padding:4px 8px;border-radius:12px;font-size:10px;font-weight:900}.gift360-status.ok{color:#176534;background:#d9f7df}.gift360-status.empty{color:#8a5700;background:#fff0b8}.gift360-status.expired{color:#92291d;background:#ffe0da}.gift360-status.off{color:#666;background:#e8e8e8}.gift360-empty{padding:18px;text-align:center;color:#8b613d;background:#fff9e9;border:1px dashed #d6ae72;border-radius:8px}@media(max-width:575px){.gift360-card{padding:11px}.gift360-table th,.gift360-table td{padding:8px 6px!important}}

/* HSO360 V4 - Admin button + item icons */
.admin-panel-btn{background:linear-gradient(#3d8d3d,#1f6223)!important;border-color:#174c1b!important;color:#fff!important;font-weight:900!important}.item-reward-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.item-reward{display:inline-flex!important;align-items:center;gap:5px}.item-reward img,.shop360-rewards .item-reward img{width:34px;height:34px;object-fit:contain;image-rendering:auto;background:#f8e7bd;border:1px solid #d59a46;border-radius:6px;padding:2px;vertical-align:middle}.gift360-table .item-reward{padding:3px 6px;background:#fff4d5;border:1px solid #e2bd78;border-radius:7px}.gift360-table .item-reward b{color:#9b3d10}.shop360-rewards .item-reward>span{display:flex;align-items:center;gap:7px}


/* === HSO360 dynamic hero === */
.knight-hero{isolation:isolate;perspective:900px}
.knight-slide.is-active img{
  animation:hsoHeroBreath 8s ease-in-out infinite alternate;
  transform-origin:50% 45%;
  will-change:transform,filter;
}
.knight-slide.is-active::after{
  content:"";position:absolute;inset:-30%;z-index:2;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.20) 48%,transparent 61%);
  transform:translateX(-70%) rotate(-4deg);
  animation:hsoHeroShine 6.5s ease-in-out infinite;
  mix-blend-mode:screen;
}
.knight-hero::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(circle at 21% 42%,rgba(255,185,55,.18),transparent 17%),
    radial-gradient(circle at 77% 47%,rgba(78,190,255,.15),transparent 19%);
  animation:hsoMagicPulse 3.2s ease-in-out infinite alternate;
}
.hero-hotspots{z-index:8!important}
.hero-hotspots a{
  position:relative;transition:transform .18s ease,filter .18s ease,background .18s ease,box-shadow .18s ease;
  transform-origin:center bottom;
}
.hero-hotspots a:hover,.hero-hotspots a:focus-visible{
  transform:translateY(-4px) scale(1.035);
  background:rgba(255,236,170,.10);
  box-shadow:inset 0 0 0 2px rgba(255,226,125,.30),0 5px 12px rgba(53,20,5,.24);
  filter:brightness(1.08);
  outline:none;
}
.hero-hotspots a:active{transform:translateY(-1px) scale(.985)}
@keyframes hsoHeroBreath{
  0%{transform:scale(1.005) translate3d(-.15%,0,0);filter:saturate(1) brightness(1)}
  100%{transform:scale(1.035) translate3d(.25%,-.3%,0);filter:saturate(1.06) brightness(1.025)}
}
@keyframes hsoHeroShine{
  0%,54%{transform:translateX(-75%) rotate(-4deg);opacity:0}
  61%{opacity:.55}
  76%,100%{transform:translateX(75%) rotate(-4deg);opacity:0}
}
@keyframes hsoMagicPulse{
  from{opacity:.45;filter:brightness(.95)}
  to{opacity:.95;filter:brightness(1.15)}
}
@media (prefers-reduced-motion:reduce){
  .knight-slide.is-active img,.knight-slide.is-active::after,.knight-hero::before{animation:none!important}
  .hero-hotspots a{transition:none}
}

.knight-slide.is-active img{translate:var(--hso-x,0) var(--hso-y,0)}


/* === HSO360 LIVE HERO V2: visible animation === */
.knight-hero{overflow:hidden!important}
.hso-livefx{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.hso-livefx__logo{
  position:absolute;left:31%;top:19%;width:38%;height:46%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,238,127,.23) 0%,rgba(255,166,34,.11) 42%,transparent 70%);
  animation:hsoLogoFloat 2.5s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 7px rgba(255,201,55,.4));
}
.hso-livefx__left{
  position:absolute;left:-2%;top:8%;width:40%;height:72%;
  background:
    radial-gradient(ellipse at 28% 58%,rgba(255,224,96,.48),rgba(255,91,13,.20) 20%,transparent 52%),
    conic-gradient(from 215deg at 28% 57%,transparent 0 16%,rgba(255,238,115,.32) 18%,transparent 21% 100%);
  mix-blend-mode:screen;filter:blur(1px);
  animation:hsoLeftPower 1.7s ease-in-out infinite alternate;
}
.hso-livefx__right{
  position:absolute;right:2%;top:25%;width:29%;height:61%;border-radius:50%;
  background:
    radial-gradient(circle at 61% 42%,rgba(255,255,255,.48) 0 3%,rgba(64,220,255,.32) 9%,rgba(0,107,255,.18) 28%,transparent 57%),
    conic-gradient(from 0deg,transparent,rgba(66,214,255,.26),transparent 24%,rgba(57,119,255,.23),transparent 55%);
  mix-blend-mode:screen;
  animation:hsoRightMagic 2.2s linear infinite;
}
.hso-livefx__sweep{
  position:absolute;top:-30%;bottom:-30%;width:13%;left:-18%;
  transform:rotate(17deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.27),transparent);
  filter:blur(3px);mix-blend-mode:screen;
  animation:hsoSweep 5.2s ease-in-out infinite;
}
.hso-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff6b0;box-shadow:0 0 5px #fff,0 0 12px #ffbf35;opacity:0;animation:hsoSpark 3.4s ease-in-out infinite}
.hso-spark--1{left:19%;top:23%;animation-delay:.1s}.hso-spark--2{left:37%;top:17%;animation-delay:.8s}
.hso-spark--3{left:55%;top:29%;animation-delay:1.5s}.hso-spark--4{left:72%;top:18%;animation-delay:2.2s}
.hso-spark--5{left:83%;top:42%;animation-delay:1.1s}.hso-spark--6{left:46%;top:66%;animation-delay:2.7s}
.hero-hotspots a::after{
  content:"";position:absolute;inset:7% 4%;border-radius:10px;opacity:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.28) 48%,transparent 70%);
  transform:translateX(-80%);transition:opacity .15s;pointer-events:none
}
.hero-hotspots a:hover::after,.hero-hotspots a:focus-visible::after{opacity:1;animation:hsoButtonShine .7s ease-out}
@keyframes hsoLogoFloat{
  from{transform:translateY(1px) scale(.98);opacity:.48}
  to{transform:translateY(-5px) scale(1.045);opacity:.9}
}
@keyframes hsoLeftPower{
  from{transform:scale(.96) rotate(-1deg);opacity:.52}
  to{transform:scale(1.06) rotate(1.5deg);opacity:1}
}
@keyframes hsoRightMagic{
  0%{transform:rotate(0deg) scale(.96);opacity:.58}
  50%{transform:rotate(180deg) scale(1.08);opacity:1}
  100%{transform:rotate(360deg) scale(.96);opacity:.58}
}
@keyframes hsoSweep{
  0%,15%{left:-18%;opacity:0}
  27%{opacity:.75}
  52%{left:110%;opacity:0}
  100%{left:110%;opacity:0}
}
@keyframes hsoSpark{
  0%,100%{transform:translate(0,8px) scale(.2);opacity:0}
  35%{opacity:1}
  70%{transform:translate(7px,-15px) scale(1.25);opacity:.8}
}
@keyframes hsoButtonShine{from{transform:translateX(-80%)}to{transform:translateX(80%)}}
@media(prefers-reduced-motion:reduce){
 .hso-livefx>*{animation:none!important}.hso-livefx{display:none}
}


/* === HSO360 LAYERED MOTION FINAL === */
.knight-hero{position:relative!important;overflow:hidden!important;isolation:isolate}
.hso-layered-motion{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none}
.hso-cut{
 position:absolute;inset:0;
 background-image:url("../images/bg/banner/hso360_3d_menu8.png");
 background-size:100% 100%;background-repeat:no-repeat;
 will-change:transform,filter;
}
/* knight + flaming weapon */
.hso-cut--left{
 clip-path:polygon(0 4%,41% 4%,41% 80%,0 80%);
 animation:hsoKnightFloat 2.15s ease-in-out infinite alternate;
 filter:drop-shadow(0 0 5px rgba(255,139,22,.38));
}
/* HSO360 central logo */
.hso-cut--logo{
 clip-path:polygon(32% 7%,68% 7%,68% 70%,32% 70%);
 animation:hsoLogoBeat 2.6s ease-in-out infinite;
 filter:drop-shadow(0 3px 3px rgba(60,20,0,.25));
}
/* mage + magic */
.hso-cut--right{
 clip-path:polygon(61% 4%,100% 4%,100% 80%,61% 80%);
 animation:hsoMageFloat 2.45s ease-in-out infinite alternate;
 filter:drop-shadow(0 0 5px rgba(41,165,255,.30));
}
.hso-orb{
 position:absolute;right:5.2%;top:29%;width:14%;aspect-ratio:1;border-radius:50%;
 background:
   conic-gradient(from 0deg,transparent 0 10%,rgba(83,227,255,.72) 15%,transparent 23% 42%,rgba(68,111,255,.62) 50%,transparent 58% 78%,rgba(255,255,255,.7) 85%,transparent 92%),
   radial-gradient(circle,rgba(255,255,255,.16),rgba(0,161,255,.12) 38%,transparent 68%);
 mix-blend-mode:screen;filter:blur(.4px) drop-shadow(0 0 7px rgba(0,171,255,.7));
 animation:hsoOrbSpin 1.9s linear infinite;
}
.hso-flare{position:absolute;border-radius:50%;background:#fff9bb;box-shadow:0 0 4px #fff,0 0 10px #ffd237,0 0 18px #ff8b19;animation:hsoFlare 2.2s ease-in-out infinite}
.hso-flare--1{left:12%;top:42%;width:8px;height:8px}
.hso-flare--2{left:47%;top:16%;width:6px;height:6px;animation-delay:.7s}
.hso-flare--3{right:13%;top:38%;width:7px;height:7px;animation-delay:1.25s;box-shadow:0 0 4px #fff,0 0 12px #65dcff,0 0 20px #178cff}
.hero-hotspots{z-index:10!important}
.hero-hotspots a{
 transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
 transform-origin:center bottom;
}
.hero-hotspots a:hover,.hero-hotspots a:focus-visible{
 transform:translateY(-5px) scale(1.045)!important;
 filter:brightness(1.16) saturate(1.08);
 box-shadow:inset 0 0 0 2px rgba(255,235,150,.42),0 4px 13px rgba(63,22,0,.28)!important;
}
@keyframes hsoKnightFloat{
 0%{transform:translate3d(-2px,2px,0) rotate(-.25deg) scale(1.002)}
 100%{transform:translate3d(5px,-5px,0) rotate(.35deg) scale(1.012)}
}
@keyframes hsoMageFloat{
 0%{transform:translate3d(3px,-2px,0) rotate(.2deg) scale(1.003)}
 100%{transform:translate3d(-5px,5px,0) rotate(-.3deg) scale(1.013)}
}
@keyframes hsoLogoBeat{
 0%,100%{transform:scale(1);filter:brightness(1)}
 50%{transform:scale(1.028);filter:brightness(1.10)}
}
@keyframes hsoOrbSpin{
 from{transform:rotate(0deg) scale(.92);opacity:.58}
 50%{opacity:1}
 to{transform:rotate(360deg) scale(.92);opacity:.58}
}
@keyframes hsoFlare{
 0%,100%{transform:translateY(8px) scale(.35);opacity:0}
 35%{opacity:1}
 70%{transform:translate(5px,-12px) scale(1.2);opacity:.9}
}
@media(max-width:575.98px){
 .hso-cut--left,.hso-cut--right{animation-duration:3s}
 .hso-orb{opacity:.72}
}
@media(prefers-reduced-motion:reduce){
 .hso-layered-motion{display:none!important}
}