/* =====================================================================
   SINH TU DONG - DUNG SUA TAY.

       node tools/gen-cmt-decor-inline.js

   Nguon su that la public/static/css/cmt.css (do trang tri) va
   public/static/css/theme.css (bang mau theo theme cua site). File nay chi
   la phan duoc rut ra de bang "Binh luan moi" o TRANG CHU ve duoc khung
   avatar, kieu ten, danh hieu, the quyen va huy chuong ma khong phai nap ca
   63 KB cua cmt.css.

   Sua mau/kich thuoc thi sua o hai file nguon roi chay lai lenh tren.
   Kiem tra lech:  node tools/gen-cmt-decor-inline.js --check

   Moi selector .cmt-wrap da duoc doi thanh .cmt-newest-wrap - bang tren
   trang chu KHONG muon class cua khung binh luan o trang truyen.
   ===================================================================== */

.cmt-newest-wrap {
  --cmt-bg:        #17181c;
  --cmt-bg-soft:   #1e2026;
  --cmt-bg-hover:  #24262e;
  --cmt-border:    #2c2f38;
  --cmt-text:      #e6e7ea;
  --cmt-text-dim:  #9aa0a6;
  --cmt-text-mute: #6b7078;
  --cmt-accent:    #ff5f8f;
  --cmt-accent-dim:#3a2029;
  --cmt-radius:    10px;
}

html[data-theme="light"] .cmt-newest-wrap {
  --cmt-bg:        #ffffff;
  --cmt-bg-soft:   #f5f6f8;
  --cmt-bg-hover:  #eceef2;
  --cmt-border:    #e2e5ea;
  --cmt-text:      #1c1e21;
  --cmt-text-dim:  #606770;
  --cmt-text-mute: #8a8d91;
  --cmt-accent-dim:#ffe9f0;
}

html[data-theme="dark"] .cmt-newest-wrap {
  --cmt-bg:        #17181c;
  --cmt-bg-soft:   #1e2026;
  --cmt-bg-hover:  #24262e;
  --cmt-border:    #2c2f38;
  --cmt-text:      #e6e7ea;
  --cmt-text-dim:  #9aa0a6;
  --cmt-text-mute: #6b7078;
  --cmt-accent-dim:#3a2029;
}

.cmt-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--cmt-text);
  text-decoration: none;
}

.cmt-name:hover {
  color: var(--cmt-accent);
}

.cmt-lv {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  line-height: 1.5;
}

.cmt-rank {
  font-size: 11px;
  color: var(--cmt-text-dim);
  white-space: nowrap;
}

.cmt-role {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--cmt-accent-dim);
  color: var(--cmt-accent);
  white-space: nowrap;
  line-height: 1.5;
}

.cmt-role.is-vip {
  background: #3a3020;
  color: #f0b23c;
}

.cmt-badges {
  display: inline-flex;
  gap: 3px;
}

.cmt-badge {
  font-size: 12px;
  line-height: 1;
  cursor: help;
}

.cmt-badge img {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.cmt-tier {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: .2px;
  color: #fff;
  border: 1px solid transparent;
  background-image: linear-gradient(135deg, var(--t1), var(--t2));
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.cmt-tier-bronze {
  --t1: #b07a4a;
  --t2: #8a5a34;
}

.cmt-tier-silver {
  --t1: #b3bfcb;
  --t2: #8b98a6;
  color: #1c1e21;
  text-shadow: none;
}

.cmt-tier-gold {
  --t1: #edb949;
  --t2: #c98d21;
  color: #2a1d05;
  text-shadow: none;
}

.cmt-tier-platinum {
  --t1: #4fd0b8;
  --t2: #2a9e8b;
  color: #05221d;
  text-shadow: none;
}

.cmt-tier-diamond {
  --t1: #5cbcff;
  --t2: #2f7fd4;
}

.cmt-tier-star {
  --t1: #b088ff;
  --t2: #7549d8;
}

.cmt-tier-king {
  --t1: #ff8a5c;
  --t2: #e04a22;
}

.cmt-tier-glory {
  --t1: #ffd76a;
  --t2: #f0a318;
  color: #2a1d05;
  text-shadow: none;
  border-color: rgba(255, 236, 150, .85);
  box-shadow: 0 0 6px rgba(255, 200, 60, .45);
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .cmt-tier-glory::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
  
                  transparent 35%,
  
                  rgba(255, 255, 255, .75) 50%,
  
                  transparent 65%);
    transform: translateX(-120%);
    animation: cmt-tier-shine 3.2s ease-in-out infinite;
  }
}

