/* KimThaiTech Social Embed */
.kts-widget {
    --kts-cols: 3;
    --kts-cols-t: 2;
    --kts-cols-m: 1;
    --kts-gap: 16px;
    --kts-radius: 10px;
    --kts-card-bg: #fff;
    --kts-text: #1f2937;
    --kts-muted: #6b7280;
    --kts-accent: #2563eb;
    --kts-border: rgba(0, 0, 0, .08);
    position: relative;
    box-sizing: border-box;
    color: var(--kts-text);
    font-size: 15px;
    line-height: 1.5;
}
.kts-widget.kts-theme-dark {
    --kts-card-bg: #1f2937;
    --kts-text: #f3f4f6;
    --kts-muted: #9ca3af;
    --kts-accent: #93c5fd;
    --kts-border: rgba(255, 255, 255, .08);
}
.kts-widget *, .kts-widget *::before, .kts-widget *::after { box-sizing: border-box; }

/* Layouts */
.kts-layout-grid .kts-items {
    display: grid;
    grid-template-columns: repeat(var(--kts-cols), minmax(0, 1fr));
    gap: var(--kts-gap);
}
.kts-layout-masonry .kts-items {
    column-count: var(--kts-cols);
    column-gap: var(--kts-gap);
}
.kts-layout-masonry .kts-card {
    break-inside: avoid;
    margin-bottom: var(--kts-gap);
}
.kts-layout-list .kts-items {
    display: flex;
    flex-direction: column;
    gap: var(--kts-gap);
}
.kts-layout-list .kts-card { flex-direction: row; }
.kts-layout-list .kts-media { flex: 0 0 min(320px, 40%); }
.kts-layout-carousel .kts-items, .kts-layout-reels .kts-items {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--kts-cols) - 1) * var(--kts-gap)) / var(--kts-cols));
    gap: var(--kts-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    padding-bottom: 6px;
}
.kts-layout-carousel .kts-card, .kts-layout-reels .kts-card { scroll-snap-align: start; }
.kts-carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
}
.kts-carousel-nav button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--kts-border);
    border-radius: 50%;
    background: var(--kts-card-bg);
    color: var(--kts-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.kts-carousel-nav button:disabled { opacity: .35; cursor: default; }

@media (max-width: 900px) {
    .kts-layout-grid .kts-items { grid-template-columns: repeat(var(--kts-cols-t), minmax(0, 1fr)); }
    .kts-layout-masonry .kts-items { column-count: var(--kts-cols-t); }
    .kts-layout-carousel .kts-items, .kts-layout-reels .kts-items { grid-auto-columns: calc((100% - (var(--kts-cols-t) - 1) * var(--kts-gap)) / var(--kts-cols-t)); }
}
@media (max-width: 600px) {
    .kts-layout-grid .kts-items { grid-template-columns: repeat(var(--kts-cols-m), minmax(0, 1fr)); }
    .kts-layout-masonry .kts-items { column-count: var(--kts-cols-m); }
    .kts-layout-carousel .kts-items, .kts-layout-reels .kts-items { grid-auto-columns: calc((100% - (var(--kts-cols-m) - 1) * var(--kts-gap)) / var(--kts-cols-m)); }
    .kts-layout-list .kts-card { flex-direction: column; }
    .kts-layout-list .kts-media { flex-basis: auto; }
}

/* Reels: tall cover-only cards on a soft background, arrows over the edges, videos in a popup */
.kts-layout-reels {
    padding: 12px;
    border-radius: var(--kts-radius);
    background: #f5f6f7;
}
.kts-layout-reels.kts-theme-dark { background: #111827; }
.kts-layout-reels .kts-items { scrollbar-width: none; padding-bottom: 0; }
.kts-layout-reels .kts-items::-webkit-scrollbar { display: none; }
.kts-layout-reels .kts-card { border: 0; }
.kts-layout-reels .kts-media img, .kts-layout-reels .kts-media iframe {
    aspect-ratio: 9 / 16;
    transition: transform .3s ease;
}
.kts-layout-reels .kts-media > a::after, .kts-layout-reels .kts-media > .kts-play::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .2s;
}
.kts-layout-reels .kts-media:hover img { transform: scale(1.04); }
.kts-layout-reels .kts-media > :hover::after, .kts-layout-reels .kts-play:focus-visible::after { background: rgba(0, 0, 0, .25); }
.kts-layout-reels .kts-play-icon {
    z-index: 1;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    opacity: 0;
    transition: opacity .2s;
}
.kts-layout-reels .kts-play-icon::after { border-color: transparent transparent transparent #111; }
.kts-layout-reels .kts-media :hover > .kts-play-icon, .kts-layout-reels .kts-play:focus-visible .kts-play-icon { opacity: 1; background: rgba(255, 255, 255, .9); }
.kts-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    pointer-events: none;
}
.kts-badge .kts-icon-tiktok { color: #000; }
.kts-layout-reels .kts-carousel-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 2;
    justify-content: space-between;
    margin: 0;
    padding: 0 4px;
    transform: translateY(-50%);
    pointer-events: none;
}
.kts-layout-reels .kts-carousel-nav button {
    border: 0;
    background: #fff;
    color: #111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
/* Arrows appear while the mouse is over the carousel or it has keyboard focus */
.kts-layout-reels:hover .kts-carousel-nav button,
.kts-layout-reels:focus-within .kts-carousel-nav button { opacity: 1; pointer-events: auto; }
/* Touch screens have no hover: keep the arrows visible there */
@media (hover: none) {
    .kts-layout-reels .kts-carousel-nav button { opacity: 1; pointer-events: auto; }
}
.kts-layout-reels .kts-carousel-nav button:disabled,
.kts-layout-reels:hover .kts-carousel-nav button:disabled,
.kts-layout-reels:focus-within .kts-carousel-nav button:disabled { opacity: 0; pointer-events: none; }
.kts-dialog-open { overflow: hidden; }
/* Popup: black box with the video and a side panel; arrows and close button sit outside it on the backdrop */
.kts-dialog {
    width: calc(100vw - 160px);
    max-width: 1640px;
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    background: #000;
    color: #fff;
    overflow: visible;
    font-size: 18px;
    line-height: 1.6;
}
.kts-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.kts-dialog-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    height: 100%;
}
.kts-dialog-stage { position: relative; min-height: 0; padding: 8px 0; }
.kts-dialog-player { display: flex; align-items: center; justify-content: center; height: 100%; }
.kts-dialog-player iframe { display: block; border: 0; background: #000; }
/* The YouTube player fits the video itself: Shorts appear vertical, others 16:9 */
.kts-dialog-youtube iframe { width: 100%; height: 100%; }
.kts-dialog-tiktok iframe { height: 100%; aspect-ratio: 9 / 16; max-width: 100%; }
.kts-dialog .kts-dialog-nav {
    position: fixed;
    top: 50%;
    z-index: 2;
    width: 48px;
    height: 64px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    opacity: .85;
    transition: opacity .15s;
}
.kts-dialog .kts-dialog-nav:hover { opacity: 1; }
.kts-dialog .kts-dialog-nav:disabled { opacity: 0; pointer-events: none; }
.kts-dialog-prev { left: 16px; }
.kts-dialog-next { right: 16px; }
.kts-dialog .kts-dialog-close {
    position: fixed;
    top: 18px;
    right: 14px;
    z-index: 2;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 4px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.kts-dialog .kts-dialog-close:hover { border-color: #fff; background: rgba(0, 0, 0, .6); }
.kts-dialog-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px 14px 18px 24px;
}
.kts-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
}
.kts-dialog-network { display: flex; }
.kts-dialog-network .kts-icon { width: 14px; height: 14px; }
.kts-dialog-network .kts-icon-tiktok { color: #fff; }
.kts-dialog-body {
    flex: 1;
    min-height: 0;
    margin: 30px 0 16px;
    padding-right: 10px;
    overflow-y: auto;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.kts-dialog-body::-webkit-scrollbar { width: 6px; }
.kts-dialog-body::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, .25); }
.kts-dialog .kts-dialog-title {
    margin: 0 0 4px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0;
}
.kts-dialog .kts-dialog-title[hidden] { display: none; }
.kts-dialog-text { margin: 0; color: #fff; white-space: pre-line; }
/* Each link on its own line, full address, wrapped when long */
.kts-dialog .kts-dialog-url {
    display: block;
    color: #3b82f6;
    text-decoration: none;
    word-break: break-all;
}
.kts-dialog .kts-dialog-url:hover { text-decoration: underline; }
.kts-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 10px;
    font-size: 12px;
}
.kts-dialog .kts-dialog-open { color: #fff; font-weight: 700; text-decoration: none; }
.kts-dialog .kts-dialog-open:hover { text-decoration: underline; }
.kts-dialog-share { display: flex; gap: 10px; }
.kts-dialog .kts-share {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    opacity: .9;
}
.kts-dialog .kts-share:hover { opacity: 1; color: #3b82f6; }
.kts-dialog .kts-share.kts-copied { color: #22c55e; }
.kts-share .kts-icon { width: 12px; height: 12px; }
@media (max-width: 900px) {
    .kts-dialog { width: 100vw; height: 100vh; height: 100dvh; font-size: 15px; }
    .kts-dialog-inner { grid-template-columns: 1fr; grid-template-rows: minmax(0, 62%) minmax(0, 1fr); }
    .kts-dialog-stage { padding: 0; }
    .kts-dialog-side { padding: 12px 16px; }
    .kts-dialog-body { margin: 12px 0; }
    .kts-dialog .kts-dialog-title { font-size: 17px; }
    .kts-dialog .kts-dialog-nav { width: 36px; font-size: 36px; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
    .kts-dialog-prev { left: 4px; }
    .kts-dialog-next { right: 4px; }
    .kts-dialog .kts-dialog-close { top: 10px; right: 10px; width: 36px; height: 36px; }
}

/* Card */
.kts-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--kts-card-bg);
    border: 1px solid var(--kts-border);
    border-radius: var(--kts-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.kts-media { position: relative; background: #000; }
.kts-media > a, .kts-media > .kts-play {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.kts-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
}
.kts-layout-masonry .kts-net-rss .kts-media img { aspect-ratio: auto; }
.kts-media iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}
/* TikTok is vertical */
.kts-net-tiktok .kts-media img, .kts-net-tiktok .kts-media iframe { aspect-ratio: 9 / 16; }
.kts-media.kts-noimg img { visibility: hidden; background: linear-gradient(135deg, #374151, #111827); }
.kts-icon-tiktok { color: var(--kts-text); }
.kts-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    background: rgba(0, 0, 0, .7);
    transition: background .15s;
}
.kts-play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
}
.kts-media :hover > .kts-play-icon, .kts-play:focus-visible .kts-play-icon { background: #f00; }
.kts-play:focus-visible { outline: 3px solid var(--kts-accent); outline-offset: -3px; }
.kts-body { padding: 12px 14px 14px; min-width: 0; }
.kts-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 6px;
    color: var(--kts-muted);
    font-size: 13px;
}
.kts-icon { flex: none; }
.kts-icon-youtube { color: #f00; }
.kts-icon-rss { color: #f59e0b; }
.kts-author { color: inherit; font-weight: 600; text-decoration: none; }
.kts-author:hover { text-decoration: underline; }
.kts-meta time::before { content: "·"; margin-right: 8px; }
.kts-widget .kts-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.kts-widget .kts-title a { color: var(--kts-text); text-decoration: none; }
.kts-widget .kts-title a:hover { color: var(--kts-accent); text-decoration: underline; }
.kts-widget .kts-text {
    margin: 0;
    color: var(--kts-muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}
.kts-empty { margin: 0; padding: 24px; text-align: center; color: var(--kts-muted); }
.kts-admin-notice {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-left: 4px solid #d63638;
    background: #fcf0f1;
    color: #50575e;
    font-size: 13px;
}