:root {
       --bg: #0d0d0d;
       --panel: #121212;
       --soft: #ff99c8;
       --muted: #cfcfcf;
       --radius: 10px;
   }
   
   * {
       box-sizing: border-box
   }
   
   body {
       margin: 0;
       background: var(--bg);
       color: #fff;
       font-family: Arial, Helvetica, sans-serif
   }
   
   .wrap {
       max-width: 1100px;
       margin: 0 auto;
       padding: 16px
   }
   
   .site-header {
       border-bottom: 1px solid rgba(255, 255, 255, 0.03)
   }
   
   .site-header .wrap {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 0
   }
   
   .brand {
       font-weight: 700;
       color: var(--soft);
       font-size: 1.2rem
   }
   
   .search-area input {
       width: 100%;
       padding: 10px;
       border-radius: 8px;
       border: 1px solid rgba(255, 255, 255, 0.04);
       background: #0f0f0f;
       color: #fff
   }
   
   .toplinks a {
       color: var(--muted);
       text-decoration: none;
       padding: 6px 8px;
       border-radius: 6px;
       background: transparent;
       border: 1px solid rgba(255, 255, 255, 0.02)
   }
   
   .category-bar {
       padding: 10px 0
   }
   
   .category-bar .cat {
       background: transparent;
       border: 1px solid rgba(255, 255, 255, 0.03);
       padding: 8px 10px;
       margin-right: 8px;
       border-radius: 8px;
       color: var(--muted);
       cursor: pointer
   }
   
   .category-bar .active {
       background: var(--soft);
       color: #111;
       border-color: var(--soft)
   }
   /* grid */
   
   .main-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
       gap: 16px;
       padding: 18px 0
   }
   
   .movie-card {
       background: var(--panel);
       border-radius: 10px;
       overflow: hidden;
       cursor: pointer;
       transition: transform .25s, box-shadow .25s
   }
   
   .movie-card .poster {
       height: 250px;
       overflow: hidden
   }
   
   movie-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: transform .4s
   }
   
   .movie-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 10px 30px rgba(255, 153, 200, 0.06)
   }
   
   .movie-card:hover img {
       transform: scale(1.04)
   }
   
   .m-info {
       padding: 10px
   }
   
   .m-info h3 {
       margin: 0;
       font-size: 15px
   }
   
   .m-cat {
       color: var(--muted);
       font-size: 13px;
       margin-top: 6px
   }
   /* player page - fixed 16:9 container */
   
   .player-page {
       display: grid;
       grid-template-columns: 2fr 1fr;
       gap: 20px;
       padding: 24px 0
   }
   
   .player-box {
       background: #000;
       padding: 10px;
       border-radius: 10px
   }
   
   .fixed-16by9 {
       position: relative;
       width: 100%;
       padding-top: 56.25%;
       /* 16:9 */
       overflow: hidden;
       border-radius: 8px
   }
   
   .fixed-16by9 video,
   .fixed-16by9 iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       border: 0
   }
   /* related */
   
   .rel-info .rel-cat {
       font-size: 12px;
       color: var(--muted)
   }
   /* admin */
   
   admin-login-box {
       max-width: 360px;
       margin: 80px auto;
       padding: 20px;
       background: var(--panel);
       border-radius: 10px
   }
   
   admin-login-box input,
   textarea {
       width: 100%;
       padding: 10px;
       margin: 8px 0;
       border-radius: 8px;
       border: 1px solid rgba(255, 255, 255, 0.04);
       background: #0f0f0f;
       color: #fff
   }
   
   admin-login-box button,
   .btn {
       background: var(--soft);
       border: none;
       color: #111;
       padding: 8px 12px;
       border-radius: 8px;
       cursor: pointer
   }
   
   .admin-area {
       padding: 24px;
       background: transparent
   }
   
   .movie-table {
       width: 100%;
       border-collapse: collapse;
       margin-top: 12px
   }
   
   .movie-table th,
   .movie-table td {
       padding: 8px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.03);
       text-align: left;
       color: var(--muted)
   }
   
   .ok {
       color: #8cf78c
   }
   
   .err {
       color: #ff8c8c
   }
   /* responsive */
   
   @media(max-width:900px) {
       .player-page {
           grid-template-columns: 1fr;
           gap: 12px
       }
       .video-iframe {
           height: 260px
       }
       .movie-card .poster {
           height: 200px
       }
   }
   
   body {
       margin: 0;
       font-family: 'Arial', sans-serif;
       background: #111;
       color: #fff;
   }
   
   .wrap {
       max-width: 1200px;
       margin: auto;
       padding: 0 15px;
   }
   
   .site-header {
       background: #1c1c1c;
       padding: 10px 0;
   }
   
   .header-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .brand {
       font-size: 24px;
       font-weight: bold;
   }
   
   .search-area input {
       padding: 6px 10px;
       border-radius: 4px;
       border: none;
   }
   
   .toplinks a {
       color: #fff;
       text-decoration: none;
   }
   
   .category-bar {
       margin-top: 10px;
   }
   
   .category-bar .cat {
       margin-right: 5px;
       padding: 5px 10px;
       border: none;
       border-radius: 3px;
       background: #333;
       color: #fff;
       cursor: pointer;
   }
   
   .category-bar .cat.active {
       background: #e50914;
   }
   
   .main-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
       gap: 15px;
       margin-top: 20px;
   }
   
   .movie-card {
       background: #222;
       border-radius: 6px;
       overflow: hidden;
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .movie-card:hover {
       transform: scale(1.03);
   }
   
   .poster {
       position: relative;
       width: 100%;
       padding-top: 56.25%;
       /* 16:9 ratio */
       overflow: hidden;
   }
   
   .poster img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .view-count {
       position: absolute;
       top: 5px;
       left: 5px;
       background: rgba(0, 0, 0, 0.6);
       color: #fff;
       padding: 2px 6px;
       font-size: 12px;
       border-radius: 3px;
   }
   
   .m-info {
       padding: 10px;
   }
   
   .m-info h3 {
       margin: 0 0 5px;
       font-size: 16px;
   }
   
   .m-cat {
       font-size: 12px;
       color: #aaa;
   }
   
   body {
       margin: 0;
       font-family: 'Arial', sans-serif;
       background: #111;
       color: #fff;
   }
   
   .wrap {
       max-width: 1200px;
       margin: auto;
       padding: 0 15px;
   }
   
   .site-header {
       background: #1c1c1c;
       padding: 10px 0;
   }
   
   .header-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .brand {
       font-size: 24px;
       font-weight: bold;
   }
   
   .search-area input {
       padding: 6px 10px;
       border-radius: 4px;
       border: none;
   }
   
   .toplinks a {
       color: #fff;
       text-decoration: none;
   }
   
   .category-bar {
       margin-top: 10px;
   }
   
   .category-bar .cat {
       margin-right: 5px;
       padding: 5px 10px;
       border: none;
       border-radius: 3px;
       background: #333;
       color: #fff;
       cursor: pointer;
   }
   
   .category-bar .cat.active {
       background: #e50914;
   }
   
   .main-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));
       gap: 15px;
       margin-top: 20px;
   }
   
   .movie-card {
       background: #222;
       border-radius: 6px;
       overflow: hidden;
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .movie-card:hover {
       transform: scale(1.03);
   }
   
   .poster {
       position: relative;
       width: 100%;
       height: 170px;
       overflow: hidden;
       border-bottom: 1px solid #333;
   }
   
   .poster img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .view-count {
       position: absolute;
       top: 5px;
       left: 5px;
       background: rgba(0, 0, 0, 0.6);
       color: #fff;
       padding: 2px 6px;
       font-size: 12px;
       border-radius: 3px;
   }
   
   .m-info {
       padding: 10px;
   }
   
   .m-info h3 {
       margin: 0 0 5px;
       font-size: 16px;
   }
   
   .m-cat {
       font-size: 12px;
       color: #aaa;
   }
   /* Player Page */
   
   .player-page {
       display: flex;
       flex-wrap: wrap;
       gap: 20px;
       margin-top: 20px;
   }
   /* Player Area */
   
   .player-area {
       flex: 1 1 700px;
       background: #1c1c1c;
       padding: 15px;
       border-radius: 6px;
   }
   
   .player-area .title {
       font-size: 24px;
       margin-bottom: 15px;
   }
   
   .fixed-16by9 {
       position: relative;
       width: 100%;
       padding-top: 56.25%;
       /* 16:9 ratio */
       background: #000;
       border-radius: 6px;
       overflow: hidden;
   }
   
   .fixed-16by9 .video-tag {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }
   
   .desc {
       margin-top: 15px;
       font-size: 14px;
       line-height: 1.5;
   }
   /* Related Area */
   
   .related-area {
       flex: 0 0 300px;
   }
   
   .related-area h2 {
       margin-bottom: 10px;
   }
   
   .related-list {
       display: grid;
       grid-template-columns: 1fr;
       gap: 10px;
   }
   
   .rel-item {
       background: #222;
       border-radius: 6px;
       overflow: hidden;
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .rel-item:hover {
       transform: scale(1.02);
   }
   
   .rel-poster {
       position: relative;
       width: 100%;
       height: 170px;
       overflow: hidden;
   }
   
   .rel-poster img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .rel-view {
       position: absolute;
       top: 5px;
       left: 5px;
       background: rgba(0, 0, 0, 0.6);
       color: #fff;
       padding: 2px 6px;
       font-size: 12px;
       border-radius: 3px;
   }
   
   .rel-info {
       padding: 8px;
   }
   
   .rel-title {
       font-size: 14px;
       font-weight: bold;
   }
   
   .rel-cat {
       font-size: 12px;
       color: #aaa;
   }
   /* Player Page */
   
   .player-page {
       display: flex;
       gap: 20px;
       margin-top: 20px;
   }
   /* Player Area */
   
   .player-area {
       flex: 1;
       background: #1c1c1c;
       padding: 20px;
       border-radius: 8px;
   }
   
   .player-area .title {
       font-size: 24px;
       color: #fff;
       margin-bottom: 15px;
   }
   
   .player-box {
       position: relative;
       width: 100%;
       padding-top: 56.25%;
       /* 16:9 ratio */
       background: #000;
       border-radius: 8px;
       overflow: hidden;
   }
   
   .player-box .video-tag {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }
   
   .desc {
       margin-top: 20px;
       font-size: 14px;
       color: #ccc;
   }
   
   .desc strong {
       color: #fff;
   }
   /* Related Area */
   
   .related-area {
       flex: 0 0 300px;
   }
   
   .related-area h2 {
       color: #fff;
       margin-bottom: 15px;
   }
   
   .related-list {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       gap: 15px;
   }
   
   .rel-item {
       background: #222;
       border-radius: 8px;
       overflow: hidden;
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .rel-item:hover {
       transform: scale(1.05);
   }
   
   .rel-poster {
       position: relative;
       width: 100%;
       height: 170px;
       overflow: hidden;
   }
   
   .rel-poster img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .rel-view {
       position: absolute;
       top: 10px;
       left: 10px;
       background: rgba(0, 0, 0, 0.6);
       color: #fff;
       padding: 5px 10px;
       font-size: 12px;
       border-radius: 5px;
   }
   
   .rel-info {
       padding: 10px;
   }
   
   .rel-title {
       font-size: 14px;
       font-weight: bold;
       color: #fff;
   }
   
   .rel-cat {
       font-size: 12px;
       color: #aaa;
   }
   
   body {
       margin: 0;
       font-family: 'Arial', sans-serif;
       background: #111;
       color: #fff;
   }
   
   .wrap {
       max-width: 1200px;
       margin: auto;
       padding: 0 15px;
   }
   
   .site-header {
       background: #1c1c1c;
       padding: 10px 0;
   }
   
   .header-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .brand {
       font-size: 24px;
       font-weight: bold;
   }
   
   .search-area input {
       padding: 6px 10px;
       border-radius: 4px;
       border: none;
   }
   
   .toplinks a {
       color: #fff;
       text-decoration: none;
   }
   
   .category-bar {
       margin-top: 10px;
   }
   
   .category-bar .cat {
       margin-right: 5px;
       padding: 5px 10px;
       border: none;
       border-radius: 3px;
       background: #333;
       color: #fff;
       cursor: pointer;
   }
   
   .category-bar .cat.active {
       background: #e50914;
   }
   
   .main-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));
       gap: 15px;
       margin-top: 20px;
   }
   
   .movie-card {
       background: #222;
       border-radius: 8px;
       overflow: hidden;
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .movie-card:hover {
       transform: scale(1.03);
   }
   
   .poster {
       position: relative;
       width: 100%;
       height: 170px;
       overflow: hidden;
       border-bottom: 1px solid #333;
   }
   
   .poster img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .view-count {
       position: absolute;
       top: 5px;
       left: 5px;
       background: rgba(0, 0, 0, 0.6);
       color: #fff;
       padding: 2px 6px;
       font-size: 12px;
       border-radius: 3px;
   }
   
   .m-info {
       padding: 10px;
   }
   
   .m-info h3 {
       margin: 0 0 5px;
       font-size: 16px;
   }
   
   .m-cat {
       font-size: 12px;
       color: #aaa;
   }
   
   body {
       margin: 0;
       font-family: 'Arial', sans-serif;
       background: #111;
       color: #fff;
   }
   
   .wrap {
       max-width: 1200px;
       margin: auto;
       padding: 0 15px;
   }
   
   .site-header {
       background: #1c1c1c;
       padding: 10px 0;
   }
   
   .header-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .brand {
       font-size: 24px;
       font-weight: bold;
   }
   
   .search-area input {
       padding: 6px 10px;
       border-radius: 4px;
       border: none;
   }
   
   .toplinks a {
       color: #fff;
       text-decoration: none;
   }
   
   .category-bar {
       margin-top: 10px;
   }
   
   .category-bar .cat {
       margin-right: 5px;
       padding: 5px 10px;
       border: none;
       border-radius: 3px;
       background: #333;
       color: #fff;
       cursor: pointer;
   }
   
   .category-bar .cat.active {
       background: #e50914;
   }
   /* Main Grid */
   
   .main-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));
       gap: 20px;
       margin-top: 20px;
   }
   
   .video-card {
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .video-card:hover {
       transform: scale(1.03);
   }
   
   .video-thumb {
       position: relative;
       width: 100%;
       height: 170px;
       overflow: hidden;
       border-radius: 8px;
   }
   
   .video-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   /* Play button overlay */
   
   .play-overlay {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: 40px;
       color: rgba(255, 255, 255, 0.9);
       text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
       pointer-events: none;
   }
   /* Video info (views & category) */
   
   .video-info {
       position: absolute;
       bottom: 5px;
       left: 5px;
       right: 5px;
       display: flex;
       justify-content: space-between;
       font-size: 12px;
       color: #fff;
       text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
   }
   
   .video-title {
       margin: 5px 0 0 0;
       font-size: 16px;
       color: #fff;
   }
   
   body {
       margin: 0;
       font-family: 'Arial', sans-serif;
       background: #111;
       color: #fff;
   }
   
   .wrap {
       max-width: 1200px;
       margin: auto;
       padding: 0 15px;
   }
   
   .site-header {
       background: #1c1c1c;
       padding: 10px 0;
   }
   
   .header-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .brand {
       font-size: 24px;
       font-weight: bold;
   }
   
   .search-area input {
       padding: 6px 10px;
       border-radius: 4px;
       border: none;
   }
   
   .toplinks a {
       color: #fff;
       text-decoration: none;
   }
   
   .category-bar {
       margin-top: 10px;
   }
   
   .category-bar .cat {
       margin-right: 5px;
       padding: 5px 10px;
       border: none;
       border-radius: 3px;
       background: #333;
       color: #fff;
       cursor: pointer;
   }
   
   .category-bar .cat.active {
       background: #e50914;
   }
   /* Main Grid */
   
   .main-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));
       gap: 20px;
       margin-top: 20px;
   }
   
   .video-card {
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .video-card:hover {
       transform: scale(1.03);
   }
   
   .video-thumb {
       position: relative;
       width: 100%;
       height: 170px;
       overflow: hidden;
       border-radius: 8px;
   }
   
   .video-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   /* Play button overlay */
   
   .play-overlay {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: 40px;
       color: rgba(255, 255, 255, 0.9);
       text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
       pointer-events: none;
   }
   /* Video info (views & category) */
   
   .video-info {
       position: absolute;
       bottom: 5px;
       left: 5px;
       right: 5px;
       display: flex;
       justify-content: space-between;
       font-size: 12px;
       color: #fff;
       text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
   }
   
   .video-title {
       margin: 5px 0 0 0;
       font-size: 16px;
       color: #fff;
   }
   
   body {
       margin: 0;
       font-family: 'Arial', sans-serif;
       background: #111;
       color: #fff;
   }
   
   .wrap {
       max-width: 1200px;
       margin: auto;
       padding: 0 15px;
   }
   
   .site-header {
       background: #1c1c1c;
       padding: 10px 0;
   }
   
   .header-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .brand {
       font-size: 24px;
       font-weight: bold;
   }
   
   .search-area input {
       padding: 6px 10px;
       border-radius: 4px;
       border: none;
   }
   
   .toplinks a {
       color: #fff;
       text-decoration: none;
   }
   
   .category-bar {
       margin-top: 10px;
   }
   
   .category-bar .cat {
       margin-right: 5px;
       padding: 5px 10px;
       border: none;
       border-radius: 3px;
       background: #333;
       color: #fff;
       cursor: pointer;
   }
   
   .category-bar .cat.active {
       background: #e50914;
   }
   /* Main Grid */
   
   .main-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));
       gap: 20px;
       margin-top: 20px;
   }
   
   .video-card {
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .video-card:hover {
       transform: scale(1.03);
   }
   
   .video-thumb {
       position: relative;
       width: 100%;
       height: 170px;
       overflow: hidden;
       border-radius: 8px;
   }
   
   .video-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   /* Play button overlay */
   
   .play-overlay {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: 40px;
       color: rgba(255, 255, 255, 0.9);
       text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
       pointer-events: none;
   }
   /* Video info (views & category) */
   
   .video-info {
       position: absolute;
       bottom: 5px;
       left: 5px;
       right: 5px;
       display: flex;
       justify-content: space-between;
       font-size: 12px;
       color: #fff;
       text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
   }
   
   .video-title {
       margin: 5px 0 0 0;
       font-size: 16px;
       color: #fff;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
   }
   
   .video-card {
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .video-card:hover {
       transform: scale(1.03);
   }
   
   .video-thumb {
       position: relative;
       width: 100%;
       height: 170px;
       overflow: hidden;
       border-radius: 0;
       /* ลบมุมโค้ง ให้เป็นสี่เหลี่ยม */
       border: none;
       /* ไม่มีกรอบ */
   }
   
   .video-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   /* Play button overlay */
   
   .play-overlay {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: 40px;
       color: rgba(255, 255, 255, 0.9);
       pointer-events: none;
   }
   /* Video info (views & category) */
   
   .video-info {
       position: absolute;
       bottom: 5px;
       left: 5px;
       right: 5px;
       display: flex;
       justify-content: space-between;
       font-size: 12px;
       color: #fff;
   }
   
   .video-title {
       margin: 5px 0 0 0;
       font-size: 16px;
       color: #fff;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
   }
   
   body {
       margin: 0;
       font-family: 'Arial', sans-serif;
       background: #111;
       color: #fff;
   }
   
   .wrap {
       max-width: 1200px;
       margin: auto;
       padding: 0 15px;
   }
   /* Navbar */
   
   .site-header {
       position: sticky;
       top: 0;
       z-index: 1000;
       background: #111;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
   }
   /* Top bar */
   
   .header-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px 0;
   }
   
   .brand {
       font-size: 26px;
       font-weight: bold;
       color: #e50914;
       cursor: pointer;
   }
   
   .search-area input {
       padding: 6px 12px;
       border-radius: 4px;
       border: none;
       width: 250px;
       transition: all 0.2s;
   }
   
   .search-area input:focus {
       outline: none;
       box-shadow: 0 0 5px #e50914;
   }
   
   .toplinks a {
       color: #fff;
       text-decoration: none;
       font-weight: 500;
       transition: color 0.2s;
   }
   
   .toplinks a:hover {
       color: #e50914;
   }
   /* Category Bar */
   
   .category-bar {
       display: flex;
       flex-wrap: wrap;
       margin-top: 5px;
       padding-bottom: 5px;
       border-top: 1px solid #222;
       border-bottom: 1px solid #222;
   }
   
   .category-bar .cat {
       margin: 5px 8px;
       padding: 6px 14px;
       border: none;
       border-radius: 20px;
       background: #222;
       color: #fff;
       font-size: 14px;
       cursor: pointer;
       transition: all 0.2s;
   }
   
   .category-bar .cat:hover,
   .category-bar .cat.active {
       background: #e50914;
       color: #fff;
   }
   /* Main Grid */
   
   .main-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));
       gap: 20px;
       margin-top: 20px;
   }
   
   .video-card {
       cursor: pointer;
       transition: transform 0.2s;
   }
   
   .video-card:hover {
       transform: scale(1.03);
   }
   
   .video-thumb {
       position: relative;
       width: 100%;
       height: 170px;
       overflow: hidden;
       border-radius: 0;
       /* สี่เหลี่ยมตรง */
       border: none;
   }
   
   .video-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   /* Play overlay */
   
   .play-overlay {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: 40px;
       color: rgba(255, 255, 255, 0.9);
       pointer-events: none;
   }
   /* Video info (views & category) */
   
   .video-info {
       position: absolute;
       bottom: 5px;
       left: 5px;
       right: 5px;
       display: flex;
       justify-content: space-between;
       font-size: 12px;
       color: #fff;
   }
   
   .video-title {
       margin: 5px 0 0 0;
       font-size: 16px;
       color: #fff;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
   }
   /* Responsive */
   
   @media(max-width: 768px) {
       .header-top {
           flex-direction: column;
           gap: 10px;
       }
       .search-area input {
           width: 100%;
       }
       .category-bar {
           justify-content: center;
       }
   }
   
   .video-card {
       cursor: pointer;
       transform: none;
       /* ลบ hover scale */
   }
   
   .video-card:hover {
       transform: none;
       /* ไม่ขยับ */
   }