@media (prefers-color-scheme: light) {
  .cmt-newest-wrap:not([data-theme="dark"]) .cmt-tier {
    border-color: rgba(0, 0, 0, .08);
  }
}

.cmt-ava-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

.cmt-ava-wrap .cmt-ava {
  width: 100%;
  height: 100%;
}

.cmt-ava-frame {
  position: absolute;
  inset: -23.5%;
  width: 147%;
  height: 147%;
  pointer-events: none;
  object-fit: contain;
  max-width: none;
}

.cmt-np-vip {
  background-image: linear-gradient(90deg, #ffd76a, #f0a318);
  -webkit-background-clip: text;
  background-clip: text;
  color: #f0a318;
  font-weight: 700;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cmt-np-vip {
    color: transparent;
  }
}

.cmt-np-lua {
  background-image: linear-gradient(90deg, #ff8a5c, #e0342a);
  -webkit-background-clip: text;
  background-clip: text;
  color: #e0342a;
  font-weight: 700;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cmt-np-lua {
    color: transparent;
  }
}

.cmt-np-bang {
  background-image: linear-gradient(90deg, #7fd8ff, #4a7bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: #4a7bff;
  font-weight: 700;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cmt-np-bang {
    color: transparent;
  }
}

.cmt-np-the_vang {
  background: linear-gradient(90deg, #4a3a12, #7a5f1c);
  color: #ffd76a;
  padding: 1px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 106, .5);
}

.cmt-np-the_tim {
  background: linear-gradient(90deg, #2e1f4d, #4a2f7a);
  color: #d7b8ff;
  padding: 1px 8px;
  border-radius: 4px;
  border: 1px solid rgba(176, 136, 255, .5);
}

@media (prefers-color-scheme: light) {
  .cmt-newest-wrap:not([data-theme="dark"]) .cmt-np-the_vang,
  
    .cmt-newest-wrap:not([data-theme="dark"]) .cmt-np-the_tim {
    border-color: rgba(0, 0, 0, .15);
  }
}

.cmt-role-r2 {
  background: #1e2f24;
  color: #6ecf8e;
}

.cmt-role-r9 {
  background: #33201f;
  color: #ff7b72;
}

.cmt-role-r10 {
  background: #331f2a;
  color: #ff8fc0;
}

.cmt-role-r11 {
  background: #332a17;
  color: #ffc94d;
}

@media (prefers-color-scheme: light) {
  .cmt-newest-wrap:not([data-theme="dark"]) .cmt-role-r2 {
    background: #e4f5ea;
    color: #1d7a41;
  }
  
  .cmt-newest-wrap:not([data-theme="dark"]) .cmt-role-r9 {
    background: #fdeae9;
    color: #b3261e;
  }
  
  .cmt-newest-wrap:not([data-theme="dark"]) .cmt-role-r10 {
    background: #fceaf2;
    color: #a61e63;
  }
  
  .cmt-newest-wrap:not([data-theme="dark"]) .cmt-role-r11 {
    background: #fdf2da;
    color: #8a6100;
  }
}

.cmt-tier {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.cmt-tier-ic {
  width: 16px;
  height: 16px;
  margin: -3px 0;
  object-fit: contain;
  flex: none;
}

.cmt-tier-challenge {
  --t1: #ff7d94;
  --t2: #e0334f;
}

.cmt-tier-cking {
  --t1: #7a1020;
  --t2: #3d0810;
  border-color: rgba(255, 190, 90, .9);
  box-shadow: 0 0 7px rgba(255, 140, 40, .5);
  text-shadow: none;
}

.cmt-tier-cking .cmt-tier-tx {
  background-image: linear-gradient(90deg,
      #ffd24a 0%, #ff9c2a 25%, #ff4d3d 50%, #ff9c2a 75%, #ffd24a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .cmt-tier-cking .cmt-tier-tx {
    animation: cmt-tier-rainbow 3s linear infinite;
  }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .cmt-tier-cking .cmt-tier-tx {
    color: #ffd24a;
    -webkit-text-fill-color: #ffd24a;
    background: none;
  }
}

.cmt-np-lang_kinh,
.cmt-np-cyber,
.cmt-np-keo_ngot,
.cmt-np-magma,
.cmt-np-bach_kim {
  display: inline-block;
  padding: 2px 10px 3px;
  border-radius: 999px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
              0 1px 3px rgba(0, 0, 0, .45);
  flex: 0 0 auto;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 12px;
}

.cmt-np-lang_kinh {
  background-image: linear-gradient(120deg,
      #ff007a, #9333ea, #06b6d4, #10b981, #f59e0b, #ff007a);
  background-size: 250% 250%;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.cmt-np-cyber {
  background-image: linear-gradient(100deg, #ff0055, #7a00ff 45%, #00f0ff);
  color: #fff;
  letter-spacing: .8px;
  text-shadow: 0 0 6px rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
              0 0 12px rgba(122, 0, 255, .55),
              0 1px 3px rgba(0, 0, 0, .45);
}

.cmt-np-keo_ngot {
  background-image: linear-gradient(180deg, #fff700 0%, #ff4b91 55%, #7b2cbf 100%);
  color: #3a0d2b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.cmt-np-magma {
  background-image: linear-gradient(90deg,
      #ff0844, #ffb199, #f107a3, #7b2ff7, #00e1d9, #ffb199, #ff0844);
  background-size: 300% auto;
  color: #fff;
  letter-spacing: .5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.cmt-np-bach_kim {
  background-image: linear-gradient(135deg,
      #ffffff 0%, #ffc0eb 20%, #a0f4ff 40%, #fff7a0 60%, #c4b5fd 80%, #ffffff 100%);
  background-size: 250% 250%;
  color: #24304a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
              0 1px 3px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: no-preference) {
  .cmt-np-lang_kinh {
    animation: cmt-np-sweep 3.5s ease infinite;
  }
  
  .cmt-np-keo_ngot {
    animation: cmt-np-bounce 2.5s ease-in-out infinite;
  }
  
  .cmt-np-lang_kinh::after,
  
    .cmt-np-cyber::after,
  
    .cmt-np-keo_ngot::after,
  
    .cmt-np-magma::after,
  
    .cmt-np-bach_kim::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(105deg,
  
          rgba(255, 255, 255, 0) 38%,
  
          rgba(255, 255, 255, .78) 50%,
  
          rgba(255, 255, 255, 0) 62%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    animation: cmt-np-beam 4s ease-in-out infinite;
  }
  
  .cmt-np-lang_kinh::before,
  
    .cmt-np-magma::before,
  
    .cmt-np-bach_kim::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--cmt-aura) at 50% 50%,
  
          #ff007a, #f59e0b, #10b981, #06b6d4, #9333ea, #ff007a);
    filter: blur(4px);
    opacity: .62;
    animation: cmt-np-aura 4s linear infinite;
  }
  
  .cmt-np-bach_kim::before {
    background: conic-gradient(from var(--cmt-aura) at 50% 50%,
  
          #ffffff, #a0f4ff, #c4b5fd, #ffc0eb, #fff7a0, #ffffff);
    opacity: .8;
  }
  
  .cmt-np-magma {
    animation: cmt-np-flow 3s linear infinite,
  
                               cmt-np-shock 2.6s ease-out infinite;
  }
  
  .cmt-np-cyber {
    animation: cmt-np-cyber-shock 2.6s ease-out infinite;
  }
  
  .cmt-np-bach_kim {
    background-image:
  
        radial-gradient(circle, rgba(124, 58, 237, .85) 0 1.4px, transparent 2px),
  
        radial-gradient(circle, rgba(6, 182, 212, .85) 0 1.4px, transparent 2px),
  
        radial-gradient(circle, rgba(236, 72, 153, .8) 0 1.2px, transparent 1.8px),
  
        radial-gradient(circle, rgba(37, 99, 235, .75) 0 1.2px, transparent 1.8px),
  
        radial-gradient(circle, rgba(217, 70, 239, .8) 0 1.4px, transparent 2px),
  
        linear-gradient(135deg,
  
          #ffffff 0%, #ffc0eb 20%, #a0f4ff 40%, #fff7a0 60%, #c4b5fd 80%, #ffffff 100%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 4px 4px, 4px 4px, 3px 3px, 3px 3px, 4px 4px, 250% 250%;
    animation: cmt-np-dust 6s linear infinite,
  
                 cmt-np-shock-cool 2.6s ease-out infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes cmt-tier-shine {
  
      0%, 62% { transform: translateX(-120%); }
  
      100%    { transform: translateX(120%); }
  
    }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes cmt-tier-rainbow {
  
      0%   { background-position:   0% 50%; }
  
      100% { background-position: 200% 50%; }
  
    }
}

@property --cmt-aura {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes cmt-np-sweep {
  
      0%, 100% { background-position: 0% 50%; }
  
      50%      { background-position: 100% 50%; }
  
    }
  
  @keyframes cmt-np-flow {
  
      0%   { background-position: 0% center; }
  
      100% { background-position: 300% center; }
  
    }
  
  @keyframes cmt-np-bounce {
  
      0%, 100% { transform: translateY(0) scale(1); }
  
      50%      { transform: translateY(-2px) scale(1.02); }
  
    }
  
  @keyframes cmt-np-beam {
  
      0%        { background-position: -60% 0; }
  
      
  
      45%, 100% { background-position: 160% 0; }
  
    }
  
  @keyframes cmt-np-aura {
  
      from { --cmt-aura: 0deg; }
  
      to   { --cmt-aura: 360deg; }
  
    }
  
  @keyframes cmt-np-shock {
  
      0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,.38),
  
                         0 0 0 0 rgba(241, 7, 163, .55),
  
                         0 1px 3px rgba(0,0,0,.45); }
  
      45%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.38),
  
                         0 0 0 10px rgba(241, 7, 163, 0),
  
                         0 1px 3px rgba(0,0,0,.45); }
  
    }
  
  @keyframes cmt-np-shock-cool {
  
      0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
  
                         0 0 0 0 rgba(160, 244, 255, .7),
  
                         0 1px 3px rgba(0,0,0,.35); }
  
      45%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
  
                         0 0 0 10px rgba(160, 244, 255, 0),
  
                         0 1px 3px rgba(0,0,0,.35); }
  
    }
  
  @keyframes cmt-np-cyber-shock {
  
      0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,.38),
  
                         0 0 10px rgba(122, 0, 255, .45),
  
                         0 0 0 0 rgba(0, 240, 255, .6),
  
                         0 1px 3px rgba(0,0,0,.45); }
  
      45%  { box-shadow: inset 0 1px 0 rgba(255,255,255,.38),
  
                         0 0 18px rgba(0, 240, 255, .7),
  
                         0 0 0 10px rgba(0, 240, 255, 0),
  
                         0 1px 3px rgba(0,0,0,.45); }
  
      100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.38),
  
                         0 0 10px rgba(122, 0, 255, .45),
  
                         0 0 0 10px rgba(0, 240, 255, 0),
  
                         0 1px 3px rgba(0,0,0,.45); }
  
    }
  
  @keyframes cmt-np-dust {
  
      0% {
  
        background-position: 8% 90%, 26% 20%, 48% 75%, 68% 30%, 88% 60%, 0% 0%;
  
      }
  
      50% {
  
        background-position: 12% 15%, 30% 85%, 52% 18%, 72% 88%, 92% 12%, 100% 100%;
  
      }
  
      100% {
  
        background-position: 8% 90%, 26% 20%, 48% 75%, 68% 30%, 88% 60%, 0% 0%;
  
      }
  
    }
}