/*
 Theme Name: Xôn Xao Theme
 Theme URI: https://example.com/
 Description: A lightweight child theme for Hello Elementor. Safe place for your custom CSS/JS/PHP.
 Author: Diem Bui
 Author URI: https://example.com/
 Template: hello-elementor
 Version: 1.0.0
 Text Domain: hello-elementor-child
*/

/* Put your custom CSS below */
/* Ẩn/mở mượt mà khối nội dung */
#about-content.is-open{ grid-template-rows: 1fr !important;
    opacity: 1 !important;}
.about-toggle{ display:inline-block; cursor:pointer; font-weight:800; padding-bottom:2px; position:relative; z-index:99; }
.about-toggle::before{ content:"+"; margin-right:6px;position: absolute; left: 0;    bottom: 0px; }
.about-toggle.open::before{ content:"−"; }
.elementor-divider, .elementor-divider-separator{ pointer-events:none; }

/* Wrapper */
.xo-service-hover{ position:relative; }


/*.xo-gif-preview img{
  width:100%; height:100%; object-fit:cover; display:block;
}*/

/* Danh sách term */
.xo-term-list{ list-style:none; margin:0; padding:0; }
.xo-term{ margin:2px 0; }
.xo-term a{ text-decoration:none; font-family: "Xon Xao text", Sans-serif;font-size: 24px;color: #000000;}
/*.xo-term a:hover{ text-decoration:underline; }*/

/* Nếu cần preview rộng hơn/nhỏ hơn: chỉnh --preview-width ngay trên shortcode wrapper */
/* đặt vị trí tương đối cho khối shortcode */
.xo-service-hover{ position: relative; }



/* Sân dính top màn hình */
.xo-archive-collage .collage-stage{
  position: sticky;
  top: var(--header-h);
  height: var(--stage-h);
  width: 100%;
  overflow: visible !important;
  z-index: 2;
}

/* Item luôn thấy (JS sẽ đặt vị trí) */
.xo-archive-collage .collage-item{
  position:absolute; left:0; top:0;
  transform: translate(var(--x,0px), var(--y,0px));
  will-change: transform, width, height;
  opacity: 1;
}

/* Ảnh bám TOP */
.xo-archive-collage .collage-item img{
  width:100%; height:100%; display:block;
  object-fit: cover;
  object-position: 50% 0%; /* TOP */
}

/* (tùy) hiệu ứng xuất hiện nhẹ sau khi JS set xong */
.xo-archive-collage.is-init .collage-item{ opacity:.001; }
.xo-archive-collage.is-active .collage-item{ opacity:1; transition:opacity .25s ease; }


.xo-front-title{
      padding-top: 27px;
    font-size: 24px;
    line-height: 23px;
}

/* Màu riêng cho từng mục khi hover/focus */
#menu-menu > li:nth-child(1):hover > a:not(.pp-menu-item-active),
#menu-menu > li:nth-child(1) > a:focus-visible:not(.pp-menu-item-active){
  color:#0000FF;       /* Work – xanh dương */
}
#menu-menu > li:nth-child(2):hover > a:not(.pp-menu-item-active),
#menu-menu > li:nth-child(2) > a:focus-visible:not(.pp-menu-item-active){
  color:#00FF00;       /* Service – xanh lá */
}
#menu-menu > li:nth-child(3):hover > a:not(.pp-menu-item-active),
#menu-menu > li:nth-child(3) > a:focus-visible:not(.pp-menu-item-active){
  color:#FF0000;       /* About – đỏ */
}
#menu-menu > li:nth-child(4):hover > a:not(.pp-menu-item-active),
#menu-menu > li:nth-child(4) > a:focus-visible:not(.pp-menu-item-active){
  color: #FFFF00;       /* Archive – vàng */
}

.gallery-draggable {
  position: relative;
  width: 100%;
  height: 700px; /* tuỳ chỉnh theo layout */
  overflow: hidden;
}

.drag-item {
  position: absolute;
  cursor: grab;
  user-select: none;
  transition: transform 0.1s ease;
  max-width: 300px; /* tuỳ chỉnh */
  border-radius: 10px;
}

.drag-item:active {
  cursor: grabbing;
}